Liste personnalisée en CSS et images

Un peu de code CSS peut changer l'apparence de vos pages en embellissant les listes qui deviennent des éléments graphiques à peu de frais.

Liste numérotée

Le code HTML pour la liste numérotée utilise la balise <ol>:

<ol>
    <li><p>Google</p></li>
    <li><p>Bing</p></li>
    <li><p>Wolfram</p></li>
    <li><p>Alexa</p></li>
</ol>

Dans les balises <li>, on insère une balise <p> pour pouvoir donner au texte un style différent de celui du numéro.

Ainsi, si on veut présenter de grands chiffres, mais un texte de taille normale, on redéfinit d'abord le style des balises <li>:

#prettylist li
{
    font-size:20px;
    font-style:italic;
}

Puis on redéfinit la balise <p> pour revenir au texte de taille et de style normal:

#prettylist li p
{
    font-size:12px;
    font-style:normal;
}

La démonstration embellit la liste en la plaçant dans un <fieldset> doté d'une image de fond, et aux bords arrondis sous certains navigateurs.

Exemple...

Une liste avec grands chiffres sur image de fond dans un fieldset. Les textes ne sont que des exemples.

  1. Google
    80% de parts de marché dans le Monde. Applications Web gratuites.

  2. Bing de Microsoft
    10% de parts de marché. Applications de bureau onéreuses.

  3. Wolfram Alpha
    Moins de 1%. Inclu dans Bing.

  4. Alexa
    Moinds de 1%. Comparateur de trafic.

Autres options

Utiliser des chiffres romains:

list-style-type:upper-roman;

Utiliser des lettres:

list-style-type:upper-alpha;

Ou en minuscules:

list-style-type:lower-alpha;

Il est possible aussi insérer le numéro ou la puce dans le texte plutôt que les placer à gauche:

list-style:inside;

Exemple:

Voir la documentation du W3C pour plus de détails.

Liste à puces

Une autre option, pour une liste non numérotée, remplacer les puces par des images.

Le code HTML est ici simplifié car on peut se passer des balises intérieures. La balise <ol> est remplacée par la balise <ul>.
Un identificateur permet de personnaliser la liste sans modifier le reste de la page. 

<ul id="imglist">
    <li>Google</li>
    <li>Bing</li>
    <li>Wolfram</li>
    <li>Alexa</li>
</ul>

Le code CSS remplace simplement le rond noir qui est l'image par défaut par une image d'exemple:

#imglist li 
{
    list-style-image: url(images/cc-ok.png);
    font-size:16px;
}

Démonstration:

Voir aussi d'autres utilisations des listes...

Ci-dessus, mise en pratique du style upper-roman...

© 2010-2012 Xul.fr