Rodrigue Hunel

Cet article est la traduction de : Sexy Ordered Lists with CSS. Tout au long de cet article, Soh Tanaka vous présente une méthode permettant de créer une jolie liste ordonnée uniquement avec du CSS.

Introduction

Au cours d'un récent développement d'un site, je devais personnaliser une liste ordonnée et j'ai eu l'idée de vous proposer ma méthode en espérant qu'elle puisse vous aider pour vos futurs projets. Le véritable souci dans ce genre de conception est que certaines personnes ne savent pas forcément comment distinguer la numération du véritable contenu de la liste.

Ce serait plus que facile de numéroter manuellement chaque élément de la liste mais ce n'est pas le but recherché. Dans ce tutoriel, je vous montrerai comment personnaliser correctement votre liste ordonnée.

Voici un aperçu du résultat attendu : démonstration.

Le code HTML

Nous devons tout d'abord créer la liste ordonnée et lui ajouter deux éléments : un titre et un paragraphe.

<ol class="steps"> 
    <li> 
        <h2>Titre</h2> 
        <p>Paragraphe</p> 
    </li> 
    <li> 
        <h2>Titre</h2> 
        <p>Paragraphe</p> 
    </li> 
</ol>

Le CSS

Commençons par décorer la liste ordonnée elle-même. Notons que nous devons spécifier une font aux éléments de liste (ce sera le style pour la numérotation).

ol.steps {  
    margin:20px 0;  
    background:url(ul_bg_repeat.gif) repeat-y;  
    /*-- Fond de la numérotation --*/  
    padding:0 0 0 35px;  
    /*-- Distance entre chaque éléments de la numérotation --*/  
    border:1px solid #111;  
}  
  
ol.steps li {  
    margin:0;  
    padding:15px 15px;  
    color:#cbff78;  
    font-size:1.7em;  
    font-weight:bold;  
    /*--  
        L'effet de relief est obtenu avec différentes couleurs  
        définis sur les propriétés de bordure  
    --*/  
    border-top:1px solid #000;  
    border-bottom:1px solid #353535;  
    border-right:1px solid #333;  
    border-left:1px solid #151515;  
    background:#222;  
}  

Comme nous utilisons la propriété border pour obtenir l'effet biseauté, vous remarquerez que la présence d'un pixel supplémentaire en haut et en bas de la liste.

Vous pouvez corriger cela de deux façons. Tout d'abord créer une classe pour le premier et dernier élément de la liste.

ol.steps li.first { border-top:1px solid #353535; }  
ol.steps li.last { border-bottom:none; }  

Méthode 1 : application manuelle

Définissez manuellement dans le code HTML les classes vu précédemment sur le premier et dernier élément de la liste.

<li class="first">
    <!-- Contenu -->
</li> 
<li>
    <!-- Contenu -->
</li> 
<li class="last">
    <!-- Contenu -->
</li>

Méthode 2 : application avec jQuery

Utilisez la bibliothèque JavaScript jQuery pour ajouter les classes sur le premier et dernier élément de la liste.

<script type="text/javascript"> 
    $(document).ready(function() { 
        $("ol.steps li:first").addClass("first"); 
        $("ol.steps li:last").addClass("last");
    }); 
</script>

Maintenant que nous avons fini de personnaliser les éléments de la liste, nous allons modifier la font de base pour les balises de titres h2 et les balises de paragraphes p.

ol.steps li h2 {  
    font-size:0.9em;  
    padding:5px 0;  
    margin-bottom:10px;  
    border-bottom:1px dashed #333;  
    color:#fff;  
}  
  
ol.steps li p {  
    color:#ccc;  
    font-size:0.7em;  
    font-weight:normal;  
    line-height:1.6em;  
}  

Conclusion

Comme vous pouvez le voir, les listes ordonnées n'ont pas à être ennuyeuses. Si vous avez d'autres suggestions pour la personnalisation des listes ordonnées, faites-le moi savoir s'il vous plait !

Voir le résultat obtenu.

Dernière mise à jour : 28 févr. 2011 à 02:14