Need to center this menu

HTML & CSS
1

I need to center the menu on my page, cant get it work, I would like to eliminate the navigation div if possible, and just have a menu outer div and then the ul. Any help please as its getting really frustrating. thanks

2

Or you could remove the div ad use the ul instead but you would need a min -width on the main parent instead to stop items wraping.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ISUZU-HOME</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
html, body, p, ul {
    margin:0;
    padding:0
}
body {
    width:100&#37;;
    height:100%;
    background-color:#FFFFFF;
    margin:0px;
    padding:0px;
    font-size:12px;
    font-family:Trebuchet MS, Arial, Verdana, Tahoma, sans-serif;
    color:#000000;
}
img {
    border:0px;
}
hr {
    color:#BFBFBF;
}
p {
    line-height:15px;
    margin:10px;
}
/* styles for Mainbody Div Start */  
#mainbody {
    width:100%;
    margin:0px;
    padding:0px;
}
/* styles for Mainbody Div End */  

/* styles for Header Div Start */  
#header {
    width:960px;
    height:168px;
    margin: 0 auto;
}
#logo {
    background: url(http://ihostmalta.com/forums/images/logo.jpg) 0 0 no-repeat;
    width: 534px;
    height: 168px;
    margin: 0 auto;
}
/* styles for Header Div Start */  

/* styles for Menu Div Start */  
#navigation {
    width: 100%;
    height: 40px;
    background: url("http://ihostmalta.com/forums/images/menu_bg.png") repeat-x scroll 0 0 transparent;
    text-align: center;
    min-width:960px;
}
ul#menu {
    display:-moz-inline-box;
    display:inline-block;
    list-style: none;
    text-align: center;
    line-height: 40px;
    height: 40px;
}
* html ul#menu {
    display:inline;
}
*+html ul#menu {
    display:inline;
}
#menu li {
    float: left;
    height: 40px;
    background: url("http://ihostmalta.com/forums/images/norm_left.png") no-repeat left top;
    margin: 0;
    padding: 0;
}
#menu a {
    color: white;
    font-family: helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    display: block;
    background: url("http://ihostmalta.com/forums/images/norm_right.png") no-repeat right top;
    padding: 0 15px 0 13px;
}
#menu #current {
    background:url("http://ihostmalta.com/forums/images/norm_left_on.png");
}
#menu #current a {
    background:url("http://ihostmalta.com/forums/images/norm_right_on.png") no-repeat right top;
}
</style>
</head>
<body>
<div id="mainbody">
    <!-- Menu Starts -->
    <div id="navigation">
            <ul id="menu">
                <li><a href="#">Home</a></li>
                <li id="current"><a href="#">Trucks</a></li>
                <li><a href="#">Pickups</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Finance Options</a></li>
                <li><a href="#">After Sales</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
    </div>
</div>
</body>
3

is there any way i can do away with the navigation div?
That method Paul was using sets the UL itself as inline-block and the navigation div centers it with text-align:center. By doing that you are able to float the LI and avoid any whitespace nodes between the LIs’.

centered-inline-block-kill-node

However, there is another way to do that and eliminate the extra navigation and menu div. You can set the LIs’ as inline-block and use text-align:center on the UL to center them.

That will produce whitespace nodes if the LI wrap in the html but they can be killed by setting font-size:0 on the UL. The drawback is that the font-size must be reset in pixels on the anchor or LI. You can’t use ems or % since there is no longer anything for them to reference from since the UL is font-size:0

Your using font-size:12px on your body element anyway so using pixels on your anchor should not be an issue for you.

4

i see i was missing the inline block. is there any way i can do away with the navigation div? so ill just have a menu div and menu ul underneath. the html just doesnt look to nice with a navigation div and another menu div nested.

5

Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ISUZU-HOME</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
html,body,p,ul{margin:0;padding:0}
body {
    width:100&#37;;
    height:100%;
    background-color:#FFFFFF;
    margin:0px;
    padding:0px;
    font-size:12px;
    font-family:Trebuchet MS, Arial, Verdana, Tahoma, sans-serif;
    color:#000000;
}
img {
    border:0px;
}
hr {
    color:#BFBFBF;
}
p {
    line-height:15px;
    margin:10px;
}

/* styles for Mainbody Div Start */  
#mainbody {
    width:100%;
    margin:0px;
    padding:0px;
}
/* styles for Mainbody Div End */  

/* styles for Header Div Start */  
#header {
    width:960px;
    height:168px;
    margin: 0 auto;
}
#logo {
    background: url(http://ihostmalta.com/forums/images/logo.jpg) 0 0 no-repeat;
    width: 534px;
    height: 168px;
    margin: 0 auto;
}
/* styles for Header Div Start */  

/* styles for Menu Div Start */  
#navigation {
    width: 100%;
    height: 40px;
    background: url("http://ihostmalta.com/forums/images/menu_bg.png") repeat-x scroll 0 0 transparent;
    text-align: center;
}
#menu {
    margin: 0 auto;
    width: 960px;
    height: 40px;
}
#menu ul {
    display:-moz-inline-box;
    display:inline-block;
    list-style: none;
    text-align: center;
    line-height: 40px;
}
* html #menu ul{display:inline;}
*+html #menu ul{display:inline;}
#menu li {
    float: left;
    height: 40px;
    background: url("http://ihostmalta.com/forums/images/norm_left.png") no-repeat left top;
    margin: 0;
    padding: 0;
}
#menu a {
    color: white;
    font-family: helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    display: block;
    background: url("http://ihostmalta.com/forums/images/norm_right.png") no-repeat right top;
    padding: 0 15px 0 13px;
}
#menu #current {
    background:url("http://ihostmalta.com/forums/images/norm_left_on.png");
}
#menu #current a {
    background:url("http://ihostmalta.com/forums/images/norm_right_on.png") no-repeat right top;
}
</style>
</head>
<body>
<div id="mainbody">
    <!-- Menu Starts -->
    <div id="navigation">
        <div id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li id="current"><a href="#">Trucks</a></li>
                <li><a href="#">Pickups</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Finance Options</a></li>
                <li><a href="#">After Sales</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
6

There were some other options posted above. :wink:

7

#navigation with text-align:center didnt work

8

I’ll throw my link into the mix. http://www.visibilityinherit.com/code/center-nav.php

9

Well I dont know the width of the menu as they can add or delete items at will, however I do know that it’s never going to be more than 960px wide

10

The easiest way is if you know the width of the menu. Then you could get rid of the #menu div and use this:

#navigation ul {
  margin: 0 auto;
  width: 648px; /* just an estimate */
}

There are some tricks by which you can center an element without a set width, but I’d have to look them up. :slight_smile:

EDIT: here is are: http://pmob.co.uk/pob/centred-float.htm

11

Why dont you “text-align:center” the entire parent div (#navigation) it shoud work