Centering horizontal 'button' menu

Discussion in 'HTML' started by Sentient Fluid, Jan 2, 2005.

  1. I'm having trouble getting the menu below to centre horizonatally. I've
    tried putting it into a container div and using text-align:center; I've
    tried margin:auto and margin-left:auto & margin-right:auto; I've even
    tried the deprecated <center> tag. None of it works.

    I'm assuming it either has to do with the display:block (which I need to
    keep the 'button look') or with the float:left.

    Of course I could be wrong, too. :)

    So what am I missing? Here's the link:

    http://www.geocities.com/sentientfluid/test2.html

    ~Senti
     
    Sentient Fluid, Jan 2, 2005
    #1
    1. Advertising

  2. Sentient Fluid

    Richard Guest

    Sentient Fluid wrote:

    > I'm having trouble getting the menu below to centre horizonatally. I've
    > tried putting it into a container div and using text-align:center; I've
    > tried margin:auto and margin-left:auto & margin-right:auto; I've even
    > tried the deprecated <center> tag. None of it works.


    > I'm assuming it either has to do with the display:block (which I need to
    > keep the 'button look') or with the float:left.


    > Of course I could be wrong, too. :)


    > So what am I missing? Here's the link:


    > http://www.geocities.com/sentientfluid/test2.html


    > ~Senti


    Padding and margin would hep center the link division setup.
    text-align is just that. For text, not the division.
    Also, I'd avoid using "center" as a class name.
    icenter would be better.
    just so that the script doesn't get confused as to which is which.
     
    Richard, Jan 2, 2005
    #2
    1. Advertising

  3. Sentient Fluid

    Spartanicus Guest

    Sentient Fluid <> wrote:

    >I'm having trouble getting the menu below to centre horizonatally. I've
    >tried putting it into a container div and using text-align:center; I've
    >tried margin:auto and margin-left:auto & margin-right:auto; I've even
    >tried the deprecated <center> tag. None of it works.
    >
    >I'm assuming it either has to do with the display:block (which I need to
    >keep the 'button look') or with the float:left.


    Set a width, remove the float property.

    --
    Spartanicus
     
    Spartanicus, Jan 2, 2005
    #3
  4. Sentient Fluid

    Steve Pugh Guest

    "Richard" <Anonymous@127.001> wrote:

    > Sentient Fluid wrote:
    >
    >> I'm having trouble getting the menu below to centre horizonatally. I've
    >> tried putting it into a container div and using text-align:center; I've
    >> tried margin:auto and margin-left:auto & margin-right:auto; I've even
    >> tried the deprecated <center> tag. None of it works.

    >
    >> I'm assuming it either has to do with the display:block (which I need to
    >> keep the 'button look') or with the float:left.


    It's with the float: left;
    Floated elements will float to the specified side.

    >> Of course I could be wrong, too. :)

    >
    >> So what am I missing? Here's the link:

    >
    >> http://www.geocities.com/sentientfluid/test2.html


    You've given each link a fixed width. This is a bad idea in general
    (increase the font size in your browser and watch things fall apart)
    but this does mean that you can center the links:
    ..center {width: 744px; margin-left: auto; margin-right: auto; }

    But as we don't want the width to be in pixels we can change
    everything to use em instead. Say width: 7.5em (and height: 1.5em;)
    for the links and width: 50em; for the division).

    It's not a perfect solution but with the poor support for CSS tables
    and the inline-block/table display values it may be one of the least
    worst ones.

    Meanwhile in fantasy land, Richard was blathering....

    >Padding and margin would hep center the link division setup.


    Yes, but it's not that simple.

    >text-align is just that. For text, not the division.


    The links are text. Even if the text-align:center; was removed from
    the a.topmenu style the text-align: center; on the div would still
    center the text in the links themselves. But the links are also
    floated so the boxes will still be at the left.

    >Also, I'd avoid using "center" as a class name.


    So would I. But for different reasons.

    >icenter would be better.


    No it wouldn't.
    Something like navbar would be a sensible class name for a navigation
    bar.

    >just so that the script doesn't get confused as to which is which.


    1. There is no script on that page.
    2. A script that gets confused between a classname and something else
    (the center element? The value center that the align attribute can
    take? The value center that some CSS properties can take?) is a badly
    written script. But I admit that you probably have a lot more
    experience with writing scripts badly than I do.

    Steve
     
    Steve Pugh, Jan 2, 2005
    #4
  5. Steve Pugh wrote:
    > "Richard" <Anonymous@127.001> wrote:
    >
    >
    >>Sentient Fluid wrote:
    >>
    >>
    >>>I'm having trouble getting the menu below to centre horizonatally. I've
    >>>tried putting it into a container div and using text-align:center; I've
    >>>tried margin:auto and margin-left:auto & margin-right:auto; I've even
    >>>tried the deprecated <center> tag. None of it works.

    >>
    >>>I'm assuming it either has to do with the display:block (which I need to
    >>>keep the 'button look') or with the float:left.

    >
    >
    > It's with the float: left;
    > Floated elements will float to the specified side.
    >
    >
    >>>http://www.geocities.com/sentientfluid/test2.html

    >
    >
    > You've given each link a fixed width. This is a bad idea in general
    > (increase the font size in your browser and watch things fall apart)
    > but this does mean that you can center the links:
    > .center {width: 744px; margin-left: auto; margin-right: auto; }
    >
    > But as we don't want the width to be in pixels we can change
    > everything to use em instead. Say width: 7.5em (and height: 1.5em;)
    > for the links and width: 50em; for the division).
    >
    > It's not a perfect solution but with the poor support for CSS tables
    > and the inline-block/table display values it may be one of the least
    > worst ones.
    >
    > Something like navbar would be a sensible class name for a navigation
    > bar.


    Thanks for the help, Steve. I've changed the fixed widths to variable
    widths. When I was trying to get things centered before I posted, I
    totally forgot to set the width when using margin-left:auto and
    margin-right:auto. Also, the .center was named just for the quick
    example. Normally I would use something else.

    Problem is it doesn't work in IE. At least not 6.0. It does, however,
    work in Firefox. I still need to install some other browsers to test it
    in, though...

    One thing I noticed after making the changes, though. In Firefox, the
    buttons no longer wrap to the next line if the viewport is smaller than
    the width of the nav bar. Is there a way I can get that back and still
    maintain the centering?

    You mentioned above that it's not a perfect solution. How would you do
    what I'm bumbling around at? :)

    As for Richard, I tend to ignore his "help". I'm familiar enough with
    Usenet to have seen how destructive following his advice can be.

    ~Senti
     
    Sentient Fluid, Jan 2, 2005
    #5
  6. Sentient Fluid

    Steve Pugh Guest

    Sentient Fluid <> wrote:
    >Steve Pugh wrote:
    >>>Sentient Fluid wrote:
    >>>>
    >>>>http://www.geocities.com/sentientfluid/test2.html

    >>
    >> You've given each link a fixed width. This is a bad idea in general
    >> (increase the font size in your browser and watch things fall apart)
    >> but this does mean that you can center the links:
    >> .center {width: 744px; margin-left: auto; margin-right: auto; }
    >>
    >> But as we don't want the width to be in pixels we can change
    >> everything to use em instead. Say width: 7.5em (and height: 1.5em;)
    >> for the links and width: 50em; for the division).
    >>
    >> It's not a perfect solution but with the poor support for CSS tables
    >> and the inline-block/table display values it may be one of the least
    >> worst ones.

    >
    >Thanks for the help, Steve. I've changed the fixed widths to variable
    >widths. When I was trying to get things centered before I posted, I
    >totally forgot to set the width when using margin-left:auto and
    >margin-right:auto.
    >
    >Problem is it doesn't work in IE. At least not 6.0. It does, however,
    >work in Firefox. I still need to install some other browsers to test it
    >in, though...


    It also works in Opera 7.54u1 and can easily be made to work in IE6.

    Your doctype triggers quirks mode in IE6 so it emulates the bugs of
    IE5.x and doesn't support margin: auto; Changing the doctype to one
    that triggers standards mode will fix it in IE6 but not IE5.x.

    >One thing I noticed after making the changes, though. In Firefox, the
    >buttons no longer wrap to the next line if the viewport is smaller than
    >the width of the nav bar. Is there a way I can get that back and still
    >maintain the centering?


    Changing width to max-width in the style for the div does the trick in
    Opera but (a) seems to be buggy in FF - the last link wraps but the
    others don't; (b) isn't supported by IE.

    >You mentioned above that it's not a perfect solution. How would you do
    >what I'm bumbling around at? :)


    For IE (5 and 6) and Opera 7 it's quite easy.

    #navbar { text-align: center; }
    no margin: auto and no width.

    a.menubutton { display: inline-block; }
    no float.

    Centered, wraps, nice.

    But that's not supported by Gecko.

    If this was a personal site I'd use that and let Gecko have a slight
    degradation (I'd add a few more styles to minimise the damage).

    For a commercial site I'd look at how the nav bar integrates with the
    rest of the design, and speak with the designer, and review what the
    project's tech spec has to say about coding standards. Depending on
    all that I might negotiate a change to the design, or go for one of
    the above compromises, or cheat and use a table.

    Steve
     
    Steve Pugh, Jan 2, 2005
    #6
  7. Sentient Fluid

    paul Guest

    Sentient Fluid wrote:

    > I'm having trouble getting the menu below to centre horizonatally. I've
    > tried putting it into a container div and using text-align:center; I've
    > tried margin:auto and margin-left:auto & margin-right:auto; I've even
    > tried the deprecated <center> tag. None of it works.
    >
    > I'm assuming it either has to do with the display:block (which I need to
    > keep the 'button look') or with the float:left.
    >
    > Of course I could be wrong, too. :)
    >
    > So what am I missing? Here's the link:
    >
    > http://www.geocities.com/sentientfluid/test2.html


    It looks like you got it centered now but still not wrapping. I did this
    with an unordered list instead of a div though I don't see why your div
    wouldn't work.
     
    paul, Jan 2, 2005
    #7
    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. itzikkl
    Replies:
    0
    Views:
    5,826
    itzikkl
    Mar 27, 2005
  2. Tomas
    Replies:
    3
    Views:
    806
    Tomas
    Oct 31, 2003
  3. Carolyn Marenger

    centering and padding in horizontal menu

    Carolyn Marenger, Mar 19, 2006, in forum: HTML
    Replies:
    7
    Views:
    871
    Jonathan N. Little
    Mar 20, 2006
  4. Thad
    Replies:
    2
    Views:
    428
  5. Emil
    Replies:
    1
    Views:
    558
    Manuel Ricca
    Dec 11, 2007
Loading...

Share This Page