LISTE 1 - Cette liste passe très bien sous mozilla ou opéra, mais pas très bien sous Internet Explorer. On a pas défini de hauteur de ligne, et on a mis une instruction display:block, pour que l'effet de survol s'applique sur toute la largeur de la ligne. Mais un bug de IE sur display:block fait alors apparaître un espace parasite en dessous de chaque ligne. Il faut donc soit exclure le display:block, soit définir une hauteur de ligne. Cette seconde solution mêne à la liste 2. Il y a un autre bug, qui inclus la puce dans l'effet de survol, mais seulement sour IE 5.x.
LISTE 2 - Cette liste est identique à la liste 1. On a juste rajouté une hauteur de ligne de 1.1em dans la class "liste2". Cela passe très bien sous tous les navigateurs récents (ie5.0 et plus, opéra, mozilla).
LISTE 3 - Cette liste est identique à la liste 2. On a juste augmenté la hauteur de ligne de 1.1em à 2.5em dans la class "liste3". Et de nouveau, nous somme confronté à un bug d'Internet Explorer : celui-ci cale le texte en haut de la ligne, et la puce en bas de la ligne. C'est très laid. C'était insensible avec une faible hauteur de ligne (liste2), mais cela devient criant avec une forte hauteur de ligne.
LISTE 4 - Cette liste est identique à la liste 3. Mais au lieu de définir une hauteur de ligne, on a mis un padding (marge intérieur haute). Le résultat est le même que dans "liste3" (la hauteur de ligne est augmentée), mais le problème de décalage du texte par rapport aux puces propre à IE est réglé.
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
ul, li, a {padding:0px ; margin:0px} /*met à 0 les marges internes
et externes de la liste et des liens */
/* début des styles communs à toutes les listes */
.liste {list-style-type:square ; /* les puces sont carrées */
padding-left:2em ; /* il y a une marge intérieure gauche de 2 em
*/
width :20em ; /* largeur de la liste : comme 20 em
*/
border:1px solid black} /* la liste à un encadrement noir de 1 pixel
*/
.liste li a {color:black ; /* la police est noir */
text-decoration:none ; /* on suprime le soulignement des liens */
display:block ; /* force le lien à prendre 100% de la largeur de
la liste */
border-bottom :1px solid red} /* bordure basse rouge */
.liste li a:hover {background-color:black ; /* au survol, la couleur de
fond du lien passe au noir */
color:white} /*au survol, la couleur de la police du lien passe au blanc
*/
/* fin des styles communs à toutes les listes */
.liste2 li a {height:1.1em} /* hauteur du lien dans la liste : 1,1 em*/
.liste3 li a {height:2.5em} /* hauteur du lien dans la liste : 2,5 em
*/
.liste4 li a {padding-top:10px} /* le lien a une marge intérieur
haute de 10 px */
</style>
</head>
<body>
<ul class="liste"> <!-- exemple 1 -->
<li><a href="#">liste1 - menu 1</a></li>
<li><a href="#">liste1 - menu 2</a></li>
<li><a href="#">liste1 - menu 2</a></li>
<li><a href="#">liste1 - menu 4</a></li>
</ul>
<ul class="liste liste2"> <!-- exemple
2 -->
<li><a href="#">liste1 - menu 1</a></li>
<li><a href="#">liste1 - menu 2</a></li>
<li><a href="#">liste1 - menu 2</a></li>
<li><a href="#">liste1 - menu 4</a></li>
</ul>
<ul class="liste liste3"> <!-- exemple
3 -->
<li><a href="#">liste1 - menu 1</a></li>
<li><a href="#">liste1 - menu 2</a></li>
<li><a href="#">liste1 - menu 2</a></li>
<li><a href="#">liste1 - menu 4</a></li>
</ul>
<ul class="liste liste4"> <!-- exemple
4 -->
<li><a href="#">liste1 - menu 1</a></li>
<li><a href="#">liste1 - menu 2</a></li>
<li><a href="#">liste1 - menu 2</a></li>
<li><a href="#">liste1 - menu 4</a></li>
</ul>
</body>
</html>
COMMENTAIRES
On voit que les listes avec puces (ou avec numéros, si la liste est gérée par un <ol> et non par un <ul>) ne sont pas aussi simples qu'il y parait. Elles passent très bien dans les navigateurs Gecko (Firefox, Mozilla,...) et dans Opéra, mais IE a plusieurs bugs génants.
Les listes 1, 2 et 4 sont utilisables. Il faut juste être conscient de leurs petits défauts sous Internet Explorer, et choisir celle qui colle le mieux à ses besoins. La liste de Type 3 est inutilisable.
Vous pouvez faire varier l'apparence des puces de la liste avec l'instruction list-style-type:, laquelle supporte aussi 3 apparences : list-style-type:circle (cercle vide), list-style-type:disc (cercle plein) et list-style-type:square (carré). Pour en savoir plus.
On note qu'on utilise ici à chaque fois une combinaison de 2 classes : une classe de base, et une classe spécifique à chaque liste. Pour en savoir plus sur les combinaisons de classes. Pensez bien que dans votre code, vous devez "coller" le code CSS de la liste qui vous convient avec le code CSS général de la classe de base.
Pour avoir des idées sur les habilages possibles : listamatic.