Tab grafiche centrate: una ripresa

Nell'articolo Tab Grafiche Centrate abbiamo visto un modo
per ottenere un menu orizzontale centrato con grafica e CSS in cui ogni voce
del menu si adatta al suo contenuto.

Una delle richieste più gettonate dei lettori è stata su come ottenere
un menu centrato in cui le voci abbiano la stessa larghezza:
è proprio questo l'argomento di questo articolo.

Eccoci subito all'esempio che accompagna l'articolo, e al suo screenshot:

Anzitutto vediamo il codice HTML. Si tratta
di una semplice lista ordinata di link racchiusa in un div id="menu". Da notare
anche che al list-item li a cui corrisponde la tab aperta viene assegnata la classe
"active". Ecco il codice:

Per quanto riguarda la grafica del menu, si è usata una sola immagine che combina lo stato
normale e quello attivo/hover. Ciascuna delle due porzioni verticali è larga quanto un link del menu, ovvero 100x30 pixel:

Siamo pronti a procedere a questo punto con il CSS dell'esempio, che è abbastanza semplice e leggero.
Vediamolo per intero:

Per il div contenitore del menu viene specificato un padding superiore, il
colore di sfondo e un bordo inferiore di 5px. La dichiarazione chiave riguarda
l'allineamento del testo centrato ottenuto con text-align:center
che ha un duplice scopo: centrare l'intero menu su IE5.x e centrare il testo
di ogni singolo link. Con la seconda regola si azzerano margini, padding e marcatore da lista
e list-item.

A questo punto si specifica la larghezza del menu, che è pari a 408px: ciascun
link è infatti largo 100px, ma verrà poi attribuito un padding orizzontale di 1px sui
due lati così da separare le voci del menu. Viene poi stabilita l'altezza, pari
a quella dei singoli link, e i margini sono impostati sul valore "0 auto"
così da consentire la centratura orizzontale della lista all'interno del div.

I list-item vengono resi float, così da poterli affiancare, e viene definito
un padding orizzontale di 1px. La parte centrale è quella che riguarda i link:
verranno resi float, così da potergli attribuire esplicitamente larghezza e
altezza di linea, e viene specificata l'immagine di sfondo.

Per la voce attiva e lo stato :hover dei link l'immagine di sfondo viene
traslata di 30 pixel verso l'alto così da mostrare la porzione di immagine
relativa. Infine, il testo della tab attiva viene reso in grassetto.

Come si può notare l'implementazione del menu è abbastanza semplice.
Il fatto che i link abbiano larghezza fissa è d'aiuto per quanto
riguarda la gestione dello sfondo, a differenza di quanto fatto
ad esempio nel menu con tab grafiche
o nel menu con tab centrate citato in apertura.
Un piccolo accorgimento è però necessario: dato che le tab hanno larghezza fissa e non si adattano
al contenuto, è consigliabile verificare la loro resa corretta anche nel caso in cui si aumenti la
dimensione del carattere del browser. Lo screenshot di seguito riproduce una tab
dell'esempio con il carattere impostato su molto piccolo e su
molto grande in Internet Explorer:

In conclusione, vale la pena di riepilogare i passi necessari per la centratura: i link avranno dimensioni fisse,
e la lista che li contiene avrà anch'essa larghezza e altezza prestabiliti, oltre che i margini
orizzontali impostati sul valore "auto". Il div che contiene tutto, infine, avrà il testo
centrato, così da permettere la centratura su IE5.x e al contempo il corretto allineamento del testo
dei link.

Il nostro esempio è così ultimato: con una sola immagine
e poche regole CSS semplici e logiche abbiamo ottenuto un risultato stabile con una buona
compatibilità cross-browser: è stato infatti testato su IE dalla versione 5 alla 7, oltre
che sulle ultime versioni di Firefox, Opera e Safari.

L'esempio è disponibile per il download. Alla prossima.