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.

19 thoughts on “Horizontal centered list (CSS)

  1. Great idea! Pity it’s not a thing to work in my case :)

    But then, adding to your idea, isn’t it possible to remove the “class=’foobar'” at all and leave only the line break in the “li” element’s angle brackets? haven’t tested this for standards conformity, but on first sight that might work :)

    Good luck

  2. Hi Andrea

    The code works brilliantly in IE and Firefox but just wanted to know if you had a fix for Chrome which seems to create a bulleted list running vertically

    Thanks

    Alun

  3. To be fair… I don’t know. I don’t use Chrome as it is not officially supported on Linux and it lacks a lot of needed features (at least by my POV). May you post a screenshot on a site like ImageShack so I can have a look? Thanks.

  4. Andrea, this is great. You saved me from pulling all my hair out trying to get some old modified (broken!) code to work, and you answered some questions too. Many thanks!

Che cosa ne pensi?

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...