You have widthless floats so I don’t recommend setting a width. Assuming your HTML from previous threads have stayed the same.
I’m going to assume your HTML is something like th is.
<div id=“topnav”>
<ul>
<li><a href=“#”>TExt</a></li>
<li><a href=“#”>TExt</a></li>
<li><a href=“#”>TExt</a></li>
<li><a href=“#”>TExt</a></li>
</ul>
</div>
That would work with a width ste on the parent, however since yours are widthless floats there’s a possibility if you set a width then the list items could be a longer width (total) and thus it would break.
My solution shrink wraps the <ul> and the <div> and places the <div> 50% over and then the <ul> 50% back over left. The second 50% will movei t back over to pixel perfect centering
Paul’s Centered Widthless Floats method that Ryan mentioned is a very effective indeed. Just be aware that you will need to use overflow:hidden; on your main wrapping div to hide the relative positioning. You will get a horizontal scrollbar equal to the offset width if you don’t hide it.
There is an alternative method at the bottom of that link if using overflow:hidden; causes problems. It is usually not a problem unless you have something that intentionally hangs out of your wrapping div.
Here is an example that shows what is going on.
<!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>Centered Widthless Floats</title>
<style type="text/css">
#wrap {
width:950px;
min-height:100px;/* for demo only*/
margin:30px auto;
padding:10px 0;
/*overflow:hidden; is needed for RP centered floats*/
background:#BBB;
}
#nav {
float:left;
position:relative;
left:50%;
background:red;/* for demo only*/
padding-bottom:10px;/* for demo only*/
}
#nav ul {
float:left;
position:relative;
left:-50%;
list-style:none;
margin:0;
padding:0;
}
#nav li {
float:left;
}
#nav li a {
float:left;
padding:2px 20px;
text-decoration:none;
background:#FFF;
font-weight:bold;
}
#nav li a:hover {
color:#FFF;
background:#000;
}
</style>
</head>
<body>
<div id="wrap">
<div id="nav">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
<li><a href="#">Link Six</a></li>
<li><a href="#">Link Seven</a></li>
</ul>
</div>
</div>
</body>
</html>
It’s be best to ask the community this (I don’t accept help via PM anyway. I get too many) and plus my work station doesn’t have the ability to do local testing at all so I’d be at a loss to help you
I do notice you are using 2 extra containers for putting a background/width on.
Get rrid of thsoe extra containers and palce the styles on the #topnav and the <ul>
You’re welcome :). I have to leave now to go to a class but if you have any otehr questions you’d be best to try and PM Ray because he already is involved in this thread.
I finally got it to where I want it to be http://invisionblue.com/lab/centerlist/ however there is small space between the header image and nav, any ideas on what’s causing this?
