Lista orizzontale centrata (CSS)
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!
Credo che il problema di fondo nasca dall’aver assegnao “display:inline” ad un blocco di tipo list-item. Suppongo che così facendo si introducono una serie di bug tra cui il fatto che inizia considerare gli spazi tra i vari elementi “li”. E il browser non dovrebbe farlo.
Questi menu orizzontali vengono solitamente implementati trami la proprietà float del CSS.
<li style="float:left">item1</li>
<li style="float:left">item2</li>
dovrebbe visulizzarli uno a fianco dell’altro. E conservi la possibilità di agire sui margini perchè gli elementi
<li>rimandono di tipo blocco e non inline.La proprietà è un pò ostica, bisogna stare attenti soprattutto con il maledetto IE6.
Vi do un ultimo consiglio: consoscete FireBug? Se non lo avete installato installatelo immediamente. E’ un plugin per firefox che consente di leggere e manipolare agevolmente l’HTML, CSS, JavaScript (consente persino il debu!) della pagina, piu’ altre utilissime cose (ad esempio monitoraggio delle richiesta AJAX).
Ok, però il problema è anche che… Il problema non ci deve essere! Semplicemente per il fatto che per centrare i float è un po’ più lunga la faccenda, e se io voglio avere gli elementi inline devo poterlo fare! Se floati a sinistra non ottieni nulla, perché di quello ce ne sono a bizzeffe su listamatic.
Il problema è proprio la centratura. In realtà avevo visto anche un metodo per centrare coi float online, ma è un po’ macchinoso in un certo senso.
Grazie per Firebug, la conoscevo già (la uso tantissime volte, non potrei farne a meno).
Usando “margin: 0 auto” si riesce generalmente a centrare un box di tipo block, tuttavia effettivamente rimane difficoltoso far si che gli item siano centrati all’interno dello stesso.
Per quanto riguarda il tuo ingegnoso workaround, se posso permettermi io lo proverei a riscrivere cosi’:
<div id="navcontainer">
<ul id=”navlist”>
<li><a href=”#” id=”current”>Elemento 1</a></li><!--
--><li><a href=”#”>Elemento 2</a></li><!--
--><li><a href=”#”>Elemento 3</a></li><!--
--><li><a href=”#”>Elemento 4</a></li><!--
--><li><a href=”#”>Elemento 5</a></li><!--
--><li><a href=”#”>Elemento 5</a></li><!--
--><li><a href=”#”>Elemento 5</a></li><!--
--></ul>
</div>
Ma certamente è questione di gusti!
Grazie ottimo articolo mi è stato d’aiuto !
Saluti
Sono molto felice di essere stato d’aiuto a chi lavora con software libero!
grazie per l’aiuto, un saluto
Oltre l’accessibilità W3C, voglio verificare oltre al browser di Explorer, Firefox e Safari se si vede bene nello stesso modo di explorer.
Comunque bravo Andrea.
nice tutorial, you blog is very helpfull for me.