By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,985 Members | 1,776 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,985 IT Pros & Developers. It's quick & easy.

3-column liquid layout? (for thumbnails)

P: n/a
http://phazm.net/csstest/index2.html

I'm trying to make the thumbnails fit to the width of the page, so
there are 3-4 in each row, but when you resize, I want it to basically
flow with the page, and I'm having a bit of a hard time figuring that
out.

I want the code to remain logical:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

and so on.

Anyone have any ideas?

I've read this,
http://www.alistapart.com/articles/multicolumnlists
but I can't really make it work for me.

Really lookin for some help here,

thanks,

- Jon

Oct 28 '06 #1
Share this Question
Share on Google+
27 Replies


P: n/a

FuzzyLogik wrote:
http://phazm.net/csstest/index2.html

I'm trying to make the thumbnails fit to the width of the page, so
there are 3-4 in each row, but when you resize, I want it to basically
flow with the page, and I'm having a bit of a hard time figuring that
out.

I want the code to remain logical:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

and so on.

Anyone have any ideas?

I've read this,
http://www.alistapart.com/articles/multicolumnlists
but I can't really make it work for me.

Really lookin for some help here,

thanks,

- Jon
The problem I'm having is getting the text UNDER the thumbnail, and
centered. Also, getting 3 thumbnails in a row, I can't figure that out.

Oct 28 '06 #2

P: n/a
On 2006-10-28, FuzzyLogik <ta****@gmail.comwrote:
http://phazm.net/csstest/index2.html

I'm trying to make the thumbnails fit to the width of the page, so
there are 3-4 in each row, but when you resize, I want it to basically
flow with the page, and I'm having a bit of a hard time figuring that
out.

I want the code to remain logical:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

and so on.

Anyone have any ideas?
I think the best approach is likely to be to float those <li>s.
I've read this,
http://www.alistapart.com/articles/multicolumnlists
but I can't really make it work for me.
They did mention floats, but rejected the idea because list item
numbering doesn't go in columns. But your thumbnails aren't numbered, so
that doesn't matter.

If you do float the <li>s the first thing you'll find is they jump down
the page. This is because they're in an auto-width container that's also
floated and to the right of another float. So they fill that container
up to the full containing width, which ends up jumping down to clear the
first float to somewhere where there's more space. So the first thing to
do is to set a width on div#content.
Oct 28 '06 #3

P: n/a
FuzzyLogik wrote:
FuzzyLogik wrote:
>http://phazm.net/csstest/index2.html

I'm trying to make the thumbnails fit to the width of the page,

The problem I'm having is getting the text UNDER the thumbnail, and
centered. Also, getting 3 thumbnails in a row, I can't figure that
out.
..thumbs li {display: inline; text-align: center; }

and place a <brbetween the image and the caption in the HTML.

--
-bts
-Motorcycles defy gravity; cars just suck
Oct 28 '06 #4

P: n/a

Beauregard T. Shagnasty wrote:
FuzzyLogik wrote:
FuzzyLogik wrote:
http://phazm.net/csstest/index2.html

I'm trying to make the thumbnails fit to the width of the page,
The problem I'm having is getting the text UNDER the thumbnail, and
centered. Also, getting 3 thumbnails in a row, I can't figure that
out.

.thumbs li {display: inline; text-align: center; }

and place a <brbetween the image and the caption in the HTML.

--
-bts
-Motorcycles defy gravity; cars just suck
Can you think of a way to not use br (or any additional tags, for that
matter)

Oct 28 '06 #5

P: n/a

Ben C wrote:
On 2006-10-28, FuzzyLogik <ta****@gmail.comwrote:
http://phazm.net/csstest/index2.html

I'm trying to make the thumbnails fit to the width of the page, so
there are 3-4 in each row, but when you resize, I want it to basically
flow with the page, and I'm having a bit of a hard time figuring that
out.

I want the code to remain logical:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

and so on.

Anyone have any ideas?

I think the best approach is likely to be to float those <li>s.
I've read this,
http://www.alistapart.com/articles/multicolumnlists
but I can't really make it work for me.

They did mention floats, but rejected the idea because list item
numbering doesn't go in columns. But your thumbnails aren't numbered, so
that doesn't matter.

