ansaurus

Question

Answer 1

+1 A:

I think you're looking for something like this: http://jsfiddle.net/sp45g/

div { // Container around the UL
    text-align: center;
    background-color: blue;
}   
ul { // Inline block to shrink-wrap to contents
    display: inline-block;
    background-color: red;
}
li { // Inline to display in a row
    display: inline;
}

Robert 2010-09-22 18:21:50

inline-block will not work on Ie6-7. Doesn't display right on Ie8 at times. I'd advise not using it.

Ryan Ternier 2010-09-22 18:24:01

Works fine in IE8, tested it with that.

Robert 2010-09-22 18:25:04

That's good to hear. I know it won't work in IE6 and Ie7. Found that out the hard way...

Ryan Ternier 2010-09-22 18:27:29

I don't support IE6 anymore, as Google and Microsoft have dropped support. If an internal company is still using IE6 they need to get out of the dark ages. IE7 has an incomplete implementation, it's not completely unsupported. The problem with IE7 is that it won't support `inline-block` for elements that aren't inline to begin with, such as the `ul`. If you're going to say something is wrong, it's good to be completely right and to have reasoning.

Robert 2010-09-22 18:34:38

Answer 2

+1 A:

To center your menu, give your menu a width and use:

maring:0 auto;

The final result is something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title>Untitled Page</title>
    <style>

        .menu
        {
            width:270px;
            margin:0 auto;
        }
        ul#menu
        {
            margin: 0;
            padding: 0;
            list-style-type: none;
            width: auto;
            position: relative;
            display: block;
            height: 30px;
            font-size: 12px;
            font-weight: bold;
            background: transparent url(images/nav_bg.png) repeat-x top left;
            font-family: Arial, Helvetica, sans-serif;
            border-bottom: 1px solid #000000;
            border-top: 1px solid #000000;
        }

        ul#menu li
        {
            display: block;
            float: left;
            margin: 0;
            padding: 0;
            width:60px;
            text-align:center;
        }

        ul#menu li.divider
        {
            width:5px;
        }

        ul#menu li a
        {
            display: block;
            float: left;
            color: #999999;
            text-decoration: none;
            font-weight: bold;
            padding: 8px 20px 0 20px;
        }

        ul#menu li a:hover
        {
            color: #FFFFFF;
            height: 22px;
            background: transparent url(images/nav_bg.png) 0px -30px no-repeat;
        }


        ul#menu li a.current
        {
            display: inline;
            height: 22px;
            background: transparent url(images/nav_bg.png) 0px -30px no-repeat;
            float: left;
            margin: 0;
        }
    </style>
</head>
<body>
<div class="menu">
    <ul id="menu">
        <li class="divider">|</li>
        <li>Home</li>
        <li class="divider">|</li>
        <li>Blog </li>
        <li class="divider">|</li>
        <li>About </li>
        <li class="divider">|</li>
        <li>Contact</li>
        <li class="divider">|</li>
    </ul>
</div>

</body>
</html>

Update:

If you didn't want to use pipes in the divider, you could always use:

    ul#menu li.divider
    {
        width:2px;
        background-color:Black;
    }

instead which will give a similar look and make screen readers not blow up at you.

Ryan Ternier 2010-09-22 18:22:05

Answer 3

A:

Does

ul#menu {margin: 0 auto}

work for you?

hluk 2010-09-22 18:23:24

that would work but the width:auto; is unpredictable in IE6 at times. If he knows the width explicitly stating it is best for older browsers. (Yes yes I know, old browsers hurt the web. Nothing we can do but wait for the annihilation of them.)

Ryan Ternier 2010-09-22 18:30:10

Which is funny, cause you're using `width: auto` :P

Robert 2010-09-22 18:35:21

Answer 4

A:

I cleaned it up a little bit...

   ul#menu{
    margin:0;
    padding:0;
    list-style-type:none;
    display:block;
    height:30px;
    font-size:12px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;
    }

    ul#menu li{
    display:block;
    float:left;
    margin:0;
    padding:0;
    }

    ul#menu li a{
    color:#999999;
    text-decoration:none;
    padding:8px 20px 0 20px;
    height:22px;
    background:transparent url(images/nav_bg.png) repeat-x top left;
    }

    ul#menu li a:hover, ul#menu li a.current{  
    color:#FFFFFF;
    background:transparent url(images/nav_bg.png) 0px -30px no-repeat;      
    }

add a wrapper around the ul:

<div id="wrapper">
  <ul id="menu">
    <li><a>link</a></li> | 
    <li><a>link</a></li> |
    ...
  </ul>
</div>

and add folling:

#wrapper{
  width:100%;
}
ul#menu{
  margin:0 auto;
}

I didn't test it, so maybe u have to change some values...

revaxarts 2010-09-22 18:30:01

ansaurus

tags:

views:

answers:

How to center the following menu?

related questions