Lista orizzontale centrata (CSS)

English version

Per aiutare il mio amico Xmario a realizzare il suo sito web mi è capitato di modificare questa barra in css, e siccome sono delle modifiche utili, le metto a disposizione di tutti.

Il problema delle barre in css centrate in genere è che tra un elemento del menù e l’altro hanno uno spazio orizzontale. L’autore della barra che ho modificato ha usato un margine negativo dei <li> per eliminare approssimativamente questo spazio. Il problema è che non è preciso e inoltre se si cambiano le dimensioni del testo, il risultato è pessimo.

Ho quindi per prima cosa rimosso la modifica:

div#navcontainer ul li
{
display: inline;
}

Poi ho cercato di capire perché ci fossero quelli spazi e dopo varie idee l’ho capito. Il fatto è che nel codice html, quando si va a capo col codice senza niente altro come ad esempio un tag <br>, il browser considera quell’invio come uno spazio semplice tra una parola e l’altra. Lo stesso avviene anche con gli elementi della lista.

Perciò bisogna metterli tutti attaccati:

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

Però così il codice è molto scomodo da leggere e modificare.

Ho cercato quindi un modo per mettere su ogni riga del codice un elemento diverso senza avere problemi. Ho risolto creando una classe (che poi non verrà usata) che mi permette di mandare a capo dentro al tag <li>.

Chiamandola zzzz il codice diventa quindi:

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

Ed il 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; /* i bordi vanno uguali */
margin-right: -1px; /* il valore deve essere il numero sopra ma negativo */
}
div#navcontainer ul li a:hover
{
background-color: #16008D;
color: white;
}

Nota: il codice contiene anche una piccola modifica per i bordi degli elementi del menù.

04/06/2007 Aggiornamento: Aggiunta una modifica per rimuovere un bug, che faceva stare la lista un po’ troppo sulla destra.