Créer des listes ordonnées attrayantes en CSS

| Soh Tanaka | Didier Mouronval |

Traducteur

Bovino

Cet article est la traduction de : Sexy Ordered Lists with CSS.

J'ai récemment travaillé sur un site pour lequel j'ai dû créer des styles spéciaux pour les listes ordonnées, j'ai donc pensé que cela pourrait vous servir pour vos propres projets.
Le problème pour beaucoup est de comprendre comment séparer les styles de la numérotation de ceux du contenu de la liste.

Il semblerait plus facile d'intégrer la numérotation dans le contenu d'une liste non ordonnée et de lui affecter un style, mais ce serait contourner le problème au lieu de le résoudre !
Dans ce tutoriel, je vais vous montrer une solution pour réussir cette mise en forme.

Vous pouvez déjà voir le résultat attendu.
Commentez

- Titre : Créer des listes ordonnées attrayantes en CSS

- Auteurs : Soh Tanaka, Didier Mouronval

- Traducteur : Bovino

- Parution : 22 avril 2011

- Licence : Copyright ® 2011 Soh Tanaka. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Le code HTML

- Le code CSS

- Méthode manuelle

- Méthode avec jQuery

- Conclusion

- Remerciements

Le code HTML

Nous allons d'abord créer une liste ordonnée avec pour chaque élément un titre et un paragraphe

<ol class="steps">
<li>
<h2>heading</h2>
<p>paragraph</p>
</li>
<li>
<h2>heading</h2>
<p>paragraph</p>
</li>
</ol>

Le code CSS

Nous commençons par donner un style à la liste elle-même. Notez que nous précisons des styles de police pour les éléments de liste, ce seront ceux appliqués à la numérotation

ol.steps {
margin: 20px 0;
background: url(ul_bg_repeat.gif) repeat-y; /*--Image de fond de la numérotation--*/
padding: 0 0 0 35px; /*--Décalage 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;
/*--Le style biseauté est créé avec les styles suivants appliqués aux bordures--*/
border-top: 1px solid #000;
border-bottom: 1px solid #353535;
border-right: 1px solid #333;
border-left: 1px solid #151515;
background: #222;
}

En créant le style biseauté avec les couleurs de bordures, un pixel supplémentaire apparait en haut et en bas de la liste.

Nous pouvons remédier à cela de deux façons, mais d'abord, nous ajoutons une classe spécifique pour le premier et le dernier élément de la liste.

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

Méthode manuelle

Il nous suffit d'ajouter le nom de la classe manuellement dans le code HTML de la liste

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

Méthode avec jQuery

Utilisons jQuery pour ajouter les noms de classe

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

Maintenant que nous en avons fini avec la liste, nous pouvons appliquer des styles aux balises de titre et de paragraphe pour annuler les styles par défaut de la liste

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 ne sont pas forcément destinées à être austères.
Bien entendu, si vous avez d'autres techniques pour styliser vos listes, proposez-les dans les commentaires de ce tutoriel.

Voir un exemple de ce code.

Remerciements

Nous tenons à remercier Soh Tanaka pour l'autorisation de traduction de cet article.
Voir l'article original sur le blog de Soh Tanaka.

Un grand merci à ClaudeLELOUP pour sa relecture avisée !