Google Groups Home
Help | Sign in
Cascade effect using ul for image gallery
There are currently too many topics in this group that display first. To make this topic appear first, remove this option from another topic.
There was an error processing your request. Please try again.
flag
  3 messages - Collapse all
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
andrew  
View profile
 More options Jul 1, 2:45 am
Newsgroups: comp.infosystems.www.authoring.stylesheets
From: andrew <and...@ilium.invalid>
Date: Tue, 01 Jul 2008 16:45:37 +1000
Local: Tues, Jul 1 2008 2:45 am
Subject: 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?


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Ben C  
View profile
 More options Jul 1, 3:27 am
Newsgroups: comp.infosystems.www.authoring.stylesheets
From: Ben C <spams...@spam.eggs>
Date: Tue, 01 Jul 2008 02:27:02 -0500
Local: Tues, Jul 1 2008 3:27 am
Subject: Re: Cascade effect using ul for image gallery
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.


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
andrew  
View profile
 More options Jul 1, 4:19 am
Newsgroups: comp.infosystems.www.authoring.stylesheets
From: andrew <and...@ilium.invalid>
Date: Tue, 01 Jul 2008 18:19:48 +1000
Local: Tues, Jul 1 2008 4:19 am
Subject: Re: Cascade effect using ul for image gallery
On 2008-07-01, Ben C <spams...@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.

   Andrew

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


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
End of messages
« Back to Discussions « Newer topic     Older topic »

Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2008 Google