By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,057 Members | 1,346 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,057 IT Pros & Developers. It's quick & easy.

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

P: n/a
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.
Jul 20 '05 #1
Share this Question
Share on Google+
14 Replies


P: n/a
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
Jul 20 '05 #2

P: n/a
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
Jul 20 '05 #3

P: n/a
in post: <news:d8**************************@posting.google. 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
Jul 20 '05 #4

P: n/a
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.

Jul 20 '05 #5

P: n/a
"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
Jul 20 '05 #6

P: n/a
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.

Jul 20 '05 #7

P: n/a
> 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?
Jul 20 '05 #8

P: n/a
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/

Jul 20 '05 #9

P: n/a
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
Jul 20 '05 #10

P: n/a
brucie schrieb:
in post: <news:d8**************************@posting.google. 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/


Clap clap clap clap! Neat demonstration.

--
Nicolai Zwar

Jul 20 '05 #11

P: n/a
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"?
Jul 20 '05 #12

P: n/a
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.

Jul 20 '05 #13

P: n/a
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! =-----
Jul 20 '05 #14

P: n/a
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.

Jul 20 '05 #15

This discussion thread is closed

Replies have been disabled for this discussion.