CSS: da lista puntata a tab.

Loading

In questo articolo vogliamo illustrare quali sono i passi per passare da una lista puntata ad un serie di tab.

Per semplicità realizzeremo dei tab quadrati, ma niente vieta di farli stondati.
Per prima cosa scriviamo l’HTML e passo passo aggiungiamo le regole CSS.


Una semplice lista puntata con al suo interno 6 elementi, ognuno dei quali contiene un link.

Ora aggiungiamo le regole CSS.
Per prima cosa operiamo sul tag ul (id tabs)

#tabs{
    margin:0;
    padding:0;
    border-bottom:5px solid #300;
    list-style:none;
    height:25px; /*notare*/
    margin-top:15px;
}

Con questo codice abbiamo rimosso margini e padding, poi abbamo eliminato i “puntini” dagli elementi della lista.
Di quel height:25px ne parleremo dopo.

Poi abbiamo agito sugli elementi della lista:

#tabs li{
    display:block;
    float:left;
    border:#300 1px solid;
    border-bottom:0;
    margin:0;
    margin-right:4px;
    padding:1px;
}

Abbiamo assegnato il display block, e li abbiamo resi flottanti a sinistra. Per eliminare il bordo inferiore abbiamo usato border-bottom:0; dopo aver dichiarato border:#300 1px solid;. Il risultato sarà un bordino sui tre lati di ciascun <li>.
Inoltra abbiamo assegnato un padding di 1px.

Ora lavoriamo su i link:

#tabs li a{
    display:block;
    padding:2px 10px;
    font-weight:bold;
    color:#bbb;
    text-decoration:none;
    font-size:18px;
    line-height:18px;
}

#tabs li a:hover{
    color:#fff;
    background-color:#300;
}

Ora chiariamo la dichiarazione height:25px lasciata in sospeso (#tabs).
Innanzi tutto notiamo che gli li contenuti nell’ul in questione hanno un display block e un float left, questo fa si che escono dal flusso dell’html, se non avessimo dato l’altezza il bordo sarebbe andato a finire sotto ai tab (cosa non molto bella). I 25 pixel dell’altezza vengono furori dal seguente calcolo (prendere carta e penna)..

#tabs li a -> line-height: 18 + padding-top: 2 + padding-bottom:2 = 22
#tab li -> padding-top:1 + padding-top:1 + border-top:1 = 3 + #tabs li a:22 = 3 + 22 = 25!!

Poiche ogni li contene un link alto 22px e lo contorna con 3 px tra bordo e padding il totale dello spazio si ottiene facendo la somma.

La dichiarazione:

#tabs li{
    padding:1px;
}

Fa si che quando andiamo su un link e cambia lo sfondo dello stesso resta un bordino bianco.

Ora è il momento di vedere il risultato! e il codice soregente per intero.