Cascade effect using ul for image gallery

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

andrew - 01 Jul 2008 07:45 GMT

Hi,

I have a _very_ rough copy of a small image gallery that I am working on
at this address:

http://www.andrews-corner.org/temp/screenshots.html

There is an odd cascading effect that has me completely baffled. The
images are supposed to adjust to the width of the page but they line up
neatly 3, 2, 1 and aligned right.

There will be about 12 images on this page and eventually it will be a
little more polished :-).

Andrew

Signature

Do you think that's air you're breathing now?

Reply to this Message

Ben C - 01 Jul 2008 08:27 GMT

> Hi,
>
[quoted text clipped - 6 lines]
> images are supposed to adjust to the width of the page but they line up
> neatly 3, 2, 1 and aligned right.

It's because your floats are slightly different heights. A left float
tries to go left, but doesn't make it all the way if it "snags" on a
left float that's already there. Like sideways Tetris.

$ identify *.png

article_reading_thumbnail.png PNG 200x138 200x138+0+0 DirectClass 21kb
article_selection_thumbnail.png[1] PNG 200x138 200x138+0+0 DirectClass
32kb
newsgroup_selection_thumbnail.png[3] PNG 200x141 200x141+0+0 DirectClass
15kb
scoring_thumbnail.png[4] PNG 200x141 200x141+0+0 DirectClass 25kb
thread_tree_thumbnail.png[6] PNG 200x138 200x138+0+0 DirectClass 23kb
utf_support_thumbnail.png[7] PNG 200x138 200x138+0+0 DirectClass 19kb

Make them all 200x138 (or all the same at any rate) and you should be
OK.

It's because newsgroup_selection and scoring are both the big ones that
you end up with that upside-down staircase.

To be safe you could set height: 1.2em explicitly on the <p>s underneath
them. Or set a height on the whole li but that's rather more drastic.

Reply to this Message

andrew - 01 Jul 2008 09:19 GMT

>> I have a _very_ rough copy of a small image gallery that I am working on
>> at this address:
[quoted text clipped - 8 lines]
> tries to go left, but doesn't make it all the way if it "snags" on a
> left float that's already there. Like sideways Tetris.

[...]

> Make them all 200x138 (or all the same at any rate) and you should be
> OK.

Thanks for that! I will be remaking all these thumbs anyway, but a quick
resize certainly demonstrates that this is the answer.

> To be safe you could set height: 1.2em explicitly on the <p>s underneath
> them. Or set a height on the whole li but that's rather more drastic.

The version online at the moment has set <li> size which works well
enough but a resize of the thumbs will be on the way tomorrow.

Good to see a fellow slrn user! The site I am tinkering away with will
replace slrn.sourceforge.org in about 2 weeks, a fair bit of work to go
yet though.

Andrew

Signature

Do you think that's air you're breathing now?

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008

Cascade effect using ul for image gallery