Ecco come è possibile usare un'immagine come marcatore di un list item.
Codice:
ul.lista1 {
list-style-image : url(list.gif);
}
Notate nell'esempio la posizione del testo.
Codice:
ul.lista2 li {
list-style-position : inside;
}
Qui il comportamento è quello standard.
Codice:
ul.lista3 li {
list-style-position : outside;
}
Codice:
ul.listadisc li {
list-style-type : disc;
color: red;
}
Codice:
ul.listacircle li {
list-style-type : circle;
}
Codice:
ul.listasquare li {
list-style-type : square;
}
Codice:
ol.listadecimal li {
list-style-type : circle;
}
Codice:
ul.listadecimal li {
list-style-type : decimal;
}
Codice:
ol.listalower li {
list-style-type : lower-roman;
}
Codice:
ol.listaloweralpha li {
list-style-type : lower-alpha;
}
Per dimostrare che lower-alpha e lower-latin sono la stessa cosa. Su Explorer o Opera vedrete dei numeri ma è sbagliato, con Mozilla tutto va bene.
Codice:
ol.listalowerlatin li {
list-style-type : lower-latin;
}
Codice:
ul.lista4 li {
list-style : square inside;
}
Codice:
ul.lista5 li {
list-style : url(list.gif) outside;
}