CSS  »  Articoli  »  Effetti con CSS 

Chi ci ha provato lo sa: posizionare in maniera consistente e cross-browser un'icona o un marcatore grafico personalizzato nelle liste non è cosa semplice, soprattutto per come i diversi browser trattano margini e padding di liste e list-item. Inoltre, la proprietà list-style-image che consente di specificare il marcatore grafico delle liste offre risultati poco soddisfacenti, dato che il più delle volte il bullet non risulta perfettamente allineato con il testo.

Le cose si complicano ancora di più se il testo delle nostre liste usa un dimensionamento relativo, sia esso in em o in percentuale. Ci sono soluzioni efficaci e cross-browser anche in questo caso? Le scopriremo in questo articolo attraverso tre esempi. Cominciamo subito.

Bullet grafici su list-item con una riga sola

Ecco il nostro primo esempio: una lista con un'icona centrata. Come si può notare, ridimensionando il testo del browser, l'icona resta centrata. Questa tecnica impone però un vincolo: ciascun elemento della lista dovrà occupare al massimo una riga. Dopo aver attribuito la classe "icon" alle liste a cui vorremo attribuire il marcatore grafico, basteranno poche regole CSS.

Per prima cosa eliminiamo il disco, margini e padding da lista e list-item:

Attribuiamo quindi una larghezza alla lista. Nel caso dell'esempio ho definito un valore pari a 15em, che dovrebbe essere all'incirca 30 caratteri, ma ovviamente si possono usare pixel o altre unità di misura:

Infine definiamo le proprietà sui list-item: dopo aver dichiarato un'altezza di linea adeguata, assegneremo un padding sinistro di 12px così da poter lasciare spazio all'icona (che è 8x8) che verrà specificata attraverso la proprietà background:

Il primo esempio è così ultimato: sono bastate poche semplici dichiarazioni. Da notare che nella pagina ho predisposto anche una lista con una personalizzazione CSS davvero minima, così da evidenziare come si è tra l'altro messo a punto l'allineamento orizzontale con altri elementi e margini/padding della lista di base. Il risultato è soddisfacente, quello che vorremmo è però non avere il limite di una riga sola, che verrà superato nei prossimi due esempi.

Altri articoli

Altre guide

Altre newsletter