Cascade effect using ul for image gallery

andrew

unread,

Jul 1, 2008, 2:45:37 AM7/1/08

to

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

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

Ben C

unread,

Jul 1, 2008, 3:27:02 AM7/1/08

to

On 2008-07-01, andrew <and...@ilium.invalid> wrote:
> 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.

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.

andrew

unread,

Jul 1, 2008, 4:19:48 AM7/1/08

to

On 2008-07-01, Ben C <spam...@spam.eggs> wrote:
> On 2008-07-01, andrew <and...@ilium.invalid> wrote:

>> 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.
>
> 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.

[...]

> 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.