Centering a Menu?

Discussion in 'CSS' started by le007, Apr 7, 2009.

0
  1. #1
    Hi all - can someone please center this menu for me?
    Thank you

    #menu1 {
border-top: 1px solid #949494;
background-color: #DD6E05;
width: 100%; /*haslayout so background colour shows in IE6*/
overflow: hidden;
}
#header ul li {
display: inline; /*some declaration for IE7, otherwise ignore li's*/
z-index:1000
}

#header ul a, #header p {
float: left;
font-family: tahoma;
font-size: 11px;
color: #e0e4e7;
height: 26px;
line-height: 26px;
text-align: center;
text-decoration: none;
padding: 0 10px;
}
#header ul a:focus, #header ul a:hover {
background-color: white;
color: #DD6E05;
}

* html #header p {margin-right: -3px;} /*stoopid 3-pixel-jog bug*/
    Code (markup):

     
    le007, Apr 7, 2009 IP
  2. ExtremeData

    ExtremeData Well-Known Member

    Messages:
    450
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    125
    #2
    margin: 0 auto; should center your menu.
     
    ExtremeData, Apr 7, 2009 IP
  3. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    thanks very much
     
    le007, Apr 8, 2009 IP
  4. bingobob

    bingobob Peon

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You might find that a 100% width div will not center in anything as it is display block 100% of the containment area.

    When you try to center a div like this you will need to fix the width to a pixel dimension:

    #menu1 {
    border-top: 1px solid #949494;
    background-color: #DD6E05;
    width: 100%; /*haslayout so background colour shows in IE6*/
    overflow: hidden;
    }

    I would use something like this:

    #menu1 {
    border-top: 1px solid #949494;
    background-color: #DD6E05;
    width: 160px; /*The width you want the menu to be*/
    overflow: hidden;
    margin:0 auto;
    }
     
    bingobob, Apr 12, 2009 IP
  5. gopalraju

    gopalraju Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    margin:0px auto; is the best solution for this.
     
    gopalraju, Apr 12, 2009 IP
  6. Joomler!

    Joomler! Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    margin: 0 auto; :)
     
    Joomler!, Apr 13, 2009 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    I love all the responsese that didn't bother looking at the code, because margin is going to do exactly two things - and jack left town, took his **** with him.

    Why do I say this?

    Because his UL is set to 100% width, and the anchors are set to FLOAT.

    Centering a menu filled with FLOATED elements and a dynamic width on it's elements is impossible - doesn't work.

    Though I have to ask is this a cascading menu, or just a flat inline? CSS without the markup is pretty much useless for determining things like that.

    Either way, you might want to have a look at this menu example I wrote for someone on the .js forums. (where I pretty much said don't use javascript for a menu except for backwards IE support)

    http://battletech.hopto.org/html_tutorials/cssMenu/

    It relies on Peterned's 'hover anywhere' to bring legacy versions of IE into line, and uses a trick I came up with using word-spacing and letter-spacing to remove unwanted white-space between the LI - which is really the only reason to use the float in the first place ;)
     
    deathshadow, Apr 13, 2009 IP