Come si formatta graficamente una lista

Una piccola lezione per te che sei alle prime armi e magari vuoi migliorare l’appeal grafico del tuo elenco. Tramite i css puoi formattare graficamente come credi la tua lista di elementi. Vediamo insieme come farlo.

Appurato e assodato che una lista di elementi si scrive nel codice NON in questo modo:

<p style="padding-left: 20px;"><img src="https://www.laurynlabs.it/wp-content/uploads/2014/10/punto.png" alt="punto" width="10" height="10" /> Testo dell'elemento...</p>

Ma tramite il codice html che evidenzia la lista:

<ul>
    <li>Testo dell'elemento....</li>
</ul>

E scrivere poi invece nel css la regola:

li {

    padding-left: 20px;
    background: transparent url('https://www.laurynlabs.it/wp-content/uploads/2014/10/punto.png') no-repeat 0 0;

    list-style: none; /* questo serve per togliere gli stili di default */

}

Sostituisci all’immagine quella che desideri, aggiusta un po’ il padding e via! Ecco una lista formattata a dovere.
Non devo spiegarti perché non si usa il paragrafo vero? E nemmeno perché si usano i css invece che le immagini in linea, isn’t it right?

Lauryn

Laura Gargiulo, web designer freelance e blogger.
Autrice di “Come diventare web-coso” e “Consigli di webdesign base“,
moglie dal dicembre 2010 e madre dal dicembre 2012.
Portfolio personale: Lauryn.it
Parlo anche di viaggi ed expat su: Myplaceintheworld.it e do consigli su come espatriare a Edimburgo sul mio blog Lovin’Edinburgh

http://www.lauryn.it