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.