Horizontally Centered Navigation List

The problem:

Create a horizontally centered “tabbed” navigation menu using CSS without having to specify widths on any elements. Also, implement multiple background images to correspond with your design.

Why You Would need it?

You might want to create a centered layout with very “minimalist” menu. You may have multiple pages with varying amounts and sizes of navigation items and don’t want to have to specify a width on the ‘ul’ in every page

The solution:

Here it is:

The menu is created using no CSS hacks, workarounds, or conditionals.

The html:

The CSS:


#navcontainer ul, #navcontainer ul li, #navcontainer ul li.active span, #navcontainer ul li span, #navcontainer ul li.active span a, #navcontainer ul li span a{
padding-top:16px;
padding-bottom:16px;
}

#navcontainer ul li span, #navcontainer ul li.active span a {
padding-left:10px;
padding-right:10px;
}

#navcontainer ul li span a{
padding-left: 5px;
padding-right: 5px;
}

#navcontainer ul li#last{
padding-right:9px;
}

#navcontainer ul li#first{
padding-left:9px;
}

#navcontainer ul li.active span, #navcontainer ul{
padding-left:0;
padding-right:0;
}

/* $$$$$$$$$$$$$$$ END PADDINGS $$$$$$$$$$$$$$$ */

#navcontainer{
}

#navcontainer ul{
font-family: Arial, Helvetica, sans-serif;
color: white;
font-size:12px;
font-weight:normal;
text-align: center;
margin: 0;
}

#navcontainer ul li{
vertical-align:middle;
display: inline;
margin:0 -3px 0 0;
}

#navcontainer ul li#first{
background-image:url(http://www.rmsjr.com/images/nav-left.png);
background-position:left center;
background-repeat:no-repeat;
}

#navcontainer ul li#last{
background-image:url(http://www.rmsjr.com/images/nav-right.png);
background-position:right center;
background-repeat:no-repeat;
}

#navcontainer ul li#last a{ margin-right:-3px;}

#navcontainer ul li span{
background-image:url(http://www.rmsjr.com/images/bg-nav.png);
background-repeat:repeat-x;
background-position:right center;
color: #b6dbec;
}

#navcontainer ul li.active span{
background-image:url(http://www.rmsjr.com/images/bg-navitem-active-right.png);
}

#navcontainer ul li span a{
color: #b6dbec;
text-decoration:none;
}

#navcontainer ul li.active span a{
background-image:url(http://www.rmsjr.com/images/bg-navitem-active-left.png);
background-repeat:no-repeat;
background-position:left center;
color: white;
text-decoration: none;
}

#navcontainer ul li a:hover{color: #ffffff;}

#navcontainer ul li span input{background-repeat:repeat-x; background-position:center; padding: 0px 0px 0px 0px; color: white;font-weight:normal; font-family:Arial, Helvetica, sans-serif; text-decoration: none; margin:0px;}
#navcontainer ul li .txtInput{display:block; display:inline; height:13px; font-size:1em; border:1px solid #cccccc; vertical-align:middle; color:#666666; padding:0px;}

————————————————————-

I have seen this type of thing being attempted here: http://24ways.org/2005/centered-tabs-with-css but in this example the menu didn’t show up correctly for me in IE7 and the author used the ol’ holly hack, which I believe doesn’t apply anymore.

I also saw something similar on http://css.maxdesign.com.au/listamatic/ , but all those horizontally centered menus were very bare bones and simple without using background images at all.

Conclusions:

It was a long hard battle through the winds of Internet Explorer and the Seas of Firefox but I finally endured the elements (no pun intended) and made it to land safely! I have not explored the lands of Opera or went on a Safari but I will soon (sorry if it doesn’t work yet for you “Operatarians” or “Safarians”).

I learned a few things during the process:

  1. Don’t even bother doing this if you have a remote chance of a simpler block – level alternative
  2. There is one minor, but extremely important difference to understand between how IE and Firefox handle in-line elements: Child inline-elements in IE expand the size of their parent elements… ** VERY IMPORTANT ** . This concept seems like it would be something obvious but it took me a while to grasp the dynamics of it due to the nature of inline styles and, with multiple parents, things get confusing during the process.
  3. Padding is my friend. Padding is the key to creating a horizontally centered tab menu. Basically the main thing that determined the success of the menu was getting the correct padding on all the elements.

The Good Things:

  1. The menu is always centered without having to set a width on any element.
  2. The menu has very clean html / css
  3. List items expand and contract with the content
  4. and… well that’s about it. (a lot for a little I guess)

The Not So God Things:

  1. The height measurements within the menu are very static. For example… If you want to change font sizes, many adjustments have to be made to paddings throughout the menu to get it to look correct.
  2. You can’t have two lines of text in a list item.
  3. Images can only be a limited height to keep the design in tact.