|
| |
|
|
Brandon
Posts: 431
Joined: 7/13/2004
From: Indiana, US
Status: offline
 |
Layout Question - 3/21/2006 11:31:09
I'm trying to create a layout like this without using tables in CSS. Could anyone suggest anything? Could I do this with nested DIVs? Thanks
< Message edited by Brandon -- 3/21/2006 13:44:45 >
_____________________________
~ Brandon
|
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Layout Question - 3/21/2006 11:57:40
Hi
There's a couple of different ways to do this including using a list (which is probably the semantic way of doing it) but probably the easiest way would just be to use a series of divs:
<div class="ident">
<img src="yourimage.jpg">
<p>Joe Bloggs</p>
</div>
<div class="ident">
<img src="yourimage1.jpg">
<p>John Doe</p>
</div>
CSS:
.ident {border:1px solid;width:400px;margin-bottom:1em;}
.ident img {float:left;}
p.ident {whatever margins, font-sizes etc you want here}
Now there are a couple of things you could add to the .ident element depending on what you want it to look like.
Because the image is floated that means that the div will only actually be the length of the paragraph of text. If you know for sure that the paragraph will only ever have a single line in then you could add a height to the div class (if you want a border that is). If you want the name to be vertically aligned next to the image then you can set the line-height to be the same as the image height. That only works well if all the images are going to be the same height.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tarwn
Posts: 15
Joined: 1/19/2003
From: South-Eastern NC, USA
Status: offline
|
RE: Layout Question - 3/21/2006 13:15:18
Quick addition to TailSlide's post:
Rather than be dependant on the length of the text for the height of your div, or specifying a hardcoded height, you can use an additional element with the clear: both attribute set that will clear any floated elements (basically forcing your outer div to expand to be large enough to hold the contents of any floated items). Example:
<style>
.ident{
border: 2px solid blue;
margin: 5px 10px 15px 10px;
}
.ident .limg{ float: left; }
.ident .break{ clear: both; }
</style>
<div class="ident">
<img class="limg" src="http://www.google.com/intl/en/images/logo.gif">
<p>This is some text with the cleared float div below it</p>
<div class="break"></div>
</div>
<div class="ident">
<img class="limg" src="http://www.google.com/intl/en/images/logo.gif">
<p>This is some text with the cleared float div below it</p>
<div class="break"></div>
</div>
<div class="ident">
<img class="limg" src="http://www.google.com/intl/en/images/logo.gif">
<p>This is some text <strong>without</strong> the cleared float div below it</p>
</div>
<div class="ident">
<img class="limg" src="http://www.google.com/intl/en/images/logo.gif">
<p>This is some text <strong>without</strong> the cleared float div below it</p>
</div>
I would still agree with him on setting the line-height, but I would sitll consider clearing your floats in any case, as some browsers let the user change the default font-sizes and spacing and such, and those minor changes can sometimes cause wierd issues if your completely dependant on the font being a certain size or something similar.
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Layout Question - 3/21/2006 14:12:49
Any attempt to be educative on my part is purely accidental!
Seriously - clearing floats is something that anyone who uses CSS for layouts will come up against at one time or another. I've found that there are solutions to 99% of layout issues already well documented on the web - the problem is working out which issue you're suffering from. Clearing layouts is one of the classics. Here's a tutorial that explains it much much better than I ever could: http://garyblue.port5.com/webdev/floatdemo.html
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Brandon
Posts: 431
Joined: 7/13/2004
From: Indiana, US
Status: offline
|
RE: Layout Question - 3/21/2006 14:37:54
Thanks a lot guys....The only problem I'm having now is my paragraph tag. It doesn't want to do anything. I just want the text to be on the right hand side of the pic and in the middle.
_____________________________
~ Brandon
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Layout Question - 3/21/2006 14:40:05
If you float the image left then the paragraph will have no choice but to sit to it's right-hand side. When you say "in the middle" do you mean horizontally or vertically?
Edit: Here you go - here's a test page with cleared floats and cleared divs and relative line-heights so that if the font's increased the box will increase too.
http://www.littleblueplane.com/test/float/floattest.html
Feel free to steal that code.
< Message edited by Tailslide -- 3/21/2006 14:53:58 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Brandon
Posts: 431
Joined: 7/13/2004
From: Indiana, US
Status: offline
|
RE: Layout Question - 3/21/2006 14:53:23
vertically sorry
_____________________________
~ Brandon
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Layout Question - 3/21/2006 14:54:14
See above
(I've used line-height to vertically align the name - although I've used ems so it'll scale - you obviously have to have a rough idea of the height of the image to do this.
One of the awkward things about CSS layouts is trying to vertically position things within divs. If you know that the text will remain on a single line then you can use line-height set to the height of the container (fixed or relative measurement work). If it runs onto more than one line or if the height of the div is unpredictable then you're in trouble.
< Message edited by Tailslide -- 3/21/2006 15:04:08 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Layout Question - 3/22/2006 12:46:37
OK well there's a couple of choices depending on what order you want the names to run in (downwards or across then down).
The easiest way would be to float all the boxes containing the images and the name to the left. In theory you'd then get one single long horizontal line of boxes if your screen was wide enough. To ensure you only get two next to each other you'd then put all these floating boxes in another div which is just wide enough to allow two boxes to sit next to each other. Does that make any sense?
So you'd have:
box A -------- box B
box C -------- box D
box E -------- box F
If you want them to be ordered downwards then across (like a newspaper column) then there are a number of tricky methods that frankly I haven't bothered with yet so I can't recommend - so I'd stick to a simpler solution - have, for instance 3 of the boxes in a containing div which you float left then have the next three in another containing div which you also float left - that will put it up next to the first one.
So you'd then have
box A --------- box D
box B --------- box E
box C --------- box F
I'd say the first method is better because you've got less markup (only one containing div).
Edit: Here's the same test page with this on it too: http://www.littleblueplane.com/test/float/floattest.html
BTW - just use this as a starting point - I've only spent a couple of minutes on it so I wouldn't swear by it as being the best answer - just all I could come up with before dinner!
< Message edited by Tailslide -- 3/22/2006 13:03:09 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Layout Question - 3/23/2006 11:32:08
Hi Brandon
After a little experimentation - it looks like IE's having a small tantrum about using ems to size the line-height. On my system it seems to revert to normal if you use pxs instead. You'll need to have a play around to get the right line-height - it will be your average image height plus any padding you've got top and bottom. So it looks like on yours you'd need about 92px line-height but you might need to play with that a bit to get it right.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
d a v e
Posts: 4010
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Layout Question - 3/23/2006 11:53:52
what about just using a plain number e.g. 1.6 for line height?!
_____________________________
David Prescott
Gekko web design
| |
|
|
|
caz
Posts: 3468
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: Layout Question - 3/23/2006 12:09:25
quote:
ORIGINAL: d a v e
what about just using a plain number e.g. 1.6 for line height?!
Agreed, that's what I usually do with no problems on IE.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
d a v e
Posts: 4010
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Layout Question - 3/23/2006 12:45:51
i rememeber reading some eric meyer thing about inheritance for line height using ems and it being a bit muddled so just the number was (possibly) a better idea. if i find what he says i'll add an edit ;)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Layout Question - 3/23/2006 12:54:18
Cool - please do Dave.
I've only used it for actual text line-height (usually %) or for lining up a nav bar text when I used pxs. Trying to switch to using more fluid measurement systems - that'll teach me to try to be clever!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
d a v e
Posts: 4010
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Layout Question - 3/23/2006 14:11:12
that's the monkey! thanks for that caz i couldn't find it straight away ;)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
Brandon
Posts: 431
Joined: 7/13/2004
From: Indiana, US
Status: offline
|
RE: Layout Question - 3/23/2006 14:32:53
Thanks guys, I just changed my line-height to 80px and now it works.
_____________________________
~ Brandon
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
Sorry, it's been a long day... Somebody slap me!