If you do float the <li>s the first thing you'll find is they jump down
the page. This is because they're in an auto-width container that's also
floated and to the right of another float. So they fill that container
up to the full containing width, which ends up jumping down to clear the
first float to somewhere where there's more space. So the first thing to
do is to set a width on div#content.
I can only give it a relative width to keep it liquid, right?

I can't seem to find the happy medium to make it take the whole width,
without going to the bottom.

Oct 28 '06 #6

P: n/a
FuzzyLogik wrote:
Beauregard T. Shagnasty wrote:
>FuzzyLogik wrote:
>>FuzzyLogik wrote:
http://phazm.net/csstest/index2.html

I'm trying to make the thumbnails fit to the width of the page,

The problem I'm having is getting the text UNDER the thumbnail, and
centered. Also, getting 3 thumbnails in a row, I can't figure that
out.

.thumbs li {display: inline; text-align: center; }

and place a <brbetween the image and the caption in the HTML.

Can you think of a way to not use br (or any additional tags, for that
matter)
Restrict the width of the <lito some number of pixels perhaps, but
this will mess up the display if/when someone increases the text size...
What's wrong with a <br>? This is what it is designed for.

--
-bts
-Motorcycles defy gravity; cars just suck
Oct 28 '06 #7

P: n/a
In article
<W8*********************@bgtnsc05-news.ops.worldnet.att.net>,
"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:
FuzzyLogik wrote:
FuzzyLogik wrote:
http://phazm.net/csstest/index2.html

I'm trying to make the thumbnails fit to the width of the page,
The problem I'm having is getting the text UNDER the thumbnail, and
centered. Also, getting 3 thumbnails in a row, I can't figure that
out.

.thumbs li {display: inline; text-align: center; }

and place a <brbetween the image and the caption in the HTML.
Or use <pfor caption and style it, you can see the sort of
thing at

<http://members.optushome.com.au/droo...plate/galleryF
loatPara.html>

and adapt it to your needs.

--
dorayme
Oct 28 '06 #8

P: n/a
On 2006-10-28, FuzzyLogik <ta****@gmail.comwrote:
[snip]
http://phazm.net/csstest/index2.html

I'm trying to make the thumbnails fit to the width of the page, so
there are 3-4 in each row, but when you resize, I want it to basically
flow with the page, and I'm having a bit of a hard time figuring that
out.
[snip]
>If you do float the <li>s the first thing you'll find is they jump down
the page. This is because they're in an auto-width container that's also
floated and to the right of another float. So they fill that container
up to the full containing width, which ends up jumping down to clear the
first float to somewhere where there's more space. So the first thing to
do is to set a width on div#content.

I can only give it a relative width to keep it liquid, right?
You mean percentage?
I can't seem to find the happy medium to make it take the whole width,
without going to the bottom.
You've got IIRC two columns, the first one is some number of pixels, and
you want the second one to occupy the remaining width. For this it's
better to use absolutely positioned boxes, either for both columns, but
certainly for the right-hand one, than floats.

If the left column has a width of 160px, you can make the right column
left: 160px; right: 0px. This means the second column runs from the
160th pixel from the left edge all the way to the right edge of the
container. Just what you want. There's no way to set the width on a
float to "the rest" like this, even with percentages. You can't say
"100% - 160px".

You can still use floats for the thumbnails.
Oct 28 '06 #9

P: n/a
On 2006-10-28, FuzzyLogik <ta****@gmail.comwrote:
>
Beauregard T. Shagnasty wrote:
>FuzzyLogik wrote:
FuzzyLogik wrote:
http://phazm.net/csstest/index2.html

I'm trying to make the thumbnails fit to the width of the page,

The problem I'm having is getting the text UNDER the thumbnail, and
centered. Also, getting 3 thumbnails in a row, I can't figure that
out.

.thumbs li {display: inline; text-align: center; }
The li was floating, which means setting display: inline on it does
nothing. And text-align is set on the block box, not on the inline boxes
anyway.
>and place a <brbetween the image and the caption in the HTML.
But it's basically the right idea.
>--
-bts
-Motorcycles defy gravity; cars just suck

Can you think of a way to not use br (or any additional tags, for that
matter)
You can easily avoid the <brby making img display: block.

In this case, make the li also text-align: center.

<li>
<img ...>
Caption
</li>

should do the trick. The floating li will shrink-to-fit the block which
will contain two lines, the image, and an anonymous block box containing
the centered caption.
Oct 28 '06 #10

