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.

37 pensieri su “Lista orizzontale centrata (CSS)

  1. 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?

  2. 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 linux
    e ora il pre:
    sudo apt-get install –reinstall linux

  3. @ aldolatino, (a parte i complimenti per il nuovo nick🙂 … ) uso abitualmente quello. Tuttavia si comporta un po’ come gli pare.😛

  4. ah, il nick!😀
    quello lo uso nell’account wordpress.com… mi serve per la mia dashboard. Comunque aldolat è ancora vivo e vegeto!😛

  5. 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).

  6. 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).

  7. 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!

  8. Pingback: 2010 in review « Il blog di Andrea Lazzarotto

  9. 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.

  10. … ma per centrare una barra di condivisione (come quella nel mio Blog), come caspita si deve fare ? Anche in considerazione di un gergo alfanumerico umano🙂 Grazie

  11. Nel tuo blog ci sono numerose barre, se vuoi un consiglio specifico dovresti dirmi l’id dell’elemento di cui stai parlando.😉 E comunque non ho capito questa parte: “in considerazione di un gergo alfanumerico umano”.

  12. Ti prego di aiutarmi è tutto il giorno che tento di centrarlo ma non riesco…. Questo è il css:

    #main-nav {
        position: relative;
        z-index: 9998;
        font: bold 15px Helvetica, Arial, sans-serif;
        border: 1px solid #fff;
        margin-bottom: 8px;
        background: #fff url(images/bg-mainnav.png) repeat-x left bottom;
    }
    
    #main-nav li {
        border-right: 1px solid #fff;
        display: inline;
    }
    
    #main-nav a {
        padding: 5px 20px 2px;
        line-height: 30px;
        color: #2B3F62;
        border-bottom: 4px solid #7D99CA;
    }
    
    #main-nav a:hover, #main-nav li.current_page_item a, #main-nav li.current_page_parent a {
        border-bottom-color: #2c70c9;
        color: #000;
        text-decoration: none;
    }
    
    #main-nav a:hover, #main-nav li.current-cat a, #main-nav li.current-cat a {
        border-bottom-color: #0a0a85;
        color: #000;
        text-decoration: none;
    }
    
  13. Per favore se posti del codice postalo almeno con i tag <pre>… Comunque non ti basta fare un semplice text-align: center sulla lista, come accade tra l’altro nel codice dell’articolo?

  14. comunque ho provato anche a metterlo nella lista ma niente

    Sinceramente devo dissentire su questo. Come puoi vedere cliccando qui il tuo codice, con la semplice aggiunta di text-align: center; sulla lista, fornisce un menu centrato orizzontalmente.🙂 Poi ok, sarebbe anche da azzerare il padding per evitare che tenda lievemente verso destra, ad ogni modo è centrato.

  15. Ho copiato esattamente il codice che gentilmente mi hai testato… L’avevo comunque già inserito in precedenza… Ti assicuro che non si allinea e non capisco perchè.

  16. Evidentemente hai altre proprietà CSS che sovrascrivono qualcosa della tua lista. Ti basta verificare con Firebug o i developer tools di WebKit.🙂

  17. Ho controllato su tutte le stringhe del menù NAV ma niente. Potrebbe essere sovrascritto da qualche altro menù o da qualche altra funzione?

  18. Non so cosa tu intenda con “funzione”, visto che non esistono funzioni in CSS, comunque come ti dicevo fai molto prima ad aprire Firebug e vedere se c’è qualche selettore con una proprietà che ti sovrascrive l’allineamento.

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...