mattya1996 |
|
| Anche qui ci sono due modi. In entrambi i casi, sarà necessario attribuire nell'HTML classi o, ancora meglio id, ai singoli elementi della lista. Ecco l'HTML essenziale per un menu di navigazione realizzato con una lista non ordinata: CODICE <ul id="navigation"> <li id="home"><a href="#">Home Page</a></li> <li id="prodotti"><a href="#">Prodotti</a></li> <li id="contatti"><a href="#">Contatti</a></li> </ul> Il primo metodo è usare la proprietà list-style-image, che si applica anche ai li oltre che alle liste: CODICE li#home{list-style-image: url(casetta.gif)}
li#prodotti{list-style-image: url(prodotti.gif)}
li#home{list-style-image: url(email.gif)} Il secondo metodo è usare il background, ecco il CSS di esempio: CODICE ul#navigation{list-style-type: none;margin: 0;padding: 0}
ul#navigation li{padding-left: 10px}
li#home{background: url(casetta.gif) no-repeat left center}
li#prodotti{background: url(prodotti.gif) no-repeat left center}
li#contatti{background: url(email.gif) no-repeat left center} |
| | |