P: n/a
dorayme wrote:
"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:
>.thumbs li {display: inline; text-align: center; }

and place a <brbetween the image and the caption in the HTML.

Or use <pfor caption and style it, you can see the sort of
thing at
His captions are already in the <li>, why not just style it, instead of
introducing additional elements that aren't really needed?
<http://members.optushome.com.au/droo...plate/galleryF
loatPara.html>
Yours are in a series of <div>s. Perhaps that has less of a semantic
meaning than as a list?

--
-bts
-Motorcycles defy gravity; cars just suck
Oct 28 '06 #11

P: n/a
Ben C wrote:
On 2006-10-28, FuzzyLogik <ta****@gmail.comwrote:
>>
Beauregard T. Shagnasty wrote:
>>.thumbs li {display: inline; text-align: center; }

The li was floating, which means setting display: inline on it does
nothing. And text-align is set on the block box, not on the inline boxes
anyway.
I didn't see any floats in the css, only this:

.thumbs ul {
list-style-type:none;
}

I added my .thumbs li (.. to his page, and it did what he was asking...
>>and place a <brbetween the image and the caption in the HTML.

But it's basically the right idea.
>Can you think of a way to not use br (or any additional tags, for that
matter)

You can easily avoid the <brby making img display: block.
I think the <bris more semantically correct...
In this case, make the li also text-align: center.
That's what I said above. <g>

--
-bts
-Motorcycles defy gravity; cars just suck
Oct 29 '06 #12

P: n/a
In article
<vD*********************@bgtnsc05-news.ops.worldnet.att.net>,
"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:
dorayme wrote:
"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:
.thumbs li {display: inline; text-align: center; }

and place a <brbetween the image and the caption in the HTML.
Or use <pfor caption and style it, you can see the sort of
thing at

His captions are already in the <li>, why not just style it, instead of
introducing additional elements that aren't really needed?
<http://members.optushome.com.au/droo...plate/galleryF
loatPara.html>

Yours are in a series of <div>s. Perhaps that has less of a semantic
meaning than as a list?
In that case, B, I have stuffed up! I meant to show the list
example I had...

<http://members.optushome.com.au/droo...plate/galleryL
istedCaptioned.html>

You are right about the meaning and I did feel the way you did
when comparing various layouts (divs floated, compared with
inline listed thumbs). JL thought that on balance, the divs would
likely have less trouble across browsers. He may even have
muttered stuff about the list which I have incorporated.

--
dorayme
Oct 29 '06 #13

P: n/a
dorayme wrote:
"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:
>dorayme wrote:
>><http://members.optushome.com.au/droo...plate/galleryF
loatPara.html>

Yours are in a series of <div>s. Perhaps that has less of a semantic
meaning than as a list?

In that case, B, I have stuffed up! I meant to show the list
example I had...

<http://members.optushome.com.au/droo...plate/galleryL
istedCaptioned.html>
This one works quite nicely. <g>

--
-bts
-Motorcycles defy gravity; cars just suck
Oct 29 '06 #14

P: n/a

dorayme wrote:
In article
<vD*********************@bgtnsc05-news.ops.worldnet.att.net>,
"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:
dorayme wrote:
"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:
>.thumbs li {display: inline; text-align: center; }
>>
>and place a <brbetween the image and the caption in the HTML.
>
Or use <pfor caption and style it, you can see the sort of
thing at
His captions are already in the <li>, why not just style it, instead of
introducing additional elements that aren't really needed?
<http://members.optushome.com.au/droo...plate/galleryF
loatPara.html>
Yours are in a series of <div>s. Perhaps that has less of a semantic
meaning than as a list?

In that case, B, I have stuffed up! I meant to show the list
example I had...

<http://members.optushome.com.au/droo...plate/galleryL
istedCaptioned.html>

You are right about the meaning and I did feel the way you did
when comparing various layouts (divs floated, compared with
inline listed thumbs). JL thought that on balance, the divs would
likely have less trouble across browsers. He may even have
muttered stuff about the list which I have incorporated.

--
dorayme
Alright, there seems to be some debate, so I tried pretty much
everything that was said here, and variations, and can't find anythign
that doesn't break in IE, or when expanded in FF.

I re-uploaded the page if you can take a look.

Thanks,

- Jon

Oct 29 '06 #15

P: n/a
In article
<11**********************@m7g2000cwm.googlegroups. com>,
"FuzzyLogik" <ta****@gmail.comwrote:
<http://members.optushome.com.au/droo...plate/galleryL
istedCaptioned.html>

You are right about the meaning and I did feel the way you did
when comparing various layouts (divs floated, compared with
inline listed thumbs). JL thought that on balance, the divs would
likely have less trouble across browsers. He may even have
muttered stuff about the list which I have incorporated.

--
dorayme

Alright, there seems to be some debate, so I tried pretty much
everything that was said here, and variations, and can't find anythign
that doesn't break in IE, or when expanded in FF.

I re-uploaded the page if you can take a look.
Looks the same to me from the last time I uploaded it. How did
you get my password?

--
dorayme
Oct 29 '06 #16

P: n/a

dorayme wrote:
In article
<11**********************@m7g2000cwm.googlegroups. com>,
"FuzzyLogik" <ta****@gmail.comwrote:
<http://members.optushome.com.au/droo...plate/galleryL
istedCaptioned.html>
>
You are right about the meaning and I did feel the way you did
when comparing various layouts (divs floated, compared with
inline listed thumbs). JL thought that on balance, the divs would
likely have less trouble across browsers. He may even have
muttered stuff about the list which I have incorporated.
>
--
dorayme
Alright, there seems to be some debate, so I tried pretty much
everything that was said here, and variations, and can't find anythign
that doesn't break in IE, or when expanded in FF.

I re-uploaded the page if you can take a look.

Looks the same to me from the last time I uploaded it. How did
you get my password?

--
dorayme

.....

http://phazm.net/csstest/index2.html

I re-uploaded MY page. Sorry for the... confusion.

Oct 29 '06 #17

P: n/a
On 2006-10-29, Beauregard T. Shagnasty <a.*********@example.invalidwrote:
Ben C wrote:
>On 2006-10-28, FuzzyLogik <ta****@gmail.comwrote:
>>>
Beauregard T. Shagnasty wrote:
.thumbs li {display: inline; text-align: center; }

The li was floating, which means setting display: inline on it does
nothing. And text-align is set on the block box, not on the inline boxes
anyway.

I didn't see any floats in the css, only this:

.thumbs ul {
list-style-type:none;
}

I added my .thumbs li (.. to his page, and it did what he was asking...
You are absolutely right, it wasn't floating. I suggested the OP float
those things, and that confused me.
>>>and place a <brbetween the image and the caption in the HTML.

But it's basically the right idea.
>>Can you think of a way to not use br (or any additional tags, for that
matter)

You can easily avoid the <brby making img display: block.

I think the <bris more semantically correct...
You may be right. But from another point of view, it pollutes the HTML
with tags that are only there for the purposes of layout.
>In this case, make the li also text-align: center.

That's what I said above. <g>
I know. But in your case the li was display: inline; it's still true
that text-align applies to block-level elements.
Oct 29 '06 #18

P: n/a
On 2006-10-29, dorayme <do************@optusnet.com.auwrote:
[snip]
<http://members.optushome.com.au/droo...plate/galleryF
loatPara.html>

Yours are in a series of <div>s. Perhaps that has less of a semantic
meaning than as a list?

In that case, B, I have stuffed up! I meant to show the list
example I had...

<http://members.optushome.com.au/droo...plate/galleryL
istedCaptioned.html>

You are right about the meaning and I did feel the way you did
when comparing various layouts (divs floated, compared with
inline listed thumbs).
Your ListedCaptioned example still floats the <li>s, though, and you
have <liset to both float: left and display: inline.

Floats with display: inline set on them have a "computed" value for
display of block. This is explained in 9.7 of the spec. So the list
items aren't really inline (they're floating blocks), and you can delete
the display: inline on your page without altering the layout.

Obviously you do want floats on that page so you can do the captions.

CSS makes no distinction between li and div, it only cares what
selectors apply to them. Once you set list-style-type to none, a li is
already mostly like a div. Anything different it's getting from the
default stylesheet can be overridden.

As you say it's nice to use <lifor the semantic meaning rather than
just more divs.
JL thought that on balance, the divs would likely have less trouble
across browsers.
This may well be true though.
Oct 29 '06 #19

P: n/a
On 2006-10-29, FuzzyLogik <ta****@gmail.comwrote:
[snip]
<http://phazm.net/csstest/index2.html>
[snip]
Alright, there seems to be some debate, so I tried pretty much
everything that was said here, and variations, and can't find anythign
that doesn't break in IE, or when expanded in FF.

I re-uploaded the page if you can take a look.
1. Make #wrap position: relative, so it's the containing block for
#content, which we're about to make absolutely positioned. Might as
well get rid of unnecessary "width: 100%" on #wrap.
2. Make #content position: absolute, and not floated. Add "left: 160px;
right: 0px;" to the #content selector. This way it will stretch to
fit the available space and won't jump down.
3. Add "text-align: center" to thumbs .li.
Oct 29 '06 #20

P: n/a
On 2006-10-29, Ben C <sp******@spam.eggswrote:
On 2006-10-29, dorayme <do************@optusnet.com.auwrote:
[snip]
>You are right about the meaning and I did feel the way you did
when comparing various layouts (divs floated, compared with
inline listed thumbs).

Your ListedCaptioned example still floats the <li>s, though, and you
have <liset to both float: left and display: inline.

Floats with display: inline set on them have a "computed" value for
display of block. This is explained in 9.7 of the spec. So the list
items aren't really inline (they're floating blocks), and you can delete
the display: inline on your page without altering the layout.

