Tuesday, March 31, 2009

Centered Horizontal List Menu

I've been working with a lot of CSS techniques for almost ten years now and it is centering a list menu that has always bugged me. So here are the rules for it:

/*centered naviation*/
#navigation_centered{
text-align:left;
left:50%;
position:relative;
float:left;
}

#navigation ul#nav_centered{
left:-50%;
position:relative;
border-left:#D5C06D 1px solid;
float:left;
}

#navigation ul#nav_centered li{
float:left;
position:relative;
list-style:none;

border-right:#D5C06D 1px solid;
}

#navigation ul#nav_centered li a{
float:left;
padding:7px 10px 8px;
}
/*end of centered navigation*/

And the html should look something like this:

<div id="navigation_centered">

<ul id="nav_centered">

<li><a href="#">Nam </a></li>

<li class="selected"><a href="#">odio </a></li>

<li><a href="#">orci </a></li>

<li><a href="#">fringilla</a></li>

</ul>

</div>
I can't remember where I got this, but I also seem to remember I read this somewhere with a CSS book published by sitepoint.com. I'll get to the explaining part maybe in my next post.

Cheers...

No comments:

Post a Comment