Centering a page of thumbnails

[=?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=]

Look at:
http://mapage.noos.fr/dardelf3/tintin/page3bits.html

I managed to have the thumbnails rearrange themselves as a function of
the window width, but I would like the whole set of thumbnails to be
centered horizontally in the window. I couldn't find a method, using
CSS, DIV or tables, that would preserve the "elasticity" of the
thumbnail arrangement. Is it possible at all ?

Many thanks in advance for any suggestion
--
François de Dardel
http:/mapage.noos.fr/dardelf
Faber est suae quisque fortunae
Remove fourteen to reply
Enlever le quatorze

 

[Els]

Look at:
http://mapage.noos.fr/dardelf3/tintin/page3bits.html

I managed to have the thumbnails rearrange themselves as a function of
the window width, but I would like the whole set of thumbnails to be
centered horizontally in the window. I couldn't find a method, using
CSS, DIV or tables, that would preserve the "elasticity" of the
thumbnail arrangement. Is it possible at all ?

I did an example page a while ago, but it uses 2 celled
tables instead of div boxes. However, I think it might work
with div boxes as well.
http://locusmeus.com/test/thumbswithcaptionscentered.html
The 'trick' is to not float them, but use display:inline,
and center them as you would center any other inline
element, by setting text-align:center to the parent element.

hth

 

[Spartanicus]

I did an example page a while ago, but it uses 2 celled
tables

2 row tables (thereby breaking the relationship between the image and
the caption).

http://locusmeus.com/test/thumbswithcaptionscentered.html
The 'trick' is to not float them, but use display:inline,

The correct value to use is "inline-table", alas both Mozilla and IE get
this wrong. Consequently your example fails in Opera (which correctly
supports "inline-table" and ignores "inline").

The code can be hacked to get it to work in all 3.

 

[Els]

2 row tables (thereby breaking the relationship between the image and
the caption).

Too bad ;-)

The correct value to use is "inline-table", alas both Mozilla and IE get
this wrong. Consequently your example fails in Opera (which correctly
supports "inline-table" and ignores "inline").

The code can be hacked to get it to work in all 3.

I suppose so. But it's an old example, and I don't need it.
Also, because of using inline, the width of the tables is
being ignored in Gecko, which makes it look messy in my
example.
But can François use the display:inline with his div boxes?
(and will Opera support that?)

 

[Spartanicus]

But can François use the display:inline with his div boxes?

No, you need the "shrink to fit" property of tables, div's don't
normally behave that way (and IE can't be instructed to do so).

To get it to work in IE, Moz and Opera:

table{display:inline}
table{display:inline-table}

And set text-align:center on the containing element.

But note that the markup is incorrect due to the use of tables.

 

[=?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=]

http://mapage.noos.fr/dardelf3/tintin/page3bits.html

Doesn't work with Safari

The correct value to use is "inline-table", alas both Mozilla and IE get
this wrong. Consequently your example fails in Opera (which correctly
supports "inline-table" and ignores "inline").

The code can be hacked to get it to work in all 3.

Interesting and frustrating:
I am on Macintosh (OS X). MSIE is version 5.2.3 for Mac.
My present version
Safari: self-arranging, but not centered
NS 7: self-arranging, but not centered
MSIE: no (one centered column)
iCab: no (one centered column)

Version with display: inline
Safari: no (one column, nothing aligned)
NS 7: no (one column, nothing aligned)
MSIE: no (one column, nothing aligned)
iCab: no (one centered column)

Version with display: inline-table
Safari: fine (self arranging, table centered, exactly what I want)
NS 7: no (one centered column)
MSIE: no (one centered column)
iCab: no (one centered column)

Shall we conclude that of the 4 browsers, Safari is the only compliant one?

But as this is 3% of the viewers, I will keep my present version,
which, if I remember well, displays with MSIE (PC) the same as with
Safari (self-arranging, but not centered). Unless you have another
"hack" suggestion... but I'd prefer to avoid JavaScript. I will change
for the version with "display: inline-table" when MS produces a
compliant browser, next decade if we are lucky ;-)

Thanks anyway

--
François de Dardel
http:/mapage.noos.fr/dardelf
Faber est suae quisque fortunae
Remove fourteen to reply
Enlever le quatorze

 

[Els]

http://mapage.noos.fr/dardelf3/tintin/page3bits.html

Interesting and frustrating:
I am on Macintosh (OS X). MSIE is version 5.2.3 for Mac.
My present version
Safari: self-arranging, but not centered
NS 7: self-arranging, but not centered
MSIE: no (one centered column)

This I don't understand. What do you mean by 'no'? In my IE
(both 5.01 and 6) the thumbs are self-arranging just like in
NS7.

 

[Spartanicus]

Safari: fine (self arranging, table centered, exactly what I want)
NS 7: no (one centered column)
MSIE: no (one centered column)
iCab: no (one centered column)

Shall we conclude that of the 4 browsers, Safari is the only compliant one?

Probably correct, afaik Safari's css support is pretty good. iCab's css
support is dreadful afaik.

But as this is 3% of the viewers, I will keep my present version,
which, if I remember well, displays with MSIE (PC) the same as with
Safari (self-arranging, but not centered). Unless you have another
"hack" suggestion... but I'd prefer to avoid JavaScript. I will change
for the version with "display: inline-table" when MS produces a
compliant browser, next decade if we are lucky ;-)

http://www.spartanicus.utvinternet.ie/test/image_gallery_with_captions.htm

Should work in most browsers.

 

[=?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=]

This I don't understand. What do you mean by 'no'? In my IE (both 5.01
and 6) the thumbs are self-arranging just like in NS7.

Yes, strange: on the Mac, it's a no (as above) but on the PC it's like
on Safari. There is no MSIE 6 for Mac, AFAIK.

--
François de Dardel
http:/mapage.noos.fr/dardelf
Faber est suae quisque fortunae
Remove fourteen to reply
Enlever le quatorze

 

[=?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=]

Probably correct, afaik Safari's css support is pretty good. iCab's css
support is dreadful afaik.
http://www.spartanicus.utvinternet.ie/test/image_gallery_with_captions.htm

Should work in most browsers.

Most, not all:

Safari: Fine
NS 7: Fine (it's Netscape 7.1 for the Mac)
iCab: no (one centered column)
MSIE: no (one centered column) (it's MSIE 5.2 for Mac)

I'll check again tomorrow on my office PC, and if it works there, I
will change my page.

Many thanks for the help

--
François de Dardel
http:/mapage.noos.fr/dardelf
Faber est suae quisque fortunae
Remove fourteen to reply
Enlever le quatorze

 

[Toby A Inkster]

Yes, strange: on the Mac, it's a no (as above) but on the PC it's like
on Safari.

Not strange at all. There are frequently huge differences between IE/win
and IE/mac. Indeed, they have almost nothing in common except the name.

 

[Marc Nadeau]

François de Dardel a schtroumphé:

Most, not all:

Safari: Fine
NS 7: Fine (it's Netscape 7.1 for the Mac)
iCab: no (one centered column)
MSIE: no (one centered column) (it's MSIE 5.2 for Mac)

I'll check again tomorrow on my office PC, and if it works
there, I will change my page.

Many thanks for the help

Does not work with konqueror neither.