Obviously you do want floats on that page so you can do the captions.

CSS makes no distinction between li and div, it only cares what
selectors apply to them. Once you set list-style-type to none, a li is
already mostly like a div. Anything different it's getting from the
default stylesheet can be overridden.

As you say it's nice to use <lifor the semantic meaning rather than
just more divs.
I've just been looking at FuzzyLogic's page again.

Now I understand why everyone uses

display: inline;
float: left;

It's because they *don't* set list-style-type: none. So display: inline
changes li from display: list-item, and gets rid of the bullets.

I wouldn't be surprised if some browsers don't properly support
list-style-type: none, so there's probably a good reason for prefering
to change display.

I still think the equivalent

display: block;
float: left;

would be clearer.
Oct 29 '06 #21

P: n/a

Ben C wrote:
On 2006-10-29, FuzzyLogik <ta****@gmail.comwrote:
[snip]
<http://phazm.net/csstest/index2.html>
[snip]
Alright, there seems to be some debate, so I tried pretty much
everything that was said here, and variations, and can't find anythign
that doesn't break in IE, or when expanded in FF.

I re-uploaded the page if you can take a look.

1. Make #wrap position: relative, so it's the containing block for
#content, which we're about to make absolutely positioned. Might as
well get rid of unnecessary "width: 100%" on #wrap.
2. Make #content position: absolute, and not floated. Add "left: 160px;
right: 0px;" to the #content selector. This way it will stretch to
fit the available space and won't jump down.
3. Add "text-align: center" to thumbs .li.
Well, that made it better in FF, but still not correct.
The text isn't aligned to the center of the thumbnail, it's aligning to
the 200px li,
And now, in IE, it doesn't display ANYTHING below the header (so
anything in #content)

