In questa lezione realizzeremo un menù tabellare con le immagini personalizzato tramite i CSS.

Innanzitutto creiamo una nuova pagina in formato HTML e chiamiamola tabellareImmagini.html

All'interno dei tag body inseriamo una lista di link ordinata.


A questo punto realizziamo all'interno della pagina e non come documento esterno una una serie di regole css che determinano la rappresentazione grafica di questi link.

La prima regola sarà un tag div che rappresenta un contenitore per tutti i link. Il nome di questo id è Tabellare ed ha come colore di sfondo un grigio scuro, un orientamento verso sinistra ed una larghezza che occupa il 100% della pagina.

#Tabellare {
background-color: #333333;
float: left;
width: 100%;
}

Ora realizziamo una regola che determina le caratteristiche del tag ul all'interno dell' id Tabellare. Quì toglieremo i puntini davanti agli elementi della lista e definiremo la spaziatura interna degli elementi che sarà di 20 pixel dall'alto, di 3 pixel dal basso, di 3 pixel da sinistra e nessun pixel da destra.

#Tabellare ul {
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 3px;
list-style-type: none;
}

A questo punto mettiamo in linea le singole voci contenute nell'elenco che a sua volta è contenuto nell' id Tabellare. In pratica agiamo sul tag li che è incluso nel tag ul quando è contenuto nell' id Tabellare.

#Tabellare ul li {
display: inline;
}

Continuando su questa tipologia di modifica realizziamo una regola che ci consenta di personalizzare gli elementi che corrispondono ad un collegamento e che sono presenti come voci di un elenco contenute nell' id Tabellare. Questo vuol dire che agiamo sul tag a presente all'interno del tag li di una lista ordinata tag ul contenuta nell' id Tabellare. Questa regola definisce che gli elementi specificati avranno un margine sinistro di 10 pixel, non avranno nessun tipo di decorazione nel testo, una spaziatura interna superiore di 3 pixel, sinistra di 20 pixel, destra di 20 pixel ed inferiore di 3 pixel, un immagine di sfondo raggiungibile nella cartella Images e chiamata RettangoloGrigio.gif che non verrà ripetuta e sarà posizionata in alto ed allineata a sinistra.

#Tabellare ul li a {
text-decoration: none;
padding-top: 3px;
padding-right: 20px;
padding-bottom: 3px;
padding-left: 20px;
margin-left: 10px;
background-image: url(Images/RettangoloGrigio.gif);
display: block;;
float: left;
background-repeat: no-repeat;
background-position: left top;
}

Ora sempre per il tag a definiamo il comportamento sia quando è un link sia quando è un link visitato. Quando si verificano queste due circostanze il colore deve essere rosso.

#Tabellare ul li a:link, #Tabellare ul li a:visited {
color: #FF0000;
}

Mentre quando passeremo con il cursore del mouse sopra il precedente tag a , l'immagine di sfondo verrà sostituita con un altra raggiungibile nella cartella Images e chiamata RettangoloGiallo.gif

#Tabellare ul li a:hover {
background-image: url(Images/RettangoloGiallo.gif);
}

Inoltre quando il collegamento rappresenta la pagina corrente l'immagine di sfondo verrà sostituita con un altra raggiungibile nella cartella Images e chiamata RettangoloVerde.gif

#Tabellare ul li.current a:link {
background-image: url(Images/RettangoloVerde.gif);
}

Definite tutte le regole racchiudiamo il codice definito all'inizio della lavorazione all'interno del tag div che richiama la regola Tabellare ed il gioco è fatto.

COMMENTI