Les exemples de cette page remplacent les puces CSS gérées par list-style-type: par des images. Les listes sont entourées par une bordure, ce qui n'est pas très joli, mais facilite la compréhension de l'affichage CSS.
Les exemples ci-dessous ont des habillages assez sommaires. Il visent surtout
à bien conprendre les fonctionnements possibles des listes avec images.
Pour avoir des habillages, vous pouvez regarder les autres parties de ce site,
en particulier les boutons, ou aller sur listamatic.
LISTE 1 - Cette liste passe très bien sous mozilla, opéra, ou Internet Explorer 5.0 et supérieur. 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.
LISTE 2 - Cette liste est identique à la liste 1. On a juste rajouté
une hauteur de ligne de 3em dans la class "liste2".
On a aussi changé l'image, ce qui n'a aucune importance pour la compréhension
du script, mais permet d'avoir un autre exemple de puce par image.
Cela passe très bien sous Opéra ou Mozilla / Firefox, mais IE
(5.x ou 6.0) a un bug : la puce est centrée verticalement (c'est logique),
mais le texte est aligné en haut, donc pas en face de la puce. C'est
très laid.
Or il n'y a pas de fonction de centrage vertical du texte qui marche en CSS
sous IE (celui-ci ne reconnait pas la fonction display:table-cell qui
est alors indispensable).
LISTE 3 - Cette liste est identique à la liste 2. Pour régler le
bug de IE, on a remplacé la hauteur de ligne par un padding (marge
intérieure) haut et un padding bas. Ce n'est pas un vrai centrage,
mais cela en donne l'illusion. Cela passe alors très bien sous tous
les navigateurs récents (Opéra, Mozilla / Firefox, IE 5.0 et
supérieurs).
Mais cela ne règle pas tout. Si on veut faire un menu dont la hauteur
de chaque ligne sera en %, ce "truc"
ne marche pas. Compte tenu de l'impossibilité de centrer verticalement
sous Internet Explorer, ce problème est insoluble, sauf en utilisant
une mise en page ou chaque ligne du menu sera dans une ligne de table. C'est
l'exemple suivant.
LISTE 4 - Cette "liste" n'en est pas vraiment une, puisque
les balises <ul> et <li> ne sont pas utilisées.
Il s'agit d'un menu par table, qui est la seule facon que je connaisse sous
IE pour gérer une hauteur de ligne (en %, en pixel, en em,...) ET centrer
verticalement.
En HTML / CSS, on ne peut en effet centrer verticalement que dans une table,
pas dans une boite CSS.
Il existe donc une fonction CSS display:table qui (couplée avec
vertical-align:middle) permet de "forcer" ce comportement
dans une boite CSS, donc dans une vrai liste <ul>, mais, compte
tenu du mauvais support de CSS d'Internet Explorer, elle ne marche pas sous
IE6.0 et inférieur.
Ce système avec table passe par contre sous tous les navigateurs, mais
a 3 inconvénients : comme vous le verrez plus bas, le code est plus
compliqué ; il est plus lourd (donc plus lent à charger) ; il
utilise des tables, qui ne sont normalement pas à utiliser pour la
mise en page.
En bref, ne l'utilisez pas si vous n'avez pas impérativement besoin
d'une hauteur de ligne définie ET d'un centrage vertical. Privilégiez
si possible les exemples 1 et 3.
| liste4 - menu1 |
| liste4 - menu1 |
| liste4 - menu1 |
LISTE 5 - Cette liste est une variante de l'exemple 3. Au lieu d'utiliser
la fonction CSS list-style-image:, on utilise la fonction CSS background-image:.
Pour en savoir plus sur cette fonction.
Il y a 2 avantages : on peut avoir des effets de répétition
de la puce (fonction background-repeat: ), et surtout, on peut plus
facilement faire un encadrement autour de chaque <li>, avec la
puce à l'intérieur du-dit encadrement. Cela permet essentiellement
d'avoir des effets (en utilisant 2 images, une sur le a: et une sur
le a:hover) comme celui-ci.
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
/* début des styles communs à toutes les listes */
ul.liste, li, a {padding:0px ; margin:0px} /*met à 0 toutes les
marges, intérieures et extérieures */
.liste {border:1px solid black ; /* met 1 bordure noir de 1 px autour
de chaque ligne */
width:20em ;} /* largeur de la liste - voir les em
*/
.liste a { /* défini les liens dans les listes, sans survol */
display:block ; /* force le lien à prendre 100% de la largeur de
la liste */
text-decoration:none ; /* on suprime le soulignement des liens */
color:black} /* couleur du texte : noir */
.liste a:hover {/* défini les liens dans les listes, lors des survols
*/
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 */
.liste1 { /* définitions spécifiques à la liste 1
*/
margin-left:3em ; /* marge droite en em
*/
list-style-image:url(../francais2.gif)} /* image faisant le bouton */
.liste2 { /* définitions spécifiques à la liste 2
*/
margin-left:3em ; /* idem liste 1 */
list-style-image:url(../bouton.gif)} /* image faisant le bouton */
.liste2 a {height:3em} /* hauteur des liens (donc des lignes) en em
*/
.liste3 { /* définitions spécifiques à la liste 3
*/
margin-left:3em ; /* idem liste 1 */
list-style-image: url(../bouton.gif)} /* idem liste 2 */
.liste3 a {padding:1em 0 1em 0} /* marges intérieures hautes et
basses des liens (donc hauteur des lignes) en em
*/
/* début de la définition des styles propres à la
liste (en table) 4 */
table {height:20em ; /* hauteur de la table (donc de la "liste")
*/
border-collapse: collapse} /* les bordures qui se touchent fusionnent,
pour ne faire qu'1 pixel, et non 2 */
table, tr, td {padding:0 ; margin:0} /* marges intérieures et extérieures
à 0 pour la table, ses lignes et ses cellules */
td.liste4 {padding-left:2em ; /* chaque ligne a une marge intérieure
gauche de 2 em */
height:33% ; /* chaque ligne a une hauteur de 33% de la hauteur de la table
*/
background:url(../bouton2.gif) no-repeat left} /* image DE FOND faisant
le bouton */
td.liste4 a {vertical-align:middle} /* Chaque lien est centré verticalement
dans les cellules */
/* fin de la définition des styles propres à la liste (en
table) 4 */
.liste5 { /* définitions spécifiques à la liste 3
*/
padding-left:40px ; /* marge intérieure gauche pour affichage
du bouton */
background:url(../francais2.gif) no-repeat left ; /* image DE FOND faisant
le bouton */
list-style-type:none} /* supprime les boutons CSS */
.liste5 a {padding:20px 5px 20px 0px} /* Marges intérieures des
liens de la liste */
</style>
</head>
<body>
<ul> <!-- Liste 1-->
<li class="liste liste1"><a href="#">liste1
- menu1</a></li>
<li class="liste liste1"><a href="#">liste1
- menu2</a></li>
<li class="liste liste1"><a href="#">liste1
- menu3</a></li>
</ul>
<ul><!-- Liste 2-->
<li class="liste liste2"><a href="#">liste2
- menu1</a></li>
<li class="liste liste2"><a href="#">liste2
- menu2</a></li>
<li class="liste liste2"><a href="#">liste2
- menu3</a></li>
</ul>
<ul><!-- Liste 3-->
<li class="liste liste3"><a href="#">liste3
- menu1</a></li>
<li class="liste liste3"><a href="#">liste3
- menu2</a></li>
<li class="liste liste3"><a href="#">liste3
- menu3</a></li>
</ul>
<table><!-- Liste 4, sous forme de table -->
<tr><td class="liste liste4"><a href="#">liste4
- menu1</a></td></tr>
<tr><td class="liste liste4"><a href="#">liste4
- menu1</a></td></tr>
<tr><td class="liste liste4"><a href="#">liste4
- menu1</a></td></tr>
</table>
<ul><!-- Liste 5-->
<li class="liste liste5"><a href="#">liste5
- menu1</a></li>
<li class="liste liste5"><a href="#">liste5
- menu2</a></li>
<li class="liste liste5"><a href="#">liste5
- menu3</a></li>
</ul>
</body>
</html>
COMMENTAIRES
On voit que les listes avec images sont assez prochent de celles avec puce CSS mais sans images. Elles passent très bien dans les navigateurs Gecko (Firefox, Mozilla,...) et dans Opéra, mais IE a plusieurs bugs génants.
Toutes les listes ci-dessus, sauf la 2, sont utilisables. Il faut juste être conscient de leurs petits défauts sous Internet Explorer, et choisir celle qui colle le mieux à ses besoins.
Vous avez noté qu'on a choisi de définir la hauteur des lignes en stylant les liens <a>, et non les <li>. En fait, les 2 sont possibles. Simplement, choisir de dimmensionner le <a> permet, couplé avec un display:block, d'avoir un effet de survol sur tout le bloc. Si on style <li>, l'effet de survol ne portera que sur une partie du block, celui contenant le lien <a>.
Dans la liste 5, on supprime l'affichage des puces "CSS standard", ce qu'on a pas fait dans les autres listes. En effet, les autres listes utilisaient des puces "images", qui désactivent automatiquement les puces "CSS standard". Mais dans la liste 5, on utilise pas les puces "images", mais des images de fond. Dès lors, il faut penser à désactiver les puces "CSS standard".
On utilise ici à chaque fois une combinaison de 2 classes (pour alléger le code) : 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 définitif, vous devez "coller" le code CSS de la liste qui vous convient avec le code CSS général de la classe de base.