473,320 Members | 1,829 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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

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
14 3392
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
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
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
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
"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
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
> 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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Franois de Dardel | last post by:
http://mapage.noos.fr/dardelf3/tintin/page3bits.html Can I center the series of thumbnails horizontally in the pages _and_ keep the "elastic arrangement" where the number of thumbnails adapts to...
10
by: Saravanan Raju | last post by:
I am trying to vertically align the CSS tabs so that it is centered, like what it appears on apple.com. You can find my web-page here (http://cse.unl.edu/~sraju/index-tabs.htm). It is now aligned...
6
by: Abs | last post by:
Hi! I'm trying to center horizontally the thumbnails at the top of the following page: http://project.fotografist.com/photos.php?p_idgal=1 Like the image at the center. I've tried...
5
by: david hepworth | last post by:
I am in the process of creating a CSS tab style thing for my webpage. I have everything as i wish except that i cannot center the damn thing in the page. I am hoping someone out there can help. I...
3
by: John Pote | last post by:
1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...
8
by: barb | last post by:
So that the world at large benefits from our efforts, here is one fully documented way to use Windows Irfanview freeware to create thumbnail web galleries (http://www.irfanview.com). STEP 1:...
5
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...
4
by: lister | last post by:
I am trying to center a DIV horizonally, but I want the DIV fluid so that it is just wide enough to encompass its contents. I've tried margin:auto with no joy :( I've set up a demo here:...
13
by: Casimir Pohjanraito | last post by:
I have a list of links, with a thumbnail image hidden(resized) next to the link. Complete html&css at end of this post. CSS for the link resizes the image on a:hover. All is good, except the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.