horizontal menu center align?

joroco

10-23-2007, 09:34 PM

Hi,

I have a 100% width div and inside that I want to have buttons that are in the center of my page, the content below is 800-odd pixels and there is 3 columns in that. I have tried and tried to center it but it just doesn't want to happen. Can anyone help?

/* TOP PART OF THE WEBSITE */
#topheader {
background-color: blue;
width: auto;
}

#container {
width: 801px;
margin: 0 auto;
background-color: #cc223c;
}

#container ul {
list-style-type: none;
padding: 0;
display: inline;
text-align: center;
width: 60px;
}

#container a {
background-color: #3312aa;
float: left;
padding: 5px;
width: auto;
}

#container a:hover {
background-color: #667aaf;
color: #fff;
}
/* CONTENT GOES HERE */
#wrapper {
width: 801px;
margin: 0 auto;
background-color: #9affb3;
clear: both;
}

<div id="topheader">
<div id="container">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
</ul>
</div>
</div>

harbingerOTV

10-24-2007, 12:50 AM

Evening,

I took a few things out of your code just to try and simplify the process (and to make it easier for me to explain it).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>???</title>
<style type="text/css" media="screen">

#container {
width: 800px;
margin: 0 auto;
background: #cc223c;
overflow: hidden;
}

#container ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
float: left;
left: 50%;
position: relative;
}

#container ul li {
float: left;
left: -50%;
position: relative;
margin: 0 2px;
}

#container a {
background: #3312aa;
padding: 5px;
color: #ccc;
display: block;
}

#container a:hover {
background: #667aaf;
color: #fff;
}

</style>

</head>
<body>
<div id="container">
<ul>
<li><a href="#">Item one</a></li>
<li><a href="#">Item real long</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item longer than the second one</a></li>
<li><a href="#">Item six</a></li>
</ul>
</div>

</body>
</html>

I added some more text the the links and some margin between them so you could see that they really are centered.

On the container I added overflow:hidden so that non-ie browsers will stretch to contain the list. If you're making a drop down out of this, remove that line and use a clearing element.

First thing is remove the padding and margin of your ul. we'll center the text which gets IE to play along. Well then float it left and give it a left of 50%. This will move the whole ul 50% to the left in the container it's in. position relative is important as well.

Now well float the li's left so they display horizontally. Now left -50% them all so they all jump back to center.

I added display:block to your a's because without it, being inline elements, they will honor your padding on the sides but not on the top and bottom.

That's about it.

ez4me2c3d

10-24-2007, 01:02 AM

and here is another example
#nav {
margin: 0 auto;
padding: 0;
width: 800px;
list-style-type: none;
}

#nav li {
float: left;
margin-right: 1px;
padding: 0;
}

#nav a:link, #nav a:visited {
border: 1px solid black;
background-color: #ccc;
display: block;
padding: 10px 0;
width: 130px;
text-align: center;
text-decoration: none;
color: black;
}

#nav a:hover {
background-color: #eee;
}

#nav a:active {
background-color: #99f;
}

hr {
clear: both;
height: 0;
visibility: hidden;
}<div id="topheader">
<ul id="nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
</ul>
<hr />
</div>