Con una semplice regola CSS, è possibile utilizzare qualsiasi background-image che si desidera come un proiettile per una lista non ordinata. Ecco come farlo.

istruzione

1

L'immagine presenta un elenco puntato normale prima di tutte le regole CSS vengono applicate ad esso.

2 Non c'è bisogno di cambiare nulla del HTML che ha creato la lista. È sufficiente utilizzare i CSS per modificarne l'aspetto.

3 Preparare la grafica che verrà utilizzato come immagine di sfondo. In questo esempio ho usato un grafico che è di 15 pixel di larghezza e 48 pixel di altezza. L'immagine viene centrata verticalmente al centro dei 48 pixel. E 'importante per centrare l'immagine e rendere l'immagine più alta che ci si aspetta di bisogno. Capirete perché in un attimo.

4 Scrivere le regole CSS che aggiungeranno il grafico alla vostra lista. Con il selettore essendo LI, è necessario impostare la list-style a nessuno. Che rimuove il proiettile normale. Successivamente aggiungere una regola per lo sfondo LI. Dare l'URL dell'immagine, impostare di non ripetere, poi posizionarlo a sinistra in orizzontale e in verticale al centro. Infine, aggiungere un po 'padding-left per fare spazio per l'immagine a sinistra di ogni voce dell'elenco.

Ecco la regola CSS:

li {

list-style: none;
background: url(bullet.gif) no-repeat left center;
padding-left: 20px;

}

5


Si consiglia inoltre di manipolare il posizionamento dell'intera lista in relazione al lato sinistro del suo contenitore o in relazione alla posizione di ciascun elemento dell'elenco.

Ecco una regola che ho usato in questo esempio:

ul {

padding: 5px;

}

L'immagine mostra la lista finito.

6


Ho promesso di spiegare perché la grafica dovrebbe essere più grande in altezza del previsto ad avere bisogno. Molti utenti devono aumentare le dimensioni del testo nelle pagine web al fine di leggerlo. Volete che il vostro grafico a rimanere sul posto anche quando il testo viene ingrandita. Fino a quando le voci di elenco non ottengono così grandi che necessitano di due linee per la visualizzazione, l'immagine di sfondo rimane in posizione. Vedere l'immagine per una visualizzazione dell'elenco ampliato tre volte.

Consigli e avvertenze

• C'è un metodo di utilizzo di un proiettile grafica in una voce di elenco che sostituisce il proiettile normale con un'immagine utilizzando la proprietà list-style. Utilizzando la proprietà list-style per aggiungere un carico grafico l'immagine nel codice HTML dove potrebbe essere dato alt text. Dal momento che il proiettile è puramente decorativo, è meglio usare questo esempio, mettendolo sulla pagina come immagine di sfondo quindi non c'è alcun problema se o non dare il testo dell'immagine alt.