Oct 29 '06 #22

P: n/a
On 2006-10-29, FuzzyLogik <ta****@gmail.comwrote:
>
Ben C wrote:
>On 2006-10-29, FuzzyLogik <ta****@gmail.comwrote:
[snip]
<http://phazm.net/csstest/index2.html>
[snip]
Alright, there seems to be some debate, so I tried pretty much
everything that was said here, and variations, and can't find anythign
that doesn't break in IE, or when expanded in FF.

I re-uploaded the page if you can take a look.

1. Make #wrap position: relative, so it's the containing block for
#content, which we're about to make absolutely positioned. Might as
well get rid of unnecessary "width: 100%" on #wrap.
2. Make #content position: absolute, and not floated. Add "left: 160px;
right: 0px;" to the #content selector. This way it will stretch to
fit the available space and won't jump down.
3. Add "text-align: center" to thumbs .li.

Well, that made it better in FF, but still not correct.
The text isn't aligned to the center of the thumbnail, it's aligning to
the 200px li,
Centre the images in the <li>s as well by adding "margin: 0 auto" to
..thumbs img.
And now, in IE, it doesn't display ANYTHING below the header (so
anything in #content)
Can't help you there. Only advice I can give is check you've got IE in
strict mode. You've got an XHTML doctype there, not sure what IE does
with that.
Oct 29 '06 #23

P: n/a

