CSS drop down menu - how to centre it?

Discussion in 'HTML' started by John, Oct 24, 2006.

  1. John

    John Guest

    Hi

    I have a dropdown menu. Standard HTML with ul and li.

    The following code works except that the boxes are all left justified and I
    would like them to be centred.
    I've tried auto with margins and various permutations but cannot get the
    boxes to center.
    Any ideas.

    div#navbar {width:100%; margin-left:auto; margin-right:auto;}
    div#navbar ul {list-style:none; padding:0; margin:0;}
    div#navbar li {float:left; margin:0em;}
    div#navbar li a{background: url(background.gif) #fff bottom left repeat-x;
    height:20px; line-height:20px; float:left; width:7em; display:block;
    border: 0.1em solid #DCDCE9;
    color:white; font-size:x-small; text-decoration:none;
    text-align:center;font-family: Verdana, sans-serif;}
    div#navbar li a {float:none} /* IE5-MAC*/
    div#navbar li a:hover {font-weight:bold; color:#5101BC; background:white;}

    Excuse the sloppy coding.

    Regards
    John
     
    John, Oct 24, 2006
    #1
    1. Advertising

  2. John

    Nico Schuyt Guest

    John wrote:
    > I have a dropdown menu. Standard HTML with ul and li.
    >
    > The following code works except that the boxes are all left justified
    > and I would like them to be centred.
    > I've tried auto with margins and various permutations but cannot get
    > the boxes to center.
    > Any ideas.
    >
    > [snip code]


    Post an URL instead of the code. There may be other problems.

    --
    Nico Schuyt
    http://www.nicoschuyt.nl/
     
    Nico Schuyt, Oct 24, 2006
    #2
    1. Advertising

  3. John

    John Guest

    Hi

    That's quick.

    The site which is under development - so may be working one moment but not
    the next!

    www.zampf.com

    Regards
    John


    >
    > Post an URL instead of the code. There may be other problems.
    >
    > --
    > Nico Schuyt
    > http://www.nicoschuyt.nl/
    >
     
    John, Oct 24, 2006
    #3
  4. John

    Ben C Guest

    On 2006-10-24, John <> wrote:
    > Hi
    >
    > I have a dropdown menu. Standard HTML with ul and li.
    >
    > The following code works except that the boxes are all left justified and I
    > would like them to be centred.
    > I've tried auto with margins and various permutations but cannot get the
    > boxes to center.
    > Any ideas.
    >
    > div#navbar {width:100%; margin-left:auto; margin-right:auto;}


    100% means "100% of the container". So no room left for margins, so they
    will be computed as zero.

    width: auto on a normal block box results in something quite similar.

    Is this the div you want centered?

    Then the question is how wide do you want it. If you want it just wide
    enough for the things in it, then you're another person who wants to
    centre something that's shrink-to-fit.

    And if you want that, since display: inline-block is not widely
    supported, you will have to use a table.

    Try

    div#navbar ul
    {
    list-style: none;
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    margin: 0px;
    }

    This should work because display: table is shrink-to-fit. So the browser
    will make the ul wide enough for its content but no wider. Then its
    auto left and right margins will take up any remaining space to the
    edges of its containing block under the condition that they get equal
    values which gets you centering.

    Instead of display: table you can alternatively set a width, but that's
    annoying, because you have to know how wide you want the ul to be. In
    your case you probably do as the <li>s look they have a set width, but
    all the same it's inconvenient.

    > div#navbar ul {list-style:none; padding:0; margin:0;}


    [...]

    > Excuse the sloppy coding.


    I won't mention that you should put units like "px" after the 0s then.
     
    Ben C, Oct 24, 2006
    #4
  5. John

    Ben C Guest

    On 2006-10-24, John <> wrote:
    > Hi
    >
    > That's quick.
    >
    > The site which is under development - so may be working one moment but not
    > the next!
    >
    > www.zampf.com


    That's actually crashing Firefox for me at the moment. Not entirely your
    fault, Firefox isn't ever supposed to crash.
     
    Ben C, Oct 24, 2006
    #5
  6. John

    John Hosking Guest

    Ben C wrote:
    > On 2006-10-24, John <> wrote:
    >
    >>Excuse the sloppy coding.

    >
    > I won't mention that you should put units like "px" after the 0s then.


    If the value is zero, units are not required.

    What *is* required is well-formed code. This site doesn't have it. John
    needs to clean up the "sloppy code" and get it to validate before
    wondering why somethings don't work.

    http://validator.w3.org/check?verbose=1&uri=http://www.zampf.com/flights.pl

    There are "only" 28 errors, but they include multiple <html> and <body>
    elements, mystery tags like </br>, and a lack of doctype. In quirks
    mode, nobody can hear you scream.

    And lastly, once the basic HTML errors are cleaned up, the original
    problem, if it still exists, should probably be discussed in
    c.i.w.a.stylesheets (if at all), not here in alt.html.

    --
    John Hosking
     
    John Hosking, Oct 24, 2006
    #6
  7. John

    John Guest

    Thank you gentlemen

    Now working fine in IE. Not so in FF but I can live with that for the
    moment.

    Validator. Quite right. I'm prepared to knock the errors (sic) to a
    singledigit. Sometimes it will find errors that are not there.

    Many thanks
    John
     
    John, Oct 24, 2006
    #7
  8. John wrote:
    > Hi
    >
    > That's quick.
    >
    > The site which is under development - so may be working one moment but not
    > the next!
    >
    > www.zampf.com


    John, sorry but you got what appears to be a _cut'n paste_ mess here.
    Multiple HTML and BODY tags. You need a refresher in basic HTML...

    example

    #CODE
    <table align="center">
    <div id="navbar">
    <ul>
    <li><a href="home.shtml">Home</a></li>

    <li><a href="flights.pl">Flights</a></li>
    <li><a href="hotels.shtml">Hotels</a></li>
    <li><a href="cars.shtml">Car Rental</a></li>
    <li><a href="cruises.shtml">Cruises</a></li>
    <li><a href="holidays.shtml">Holidays</a></li>
    <li><a href="bargains.shtml">Bargains</a></li>

    <li><a href="MyZampf.pl">MyZampf</a></li>
    <li><a href="contact.shtml">Contact Us</a></li>
    </ul>
    </div>
    </table>

    After the TABLE tag only CAPTION, COL, COLGROUP, THEAD, TFOOT, TBODY TR
    can follow and certainly not DIV or UL...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 24, 2006
    #8
  9. John

    John Guest

    Hi

    Many thanks. Point taken. A lot of the code will be 'generated' from Perl
    which does have a habit of putting <html> tags every where. Actually with
    few problems. It shows how robust HTML is. The <table> strangely does work
    here. I know I should not use <table align='center'> and rather use <div
    align='center'> blah blah </div> but in the Validator even that causes a
    hiccup.

    Thanks for the input
    John
     
    John, Oct 24, 2006
    #9
  10. John

    Ben C Guest

    On 2006-10-24, John <> wrote:
    > Thank you gentlemen
    >
    > Now working fine in IE. Not so in FF but I can live with that for the
    > moment.


    Even if you can, I'm still curious...

    div#navbar ul {list-style: none;display: table;margin-left:
    auto;margin-right: auto;padding: 0px;margin: 0px;}

    The problem is that final margin: 0px, which is replacing margin-left:
    auto and margin-right: auto.

    You can use instead just:

    div#navbar ul {list-style: none;display: table;padding: 0px;margin: 0px auto;}

    margin: 0px auto;

    means use "0px" for top and bottom, and auto for left and right.

    And as John Hosking pointed out, you don't need those "px" after 0 after
    all.
     
    Ben C, Oct 24, 2006
    #10
  11. John wrote:
    > Hi
    >
    > Many thanks. Point taken. A lot of the code will be 'generated' from Perl
    > which does have a habit of putting <html> tags every where.


    Actually, no it doesn't. You are using the CGI.pm correct?

    my $q = new CGI;

    print $q->header, $q->p('This is a paragraph');

    generates only:

    <p>This is a paragraph</p>

    > Actually with
    > few problems. It shows how robust HTML is.


    No it shows how 'forgiving' your browser is. Old Netscape would have
    ended the display of your document at the first </html>


    > The <table> strangely does work
    > here.


    Again no not really. What are you expecting that it does, center your
    menu on the page? If so maybe you ought to see what a real web browser
    does with your page and not depend of IE's interpretation.

    > I know I should not use <table align='center'> and rather use <div
    > align='center'> blah blah </div> but in the Validator even that causes a
    > hiccup.


    That's absurd it is like saying "My car won't start, I painted it red
    didn't work and I hit it with a hammer and it didn't work either". Wrong
    method entirely.

    To prove it can be done with valid markup:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>

    <title>Valid Template</title>

    <style type="text/css">
    #navbar { text-align: center; font: 80% sans-serif; }
    #navbar UL { list-style: none; margin: 0; padding: 0; }
    #navbar LI { margin: 0 .05em; padding: 0; display: inline;
    line-height: 2 }
    #navbar A { text-decoration: none; padding: .2em 1em; border: 1px
    solid #aaf; }
    #navbar A:link, #navbar A:visited { color: #fff; background-color:
    #50c; }
    #navbar A:hover, #navbar A:active { color: #50c; background-color:
    #fff; }
    </style>
    </head>
    <body>

    <div id="navbar">
    <ul>
    <li><a href="home.shtml">Home</a></li>
    <li><a href="flights.pl">Flights</a></li>
    <li><a href="hotels.shtml">Hotels</a></li>
    <li><a href="cars.shtml">Car Rental</a></li>
    <li><a href="cruises.shtml">Cruises</a></li>
    <li><a href="holidays.shtml">Holidays</a></li>
    <li><a href="bargains.shtml">Bargains</a></li>
    <li><a href="MyZampf.pl">MyZampf</a></li>
    <li><a href="contact.shtml">Contact Us</a></li>
    </ul>
    </div>

    </body>
    </html>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 24, 2006
    #11
  12. John

    John Guest

    Hi

    And thanks again.

    >
    > div#navbar ul {list-style: none;display: table;padding: 0px;margin: 0px
    > auto;}


    Done that and it is now working in FF. If it works in IE and FF I'm happy,
    I prefer FF because I am a Linux person but since IE dominates I need to
    write for it primarily.

    > And as John Hosking pointed out, you don't need those "px" after 0 after
    > all.


    Sorry. It's just old habits hard to break. As another poster advised some
    of my HTML needs a cleanup. So I'm sticking them through the Validator.

    Appreciate your help.

    Regards
    John
     
    John, Oct 24, 2006
    #12
  13. John

    John Guest

    Hi

    > Actually, no it doesn't. You are using the CGI.pm correct?
    > my $q = new CGI;


    That's OK. That's how I use it. I'm probably thinking of print
    "Content-type: text/html\n\n";
    Thou I prefer to use the $user=param('user') and just hard code the CGI.


    > No it shows how 'forgiving' your browser is. Old Netscape would have ended
    > the display of your document at the first </html>


    Fair point. Actually both IE and FF are both forgiving (to me, at least)
    >

    If so maybe you ought to see what a real web browser
    > does with your page and not depend of IE's interpretation.


    Real web browser? Since IE and FF take the lion share I'm just coding for
    them. It maybe that Opera etc may baulk at the code but I'll have to live
    with that.

    ..


    > To prove it can be done with valid markup:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head>
    >
    > <title>Valid Template</title>
    >
    > <style type="text/css">
    > #navbar { text-align: center; font: 80% sans-serif; }
    > #navbar UL { list-style: none; margin: 0; padding: 0; }
    > #navbar LI { margin: 0 .05em; padding: 0; display: inline; line-height:
    > 2 }
    > #navbar A { text-decoration: none; padding: .2em 1em; border: 1px solid
    > #aaf; }
    > #navbar A:link, #navbar A:visited { color: #fff; background-color:
    > #50c; }
    > #navbar A:hover, #navbar A:active { color: #50c; background-color:
    > #fff; }
    > </style>
    > </head>
    > <body>
    >
    > <div id="navbar">
    > <ul>
    > <li><a href="home.shtml">Home</a></li>
    > <li><a href="flights.pl">Flights</a></li>
    > <li><a href="hotels.shtml">Hotels</a></li>
    > <li><a href="cars.shtml">Car Rental</a></li>
    > <li><a href="cruises.shtml">Cruises</a></li>
    > <li><a href="holidays.shtml">Holidays</a></li>
    > <li><a href="bargains.shtml">Bargains</a></li>
    > <li><a href="MyZampf.pl">MyZampf</a></li>
    > <li><a href="contact.shtml">Contact Us</a></li>
    > </ul>
    > </div>
    >
    > </body>
    > </html>
    >

    Appreciate that. I see you have added the hover, active and visited. I'm
    now adding DOCTYPE where I had earlier ignored it.
    Thanks for the above. Much appreciated.

    Regards
    John
    PS I have a 1971 VW Kombi so I probably would hit it with a hammer.
     
    John, Oct 24, 2006
    #13
  14. John

    Ben C Guest

    > John wrote:
    [snip]
    >> The <table> strangely does work
    >> here.

    >
    > Again no not really. What are you expecting that it does, center your
    > menu on the page? If so maybe you ought to see what a real web browser
    > does with your page and not depend of IE's interpretation.


    No this is specified behaviour, and explained in my earlier post in
    which I suggested it.

    It does centre the menu in conjunction with auto left and right margins.

    All the real web browsers I've tried it on (FF, Opera and Konqueror) are
    OK with it.

    I'm pleasantly surprised to hear that it also works in IE.

    It isn't/wasn't working in FF for the OP because of something else
    (specifying margins twice in the same selector). Although I am quite
    surprised why that wasn't a problem on Opera or Konqueror.

    [snip]
    > To prove it can be done with valid markup:


    >
    ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    ><html>
    ><head>
    >
    ><title>Valid Template</title>
    >
    ><style type="text/css">
    > #navbar { text-align: center; font: 80% sans-serif; }
    > #navbar UL { list-style: none; margin: 0; padding: 0; }
    > #navbar LI { margin: 0 .05em; padding: 0; display: inline;
    > line-height: 2 }
    > #navbar A { text-decoration: none; padding: .2em 1em; border: 1px
    > solid #aaf; }
    > #navbar A:link, #navbar A:visited { color: #fff; background-color:
    > #50c; }
    > #navbar A:hover, #navbar A:active { color: #50c; background-color:
    > #fff; }
    ></style>

    [snip]

    Yes, that works too, and is a more natural way of doing it. But the OP
    had his <li>s floating, which means he has control over a few more
    things-- he can set width on them for example, which you can't do on an
    inline box.

    text-align: center doesn't centre the floats (as of course it shouldn't)
    hence the idea of making the <ul> a shrink-to-fit centered block box.
     
    Ben C, Oct 24, 2006
    #14
  15. John wrote:

    > Fair point. Actually both IE and FF are both forgiving (to me, at least)
    > If so maybe you ought to see what a real web browser
    >> does with your page and not depend of IE's interpretation.

    >
    > Real web browser? Since IE and FF take the lion share I'm just coding for
    > them. It maybe that Opera etc may baulk at the code but I'll have to live
    > with that.


    Not with respect to your menu alignment via invalid TABLE element, it
    "works" in IE but Firefox ignores it and the menu is left justified
    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 24, 2006
    #15
  16. Ben C wrote:
    >> John wrote:


    Your snipping is incorrectly quoted the message, I wrote this level not
    John.


    <snip>
    >> To prove it can be done with valid markup:

    >
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">
    >> <html>
    >> <head>
    >>
    >> <title>Valid Template</title>
    >>
    >> <style type="text/css">
    >> #navbar { text-align: center; font: 80% sans-serif; }
    >> #navbar UL { list-style: none; margin: 0; padding: 0; }
    >> #navbar LI { margin: 0 .05em; padding: 0; display: inline;
    >> line-height: 2 }
    >> #navbar A { text-decoration: none; padding: .2em 1em; border: 1px
    >> solid #aaf; }
    >> #navbar A:link, #navbar A:visited { color: #fff; background-color:
    >> #50c; }
    >> #navbar A:hover, #navbar A:active { color: #50c; background-color:
    >> #fff; }
    >> </style>

    > [snip]
    >
    > Yes, that works too, and is a more natural way of doing it. But the OP
    > had his <li>s floating, which means he has control over a few more
    > things-- he can set width on them for example, which you can't do on an
    > inline box.
    >
    > text-align: center doesn't centre the floats (as of course it shouldn't)
    > hence the idea of making the <ul> a shrink-to-fit centered block box.


    That's why I did float the LI's. The problem is that the UL element
    expands to 100% width so your cannot center by setting the left and
    right margins to auto as with other blocks. To make it work you have to
    set an absolute width on the UL. Best to use 'em' so it scale with the
    font, but the design will break if you add another menus item...

    You could set the UL to "display: table" but that leaves IE out of the
    picture. My advice is to make a "design decision" and go with the
    variable width menu items and maintain the flexibility of the menu items
    or forgo the need for the "centered" menu...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 24, 2006
    #16
  17. John

    Ben C Guest

    On 2006-10-24, Jonathan N. Little <> wrote:
    > Ben C wrote:
    >>> John wrote:

    >
    > Your snipping is incorrectly quoted the message, I wrote this level not
    > John.


    Sorry.

    ><snip>
    >>> To prove it can be done with valid markup:

    >>
    >>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >>> "http://www.w3.org/TR/html4/strict.dtd">
    >>> <html>
    >>> <head>
    >>>
    >>> <title>Valid Template</title>
    >>>
    >>> <style type="text/css">
    >>> #navbar { text-align: center; font: 80% sans-serif; }
    >>> #navbar UL { list-style: none; margin: 0; padding: 0; }
    >>> #navbar LI { margin: 0 .05em; padding: 0; display: inline;
    >>> line-height: 2 }
    >>> #navbar A { text-decoration: none; padding: .2em 1em; border: 1px
    >>> solid #aaf; }
    >>> #navbar A:link, #navbar A:visited { color: #fff; background-color:
    >>> #50c; }
    >>> #navbar A:hover, #navbar A:active { color: #50c; background-color:
    >>> #fff; }
    >>> </style>

    >> [snip]
    >>
    >> Yes, that works too, and is a more natural way of doing it. But the OP
    >> had his <li>s floating, which means he has control over a few more
    >> things-- he can set width on them for example, which you can't do on an
    >> inline box.
    >>
    >> text-align: center doesn't centre the floats (as of course it shouldn't)
    >> hence the idea of making the <ul> a shrink-to-fit centered block box.

    >
    > That's why I did float the LI's.


    You mean "didn't".

    > The problem is that the UL element
    > expands to 100% width so your cannot center by setting the left and
    > right margins to auto as with other blocks. To make it work you have to
    > set an absolute width on the UL. Best to use 'em' so it scale with the
    > font, but the design will break if you add another menus item...


    > You could set the UL to "display: table" but that leaves IE out of the
    > picture.


    I thought the OP said it worked in IE?

    > My advice is to make a "design decision" and go with the variable
    > width menu items and maintain the flexibility of the menu items or
    > forgo the need for the "centered" menu...


    Sound advice.
     
    Ben C, Oct 24, 2006
    #17
  18. John

    Ben C Guest

    On 2006-10-24, Jonathan N. Little <> wrote:
    > John wrote:
    >
    >> Fair point. Actually both IE and FF are both forgiving (to me, at least)
    >> If so maybe you ought to see what a real web browser
    >>> does with your page and not depend of IE's interpretation.

    >>
    >> Real web browser? Since IE and FF take the lion share I'm just coding for
    >> them. It maybe that Opera etc may baulk at the code but I'll have to live
    >> with that.

    >
    > Not with respect to your menu alignment via invalid TABLE element


    There's no TABLE element. Just display: table. How is it invalid?
     
    Ben C, Oct 24, 2006
    #18
  19. Ben C wrote:
    > On 2006-10-24, Jonathan N. Little <> wrote:
    >> John wrote:
    >>
    >>> Fair point. Actually both IE and FF are both forgiving (to me, at least)
    >>> If so maybe you ought to see what a real web browser
    >>>> does with your page and not depend of IE's interpretation.
    >>> Real web browser? Since IE and FF take the lion share I'm just coding for
    >>> them. It maybe that Opera etc may baulk at the code but I'll have to live
    >>> with that.

    >> Not with respect to your menu alignment via invalid TABLE element

    >
    > There's no TABLE element. Just display: table. How is it invalid?


    Because the OP was not using "display: table: (which does not work in
    IE) but *was* using a TABLE element and in a very invalid manner. His
    markup was:

    <table align="center">
    <div id="navbar">
    <ul>
    <li><a href="home.shtml">Home</a></li>

    <li><a href="flights.pl">Flights</a></li>
    <li><a href="hotels.shtml">Hotels</a></li>
    <li><a href="cars.shtml">Car Rental</a></li>
    <li><a href="cruises.shtml">Cruises</a></li>
    <li><a href="holidays.shtml">Holidays</a></li>
    <li><a href="bargains.shtml">Bargains</a></li>

    <li><a href="MyZampf.pl">MyZampf</a></li>
    <li><a href="contact.shtml">Contact Us</a></li>
    </ul>
    </div>
    </table>

    And that was what I was addressing....

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 24, 2006
    #19
  20. Ben C wrote:
    > On 2006-10-24, Jonathan N. Little <> wrote:


    >>> text-align: center doesn't centre the floats (as of course it shouldn't)
    >>> hence the idea of making the <ul> a shrink-to-fit centered block box.

    >> That's why I did float the LI's.

    >
    > You mean "didn't".
    >

    Yes, that's what I meant. Gotta proof read!

    >> The problem is that the UL element
    >> expands to 100% width so your cannot center by setting the left and
    >> right margins to auto as with other blocks. To make it work you have to
    >> set an absolute width on the UL. Best to use 'em' so it scale with the
    >> font, but the design will break if you add another menus item...

    >
    >> You could set the UL to "display: table" but that leaves IE out of the
    >> picture.

    >
    > I thought the OP said it worked in IE?
    >


    No he actually wrapped the UL in a TABLE element

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 24, 2006
    #20
    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. SirPoonga
    Replies:
    2
    Views:
    818
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,073
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    549
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    317
  5. Replies:
    3
    Views:
    323
Loading...

Share This Page