Créer des listes ordonnées attrayantes en CSS

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>

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▲

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

Méthode avec jQuery▲

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

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;
}

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.

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 !