Horizontal centered list (CSS)

Versione italiana

In order to help my friend Xmario to build his web site I modified this css bar, and because they are useful hacks, I make them public.
The problem of centered css bars usually is that between an element of the menù and the other there is an horizontal space. The author of the bar I modified used a negative margin of <li> tags to remove approximately this space. The problem is that it isn’t sharp and also if you change the text size the result is awful.

So, first of all I removed the modification:

div#navcontainer ul li
{
display: inline;
}

Then I tried to understand why there were those spaces and after many ideas I understood it. The fact is that in HTML code, when you start a new line of code without anything else as for example a <br> tag, the browser interprets that “return” as a simple space between a word and another. This is true also for the list elements.

So you have to put them all stitched together:

<li id="active">...</li><li>...</li>

But in this way the code is very uncomfortable to read and modify.

So I tried to find a way to put on every line of the code a different element of the list without problems. I resolved by creating a class (it will be not used) that lets me break the line inside the <li> tag.

If we name it zzzz the code becomes:

<div id="navcontainer">
<ul id=”navlist”><li id=”active”
class=”zzzz”><a href=”#” id=”current”>Element 1</a></li><li
class=”zzzz”><a href=”#”>Element 2</a></li><li
class=”zzzz”><a href=”#”>Element 3</a></li><li
class=”zzzz”><a href=”#”>Element 4</a></li><li
class=”zzzz”><a href=”#”>Element 5</a></li></ul>
</div>

And the CSS:

div#navcontainer
{
background-color: #1F00CA;
border-top: solid 1px #FFFFFF;
border-bottom: solid 1px #FFFFFF;
}
div#navcontainer ul
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0px;
}
div#navcontainer ul li
{
display: inline;
}
div#navcontainer ul li a
{
padding: 5px 10px 5px 10px;
color: white;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff; /* the borders have the same size */
margin-right: -1px; /* the value has to be like the above but negative */
}
div#navcontainer ul li a:hover
{
background-color: #16008D;
color: white;
}

Note: the code contains also a small hack for the borders of the menù elements.

04/06/2007 Update: Added a hack to remove a bug, which made the list to be a bit too much on the right.