Ben C wrote:
On 2006-10-29, FuzzyLogik <ta****@gmail.comwrote:

Ben C wrote:
On 2006-10-29, FuzzyLogik <ta****@gmail.comwrote:
[snip]
<http://phazm.net/csstest/index2.html>
[snip]
Alright, there seems to be some debate, so I tried pretty much
everything that was said here, and variations, and can't find anythign
that doesn't break in IE, or when expanded in FF.

I re-uploaded the page if you can take a look.

1. Make #wrap position: relative, so it's the containing block for
#content, which we're about to make absolutely positioned. Might as
well get rid of unnecessary "width: 100%" on #wrap.
2. Make #content position: absolute, and not floated. Add "left: 160px;
right: 0px;" to the #content selector. This way it will stretch to
fit the available space and won't jump down.
3. Add "text-align: center" to thumbs .li.
Well, that made it better in FF, but still not correct.
The text isn't aligned to the center of the thumbnail, it's aligning to
the 200px li,

Centre the images in the <li>s as well by adding "margin: 0 auto" to
.thumbs img.
And now, in IE, it doesn't display ANYTHING below the header (so
anything in #content)

Can't help you there. Only advice I can give is check you've got IE in
strict mode. You've got an XHTML doctype there, not sure what IE does
with that.
Thank you so much for your help :)

I'll look into why it's not workign in IE.

Oct 29 '06 #24

P: n/a
In article
<11**********************@e3g2000cwe.googlegroups. com>,
"FuzzyLogik" <ta****@gmail.comwrote:
Can't help you there. Only advice I can give is check you've got IE in
strict mode. You've got an XHTML doctype there, not sure what IE does
with that.

Thank you so much for your help :)

I'll look into why it's not workign in IE.
In the examples I posted before, in the css, I fiddled about
making provisions for IE. There is even stuff to help Mac IE
along! They are an experimental test bed for me... I just point
out that you may need to give IE special instructions (not
necessarily mine) and you can see one way to "talk" to those
browsers at the links I gave...

--
dorayme
Oct 29 '06 #25

P: n/a

dorayme wrote:
In article
<11**********************@e3g2000cwe.googlegroups. com>,
"FuzzyLogik" <ta****@gmail.comwrote:
Can't help you there. Only advice I can give is check you've got IE in
strict mode. You've got an XHTML doctype there, not sure what IE does
with that.
Thank you so much for your help :)

I'll look into why it's not workign in IE.

In the examples I posted before, in the css, I fiddled about
making provisions for IE. There is even stuff to help Mac IE
along! They are an experimental test bed for me... I just point
out that you may need to give IE special instructions (not
necessarily mine) and you can see one way to "talk" to those
browsers at the links I gave...

--
dorayme
the
http://members.optushome.com.au/droo...Captioned.html
link?

I don't see anything in there that will help me really,

can you point them out for me?

Oct 29 '06 #26

P: n/a
On 2006-10-28, FuzzyLogik wrote:
http://phazm.net/csstest/index2.html

I'm trying to make the thumbnails fit to the width of the page, so
there are 3-4 in each row, but when you resize, I want it to basically
flow with the page, and I'm having a bit of a hard time figuring that
out.

I want the code to remain logical:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

and so on.

Anyone have any ideas?
img {
display: block;
}

li {
float: left;
list-style-type: none;
text-align: center;
height: 10em; /* Adjust to taste */
}

The containers must all be the same height for it to work. See
<http://cfaj.freeshell.org/testing/alpha.html>.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Oct 29 '06 #27

P: n/a
In article
<11**********************@e64g2000cwd.googlegroups .com>,
"FuzzyLogik" <ta****@gmail.comwrote:

the
http://members.optushome.com.au/droo...ListedCaptione
d.html
link?

I don't see anything in there that will help me really,

can you point them out for me?
I just meant that if you are having trouble in Win IE 6 say, you
can give different instructions to that browser via css as in the
baootom of that css sheet of mine. There is a height there that
cures some problem I was having. Sorry, at the moment, I am not
with Windows machine on so I don't see what your site looks like
in it. looks ok on my Mac browsers.

There was a thread on rounded corners just recently here and/or
alt.html. Some good links there. Check them out. "Rounded corners"

--
dorayme
Oct 30 '06 #28

This discussion thread is closed

Replies have been disabled for this discussion.