Centre align an unordered list with CSS

joeyjojo · 23 Nov 2006 at 19:00

Simple layout problem. I want a variable width navigation bar which centres itself. The obvious solution seemed to give the <ul> margin: 0 auto; but no luck with that. Design as below:

Blue for container, orange for nav, green for ul, yellow for li, red for some other content div.

Any ideas? Ta.

TheCrow · 23 Nov 2006 at 19:07

would wrapping the menu in a div not be best? then center the div

joeyjojo · 23 Nov 2006 at 19:18

TheCrow said:
would wrapping the menu in a div not be best? then center the div

Indeed, but the <ul> seems to take up the maximum space provided by default. It shrinks to the minimum with display:inline; but then won't let the containing div center, for reasons unknown.

TheCrow · 23 Nov 2006 at 19:37

post up what youv got (or jsut that section) and ill see if i can play with it atall.

If i cant im sure someone will be able to.

joeyjojo · 23 Nov 2006 at 19:43

Code:

body {
padding:0;
margin:0;
background-color:#000000;
color:#FFFFFF;
}
#container {
width:760px;
margin:0 auto;
border:1px solid red;
}
#nav {
border:1px solid blue;
}
#nav ul {
list-style-type:none;
padding:0;
margin:0 auto;
border:4px solid green;
display:inline;
}
#nav ul li {
display:inline;
}
#nav ul li a {

}
#nav ul li a:hover {
background-color:#FF0000;
}
#main {
width:760px;
}
#content {
width:396px;
color:#0000FF;
}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MuMu</title>
<link href="images/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="nav">

<ul>
<li><a href="#">List one</a></li>
<li><a href="#">List two</a></li>
</ul>
</div>
<div id="content">Content</div>


</div>
</body>
</html>

TheCrow · 23 Nov 2006 at 22:10

when u say you want a variable width nav bar what do you mean? that it centers no mattter how many links, or that it moves as you resize the window?

Code:

body {
padding:0;
margin:0;
background-color:#000000;
color:#FFFFFF;
}
#container {
width:760px;
margin:0 auto;
border:1px solid red;
}
#nav {
border:1px solid blue;
text-align: center;

}
#nav ul {
list-style-type:none;
padding:0;
margin:0 auto;
border:4px solid green;
display:inline;
}
#nav ul li {
display:inline;
}

#nav ul li a {

}
#nav ul li a:hover {
background-color:#FF0000;
}
#main {
width:760px;
}
#content {
width:396px;
color:#0000FF;
}

all iv added is text-align: center; in #nav...but im not sure this is what you are after?

joeyjojo · 23 Nov 2006 at 22:58

Hmm, well I deserve a lol and a rofl for that. What a dunce

Good job, works perfectly

TheCrow · 23 Nov 2006 at 23:06

np m8, i miss stuff like that all the time, when you keep looking at your own code for too long you cant see anythign.

Good luck w the site