Centering a page of thumbnails

Discussion in 'HTML' started by =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=, Apr 4, 2004.

  1. 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
    =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=, Apr 4, 2004
    #1
    1. Advertising

  2. =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=

    Els Guest

    François de Dardel wrote:
    > 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

    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Apr 4, 2004
    #2
    1. Advertising

  3. =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=

    Spartanicus Guest

    Els <> wrote:

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

    --
    Spartanicus
    Spartanicus, Apr 4, 2004
    #3
  4. =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=

    Els Guest

    Spartanicus wrote:

    > Els wrote:
    >
    >>2 celled tables

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


    Too bad ;-)

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


    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?)

    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Apr 4, 2004
    #4
  5. =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=

    Spartanicus Guest

    Els <> wrote:

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

    --
    Spartanicus
    Spartanicus, Apr 4, 2004
    #5
  6. http://mapage.noos.fr/dardelf3/tintin/page3bits.html
    On 2004-04-04 17:47:47 +0200, Spartanicus <> said:
    >> http://locusmeus.com/test/thumbswithcaptionscentered.html
    >> The 'trick' is to not float them, but use display:inline,

    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
    =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=, Apr 4, 2004
    #6
  7. =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=

    Els Guest

    François de Dardel wrote:

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

    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Apr 4, 2004
    #7
  8. =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=

    Spartanicus Guest

    François de Dardel <> wrote:

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

    --
    Spartanicus
    Spartanicus, Apr 4, 2004
    #8
  9. On 2004-04-04 18:36:41 +0200, Els <> said:

    >> http://mapage.noos.fr/dardelf3/tintin/page3bits.html
    >> 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.


    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?=, Apr 4, 2004
    #9
  10. On 2004-04-04 18:51:22 +0200, Spartanicus <> said:

    > François de Dardel <> wrote:
    >
    >> 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.
    > 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
    =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=, Apr 4, 2004
    #10
  11. François de Dardel wrote:

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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Apr 4, 2004
    #11
  12. =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=

    Marc Nadeau Guest

    François de Dardel a schtroumphé:

    > On 2004-04-04 18:51:22 +0200, Spartanicus <>
    > said:
    >
    >> François de Dardel <> wrote:
    >>
    >>> 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.
    >>

    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
    >


    Does not work with konqueror neither.

    --
    mv sco /dev/null
    Marc Nadeau # La Pagerie /* http://www.pagerie.com */
    Marc Nadeau, Apr 6, 2004
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Richard

    Re: Centering image on page?

    Richard, Jun 25, 2003, in forum: HTML
    Replies:
    0
    Views:
    3,730
    Richard
    Jun 25, 2003
  2. Jerry Muelver

    Re: Centering image on page?

    Jerry Muelver, Jun 25, 2003, in forum: HTML
    Replies:
    0
    Views:
    822
    Jerry Muelver
    Jun 25, 2003
  3. Noozer
    Replies:
    13
    Views:
    5,495
    SpaceGirl
    Mar 15, 2005
  4. Ben Gribaudo
    Replies:
    1
    Views:
    91
    Eugen Minciu
    Jul 27, 2007
  5. Bruno Barberi Gnecco

    Generating thumbnails of a page

    Bruno Barberi Gnecco, Sep 17, 2005, in forum: Javascript
    Replies:
    4
    Views:
    89
    Bruno Barberi Gnecco
    Sep 19, 2005
Loading...

Share This Page