Centering Thumbnail Galleries with CSS: Floats, Inline, Lists, ???

[Filippo Giarratano]

Hi -- I'm trying to figure out how to make a photo thumbnail gallery
page using CSS and no tables that (1) has a caption below each image
and (2) is centered -- so that as browser width changes the images
consistently reconstitute themselves as centered rows with the maximum
number of images on each row.

I've made a test page at http://www.americanstate.org/test/gal01/ that
illustrates what I'm aiming for and how close I've gotten. I've found
two nearly successful strategies: Use the float property (you can use
captions, but everything's edge-aligned, not center-aligned) or use
CSS-tweaked lists (you can center-align, but you can't have captions).

I actually succeeded in producing a CSS-defined thumbnail gallery page
with centered, captioned images, using the display:inline property --
but it only works in Internet Explorer 5.0 for Windows. That suggests
that what I'm aiming for is possible . . . but I want it to work in
standards-compliant browsers, too.

Would folks go take a look at my test page and see if they can solve
the problem? Thanks! I'll write up any success there and keep it in
circulation.

[Nicolai P. Zwar]

brucie schrieb:

in post: <news:d8******* *************** ****@posting.go ogle.com>
un*******@yahoo .com (Filippo Giarratano) said:

Hi -- I'm trying to figure out how to make a photo thumbnail gallery
page using CSS and no tables that (1) has a caption below each image
and (2) is centered -- so that as browser width changes the images
consistentl y reconstitute themselves as centered rows with the maximum
number of images on each row.

why not do something creative instead of the same old boring row/column
thumb layouts?

e.g: http://balls.bruciesusenetshit.info/

Clap clap clap clap! Neat demonstration.

--
Nicolai Zwar

[Filippo Giarratano]

Lauri Raittila <la***@raittila .cjb.net> wrote in message news:<MP******* *************** **@news.cis.dfn .de>...

I have thought that long too. It's been possible since Opera 5+, in
Opera, and IE god knows how long, using the bug.
.. . .
Quick and dirty hack:
http://www.student.oulu.fi/~laurirai/www/css/gallery/

This will look OK in WinIE5.5 and Opera 7.5.

It will use float:left for mozilla.

Tested with Opera 7.5p1, IE5.5, Firebird 0.7. Please tell if you test on
other browers. I hope it doesn't break anything.

Lauri: It centers in my Opera 7.11 and IE 5.0 and floats left in
Mozilla 1.6 (all Windows), just as you intended. Good job!

Do we agree that this is the best that can be achieved until more
browsers support "inline-block"?

[Lauri Raittila]

In article Filippo Giarratano wrote:

Lauri Raittila <la***@raittila .cjb.net> wrote:

I have thought that long too. It's been possible since Opera 5+, in
Opera, and IE god knows how long, using the bug.
. . .

Quick and dirty hack:
http://www.student.oulu.fi/~laurirai/www/css/gallery/

This will look OK in WinIE5.5 and Opera 7.5.

It will use float:left for mozilla.

Seem to have strange effect on Opera 6, sometimes last line is not
wrapped.
Lauri: It centers in my Opera 7.11 and IE 5.0 and floats left in
Mozilla 1.6 (all Windows), just as you intended. Good job!

Do we agree that this is the best that can be achieved until more
browsers support "inline-block"?

I don't untill it is tested on KHTML and MacIE.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Matt]

Lauri Raittila wrote:

In article Filippo Giarratano wrote:

Lauri Raittila <la***@raittila .cjb.net> wrote:

> I have thought that long too. It's been possible since Opera 5+, in
> Opera, and IE god knows how long, using the bug.

. . .

> Quick and dirty hack:
> http://www.student.oulu.fi/~laurirai/www/css/gallery/
>
> This will look OK in WinIE5.5 and Opera 7.5.
>
> It will use float:left for mozilla.

Seem to have strange effect on Opera 6, sometimes last line is not
wrapped.

Lauri: It centers in my Opera 7.11 and IE 5.0 and floats left in
Mozilla 1.6 (all Windows), just as you intended. Good job!

Do we agree that this is the best that can be achieved until more
browsers support "inline-block"?

I don't untill it is tested on KHTML and MacIE.

Konqueror 3.1.4: the individual images are centred, but the whole table
isn't (it's on the left). Opera 7.23 (linux) has the images and the table
centred. In both cases, there's a gap between the image and the caption,
but not between the caption and the image below - this should be the other
way around, yes?

<http://hex.zapto.org/temp/2004/feb/konqueror.jpg>
<http://hex.zapto.org/temp/2004/feb/opera.jpg>

--
Matt

-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----

[Lauri Raittila]

In article Matt wrote:

Lauri Raittila wrote:

In article Filippo Giarratano wrote:

Lauri Raittila <la***@raittila .cjb.net> wrote:

> I have thought that long too. It's been possible since Opera 5+, in
> Opera, and IE god knows how long, using the bug.

. . .

> Quick and dirty hack:
> http://www.student.oulu.fi/~laurirai/www/css/gallery/

Konqueror 3.1.4: the individual images are centred, but the whole table
isn't (it's on the left).
There is no table.
Opera 7.23 (linux) has the images and the table
centred. In both cases, there's a gap between the image and the caption,
but not between the caption and the image below - this should be the other
way around, yes?
The styling is very minimal, to not confuse browsers before testing
concept. (as you can see it's not real case, links aren't real.)
<http://hex.zapto.org/temp/2004/feb/konqueror.jpg>
Seems to act like Mozilla. Thanks.
<http://hex.zapto.org/temp/2004/feb/opera.jpg>

Same as on win. Maybe I remember to test with MacIE tomorrow. (speeded
past computer room with macs today, but didn't remember to pop in)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.