E se volessi usare più di un’immagine per gli elementi di una sola lista?

Utente HTML.it
chiede

E se volessi usare più di un’immagine per gli elementi di una sola lista?

Redazione HTML.it
risponde

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:

<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:

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:

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}