Connecting Tech Pros Worldwide Help | Site Map

Cascade effect using ul for image gallery

 
LinkBack Thread Tools Search this Thread
  #1  
Old July 1st, 2008, 06:55 AM
andrew
Guest
 
Posts: n/a
Default Cascade effect using ul for image gallery

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?

  #2  
Old July 1st, 2008, 07:35 AM
Ben C
Guest
 
Posts: n/a
Default Re: Cascade effect using ul for image gallery

On 2008-07-01, andrew <andrew@ilium.invalidwrote:
Quote:
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.
  #3  
Old July 1st, 2008, 08:25 AM
andrew
Guest
 
Posts: n/a
Default Re: Cascade effect using ul for image gallery

On 2008-07-01, Ben C <spamspam@spam.eggswrote:
Quote:
On 2008-07-01, andrew <andrew@ilium.invalidwrote:
Quote:
Quote:
>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.
[...]
Quote:
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.
Quote:
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 <lisize 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

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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,989 network members.