PDA

View Full Version : how to center a nav list?


rattlsnak
12-07-2009, 06:33 PM
I'm trying to center the navigation list inside the header, or nav div. This has to be something simple that Im just overlooking,.. duh..

this is what i have: basically a div nav list, inside a div navbar, inside a div header:

#header {
background-color: #333;
height: 80px;
width: 900px;
margin-left: auto;
margin-right: auto;
}
#navbar {
height: 60px;
width: 895px;
margin-top: 2px;
margin-left: auto;
margin-right: auto;
}
ul#navigation {
margin-left:0;
padding-left:0;
list-style-type:none;
background:#333;
float:left;
width:100%;
}
ul#navigation li {
display:inline;
}

Thanks..

Corrosive
12-07-2009, 06:58 PM
You've got your ul floated left.

rattlsnak
12-07-2009, 07:32 PM
yes, but i thought i had to do that so it wraps around the <a> elements so it will have height and be visible?

Corrosive
12-07-2009, 07:36 PM
You don't have to float it left but if that is the effect you are going for then that's cool. You could try centring it using margins.

rattlsnak
12-07-2009, 07:38 PM
yeah, looks like i can center it by padding the left side and then reducing the size of the #navbar the same amount.

Corrosive
12-07-2009, 08:32 PM
I am tired and can't remember but won't margin: auto; do the trick?

rattlsnak
12-07-2009, 09:28 PM
that centered the div inside the other one but the ul is still off. i padded the left side and shrunk the width to match and it works, but was wondering on another way.

domedia
12-07-2009, 09:42 PM
Did you remove padding and margins from the list?
This should be pretty straight forward once you've removed the defaults.