Formatage des listes avec les propriétés CSS

A titre de rappel, on entend par les listes, les balises permettant d'insérer une liste numérotée (ordonnée) ou une liste à puces (liste non ordonnée). Voici un tableau récapitulatif :

Vous pouvez agir sur l'apparence des listes en changeant la police, la couleur, l'arrière-plan etc. avec les propriétés traditionnelles dont on a parlé (font-family, color, background-color etc.). Mais il existe d'autres propriétés très intéressantes, dont l'usage est strictement attaché aux listes. Elles sont au total trois et elles commencent toujours par list-style (style de la liste), puis l'effet qui est concerné : 'type' ou 'position' ou 'image'.

• La propriété CSS list-style-type

• La propriété CSS list-style-image

• La propriété CSS list-style-position

• La propriété générique list-style

La propriété CSS list-style-type

La propriété CSS list-style-type reconnaît deux catégories de constantes : une pour les éléments 'ul', et l'autre pour les éléments 'ol' (chiffres arabes, chiffres romains ou lettre alphabétiques). La propriété CSS list-style-type n'opère pas, si vous spécifiez une image pour vos listes avec la propriété CSS list-style-image.

Listes non ordonnées 'ul' (unordonned list)

Pour les listes non ordonnées, la propriété CSS list-style-type peut prendre les valeurs suivantes :

• disc : un disque noir (réglage par défaut) ;
• circle : un cercle vide ;
• square : un carré ;
• none : liste sans puce.

Exemple :

ul {
list-style-type: circle; /* puces sous forme de cercle vide*/
} 

Changez les valeurs de cette liste déroulante, pour voir l'aperçu des différentes valeurs possibles :

Listes ordonnées 'ol' (ordonned list)

Les mentions possibles sont :

1. decimal : numérotation numérique sous la forme : 1, 2, 3, 4, 5... (réglage par défaut) ;
2. decimal-leading-zero : numérotation numérique sous la forme : (01, 02, 03, 04, 05...). Ne peut pas être interprétée par Internet Explorer 6 et 7 ;
3. upper-alpha : numérotation alphabétique, en majuscules (A, B, C...) ;
4. lower-alpha : numérotation alphabétique, en minuscules (a, b, c...) ;
5. upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...) ;
6. lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...) ;
7. lower-greek : numérotation grecque. Ne peut pas être interprétée par Internet Explorer 6 et 7 ;
8. none : pas de numérotation.

Testez avec cette liste déroulante les différentes mentions possibles :

La propriété CSS list-style-image

Cette propriété est particulièrement intéressante avec les éléments 'ul'. Si les constantes prédéfinies dans la propriété CSS list-style-type ne vous satisfont pas, vous serez donc amené à user de la propriété CSS list-style-image, pour choisir votre propre image qui va servir de marqueur pour la liste. Exemple :

ul {
list-style-image: url("../../maPuce.png");
}

L'URL doit être spécifiée en fonction du contexte, où la règle CSS a été prédéfinie :

• URL par rapport à une feuille CSS externe, si les styles CSS on été liés par la balise link ou bien importés par la règle CSS @import ;
• URL par rapport au document XHTML lui-même, si les styles CSS on été définis dans l'en-tête du document ou par l'attribut universel style.

Pour de plus amples détails, reportez-vous au chapitre : lier des styles CSS avec la balise link, la règle CSS @import, la balise style ou l'attribut style.

Remarques

• l'image qui va servir de puce doit faire partie des trois formats supportés par le web : jpg (ou jpeg), gif, png ;
• Si l'image est trop grande elle sera découpée. Je vous recommande d'utiliser une image qui ne dépasse pas une taille de 16x16 pixels ;
• dans le cas où l'image spécifiée dans l'URL a été supprimée, déplacée ou renommée. Le navigateur va utiliser le marqueur défini dans la propriété CSS list-style-type ;
• la propriété CSS list-style-image est aussi reconnue par l'élément 'ol'. Mais ça va compromettre la raison d'être des listes numérotées. Car la même image sera répétée avec chaque item de liste, ce qui signifie que la notion d'ordre sera perdue

La propriété CSS list-style-position

Le rôle de cette propriété consiste à définir si le texte d'une liste doit être mis en retrait ou non, en cas de retour à la ligne automatique lorsque le texte atteint le bord du conteneur, ou bien en cas de retour à la ligne avec la balise <br/ >. Cette propriété reconnait 2 valeurs :

• outside : le texte des lignes suivantes (2++) est mis en retrait (par défaut), de façon à ce qu'il soit aligné au même niveau que la première ligne ;
• inside : le texte des lignes suivantes (2++) n'est pas mis en retrait, de sorte à ce que le texte commence en-dessous de la puce (ou numéro).

N'oubliez pas qu'un retour à la ligne est nécessaire pour que l'effet de retrait soit visible. La syntaxe est la suivante :

ul, ol {
list-style-position: outside;
}

La propriété générique list-style

La méga-propriété list-style résume les trois propriétés qu'on vient de voir. Voici deux exemples :

ol {
list-style: lower-roman inside; 
}
ul {
list-style: url("dossier.jpg") inside circle; 
}

Notez que pour les propriétés raccourcies, les valeurs passées sont séparées par des espaces et que leur ordre n'importe pas. Le navigateur peut identifier facilement les propriétés CSS rien qu'avec les valeurs passées.

Vous n'êtes pas tenu de mentionner toutes les valeurs, mais seulement celles qui vous intéressent. Si vous avez omis certaines d'entre-elles, les valeurs par défaut seront reprises par le navigateur.

Voilà, encore d'autres propriétés CSS ont été ajoutées dans votre sac avide Les prochains chapitres seront dédiés à certaines propriétés CSS qui sont plus ou moins compliquées

Chapitre suivant : la propriété CSS float.