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.

[Spartanicus]

un*******@yahoo .com (Filippo Giarratano) wrote:

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.

The proper way to do this is to use the css 2.1 value "inline-block" for
the "display" property. (only supported by recent Operas afaik)

Have you considered dropping the caption and using the title attribute?

--
Spartanicus

[Spartanicus]

un*******@yahoo .com (Filippo Giarratano) wrote:

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.

What happens in IE is that it uses your specified width, this is not
standard compliant behaviour, as width should be ignored for inline
elements. A standard compliant UA will ignore the set width.

--
Spartanicus

[brucie]

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
consistently 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/

--
brucie - i usenet nude

[Lauri Raittila]

In article Filippo Giarratano wrote:

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 have thought that long too. It's been possible since Opera 5+, in
Opera, and IE god knows how long, using the bug.
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).
The caption is the problem, there is no problem at all witout 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.

Unfortunately only enaugh standards compliant browser is Opera 5+

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

[Andrew Thompson]

"Lauri Raittila" ...
....

http://www.student.oulu.fi/~laurirai/www/css/gallery/ It will use float:left for mozilla.
You do not specifically mention tests in Moz.
but that is the effect in Moz 1.3 (left aligned)
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.

Works fine in IE6 on XP (centred) as well.

Both browsers will put as many images
on the line as can fit before going to the
next line of images.

HTH

--
Andrew Thompson
* http://www.PhySci.org/ Open-source software suite
* http://www.PhySci.org/codes/ Web & IT Help
* http://www.1point1C.org/ Science & Technology

[Lauri Raittila]

In article Andrew Thompson wrote:

"Lauri Raittila" ...
...

http://www.student.oulu.fi/~laurirai/www/css/gallery/

It will use float:left for mozilla.

You do not specifically mention tests in Moz.
but that is the effect in Moz 1.3 (left aligned)

Should have said gecko, but I never remeber how to spell it...

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.

Works fine in IE6 on XP (centred) as well.

Thanks

Anyone on Safari/Konqueror ? MacIE? I didn't remember what MacIE does
with display:inline and width, so I assumed it was same as win, which
might be problmem...

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

[Filippo Giarratano]

> The proper way to do this is to use the css 2.1 value "inline-block" for

the "display" property. (only supported by recent Operas afaik)

Precisely: I want inline blocks! But I want them in CSS that today's
browsers support. The fact that CSS 2.1 supports them suggests that
others have also struggled with this. Has anyone succeeded in
implementing inline block behavior?

[Brian]

brucie wrote:

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

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

! I'm impressed.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

[Traveller ®]

snip....

consistently 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/

Nice piece of work!


de groeten,

martin

http://home.planet.nl/~usa
http://www.route51.com