I'm making a website for a extreme sports company for a school project, I want to showcase the sports by having a picture followed by some text in a container like element. I am relatively new to HTML and CSS.
Here is the HTML
<div class="sports" "spacing">
<img src="images/skydive.jpg" class="thumbnail" alt="" />
<p class="float" > Skydiving is one of those things everybody wants to experiance and is on many peoples bucket list. It is the ultimate thrill hurtaling towards the earth with no restrictions. We have a number of techniques avalible including Tandem, Static line and solo! </p>
</div>
And the CSS
.sports {
height:230px;
width:900px;
background-color:#f1f1f1;
margin-right:auto;
margin-left:auto;
margin-bottom: 20px;
display:table;
}
.thumbnail {
max-height: 200px;
margin-top:15px;
margin-bottom:15px;
margin-left: 15px;
display:inline-block;
}
.float {
text-align:center;
display:inline-block;
width:410px;
position:relative;
top:-71px;
padding-left:80px;
}
I've played around with these settings and they work for this one, But its specific to the image size and amount of text and i dont really wanna have to play around doing the same thing for another 6 different things.
Thanks
I'm not quite sure what you are trying to get, but probably easier way would be to give your image "float" option and remove float from the text (relative positioning should be unnecessary). When text is displayed inline it will use space around the image, respecting image margin.
Related
I am writing a simple CV which i am coding into a small web page to display my skills to possible employers. I am only 17 and hoping to get an apprenticeship in web development.
Now, my problem is, I have added an image of myself on the center of the top of the page and i'm trying to wrap my fore and surname on either side of the image. I have used a list for each name and then set their display to inline, and their list-style to none.
This image is what I am currently at.
This is what I want to achieve.
How will I go about doing this? I can provide the code is needed as its a fresh page.
EDIT: Yes, ill align the text properly once completed.
I PUT THE CODE LINKS IN THE IMGUR PICS AS I CANT POST > 2 LINKS.
You can get rid of the li and do it completely in a div with vertical-align:middle; like so:
HTML:
<div class="container">
Kieran<img src="http://i.imgur.com/2cEiTiu.jpg" height="150" width="150" />Rigby
</div>
CSS:
.container {
width:80%;
margin-right:auto;
margin-left:auto;
text-align:center;
}
img {
border-radius:50%;
vertical-align: middle;
padding-left:4em;
padding-right:4em;
}
Result: http://jsfiddle.net/codyogden/9mmteper/
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
I am new in HTML & CSS. I learned web design using table tags. Now i am learning table-less design using div tags. I am now converting my old designed website to new one using div tags. I am having a problem in my design. I am posting table tag which is working fine and new code in div tag which is not accurate as old one. Kindly tell me where I am having mistake.
New design which is working fine:
Visit http://jsfiddle.net/rizwan1969/k4111Lzj/1/
New design which is not accurate as old:
Visit http://jsfiddle.net/rizwan1969/8vpyk815/
How can I achieve the same look without using tables?
you're sorta close, when you're using divs, you have to be careful of what you put on the outside divs, because they also hold true for the inner divs, so what you want is something like this:
#right_col {
width:260px;
/* padding:5px; */
background-color:#999900;
float:left;
line-height:18px;
font-size:12px; color:#FFFFFF; text-align:justify
}
#heading
{
font-size:16px;
color:#FFFFFF;
padding:10px;
background-color:#030;
display:block;
}
.content {
padding:7px;
}
and add a content div to separate the header from the text:
<div id="right_col">
<strong id="heading">QUAID'S MESSAGE</strong>
<div class="content">
<img src="images/quaid-2.jpg" align="left" style="margin-right:5px; border: 1px solid #006600; "/> "Pakistan is proud of her youth, particularly the students, who are nation builders of tomorrow. They must fully equip themselves by discipline, education, and training for the arduous task lying ahead of them."
</div>
</div>
heres the fiddle: http://jsfiddle.net/8vpyk815/2/
you also should be careful of all the random paddings cause they can make working with elements inside other elements difficult
I want to display two images in a div with one at the top and one on the bottom.
I have achieved this but there seems to be extra space especially at the bottom and I don't know where this comes from. When I use Firebug layout it show a height of 61 pixels but my images are only 18x16 and I think that doesn't include padding and margins which are just a few pixels in any case.
What am I doing wrong? Is there a better way to do this?
jsfiddle
<div class="ex6">
<img src="images/uparrow.png" align="top" id="Z6Sync" width="18" height="16" title="up" onclick="manualup()" alt="up"><p>
<img src="images/downarrow.png" id="Z6Sync" width="18" height="16" title="up" onclick="manualup()" alt="down">
</div>
css
div.ex6
{
padding-top:5px;
padding-bottom:1px;
padding-right:10px;
padding-left:10px;
border:2px;
font-size:0.7em;
border-style:solid;
border-color:#ddd;
margin-top: 8px;
margin-bottom: 2px;
overflow: hidden;
float:right;
background: #eee;
cursor:pointer
}
Your problem lies in the <p> tag you added after the first image. A paragraph has a fixed style that includes a margin/padding after the paragraph. Get rid of it and take care of adding the line break via CSS to make sure the images are shown one below the other.
To achieve this you can for example set the images inside of your image to be displayed as block element:
div.ex6 img { display: block }
If you do that, you will have to add some more styling though to add some more margins, especially between the images. You do could do it like this:
div.ex6 img:first-child { margin-bottom: 5px }
But there are also many other ways, including just using <br /> instead of <p>. I personally don't like using manual line breaks for positioning though.
I'm having trouble finding the right solution for this fully fluid layout. I want the Sub-title in the following fiddles to be vertically center aligned next to the icon. The Sub-title may break onto multiple lines depending on the size of the browser (and varying length of text).
I have two fiddles prepared - the first attempt is my preferred approach as I've more thoroughly tested similar layouts:
http://jsfiddle.net/mmDFC/
The second fiddle, is an attempt on the same situation using display:table-cell;, but for the life of me I couldn't fix up the lost right text alignment, and I've also never thoroughly tested IE6+ compat with this display type:
http://jsfiddle.net/mmDFC/1/ (this almost works, save the loss of text-align:right;)
I have looked up a host of similarly titled SO questions but couldn't find what I wanted, so great answer points me to one I've missed, or come up with a solution to the above.
All in the name of vertical aligned text... :/
Browser update: I fiddled in Chrome, I see IE8 behaves similarly, but Ffox3 behaves differently for solution 2.
If I understand what you want right, you just need to add display:table to the h2
<div class="wrapper clearfix">
<h1>Main Title</h1>
<h2>
<span id="fluid">
Fluid Span
</span>
<span id="icon">
Lots of long text...
</span>
</h2>
</div>
.clearfix:after {
content:"";
display:block;
clear:both;
}
h2 {
float:right;
text-align:right;
background-color:#999;
display:table;
width:43%;
}
span {
background-color:#ccc;
border:1px #000 solid;
vertical-align:middle;
}
span#fluid {
display:table-cell;
height:100%;
}
span#icon {
display:table-cell;
width:60px;
height:40px;
}
http://jsfiddle.net/thomas4g/WecP4/28/
Let me know if this isn't what you want.