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.
vediamo!
È stata una sorpresa questo blog!!!
ciao, sono Andrea Lazzarotto anch’io (prov di Pordenone) tu di dove sei?
ciao!
Io sono in provincia di Vicenza.
bel menu grazie
Prego.
anke tu di vicenza?
Della provincia. Per queste cose trovi comunque i miei contatti sulla pagina About.
Domanda… come fai ad evidenziare il codice in wordpress?
Usi qualche plugin?
e quando usi i doppi meno (esempio scrivendo –verbose) come risolvi il fatto che WP li unisce in un unico tratto lungo?
Nessun plugin, è il tema che è fatto così. Per quanto riguarda i doppi meno… Non risolvo, il problema c’è e rimane.
ah… quello è il risultato di
?Fiquo...
Andrea, per evitare che WP trasformi il doppio trattino in tratto lungo, prova ad usare il tag HTML code oppure pre. Li provo io stesso qui:
sudo apt-get install --reinstall linuxe ora il pre:
sudo apt-get install –reinstall linux
Il code funzia, il pre no. Se non erro, dipende dal CSS. Ciao!
@ aldolatino, (a parte i complimenti per il nuovo nick
… ) uso abitualmente quello. Tuttavia si comporta un po’ come gli pare. 
Good tutorial.
Greetings from de
ah, il nick!
quello lo uso nell’account wordpress.com… mi serve per la mia dashboard. Comunque aldolat è ancora vivo e vegeto!
@ Aldo, ah ah.
Ok, capito.
Ah lazza! Provincia di vicenza? io treviso!
Se ti va aggiungimi a msn!