Créer des listes ordonnées attrayantes en CSS

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.
2 commentaires Donner une note à l'article (5)

Article lu   fois.

Les trois auteurs et traducteur

Site personnel

Site personnel

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Le code HTML

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

 
Sélectionnez

<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

 
Sélectionnez

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.

 
Sélectionnez

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

 
Sélectionnez

<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

 
Sélectionnez

<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

 
Sélectionnez

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 !

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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. Droits de diffusion permanents accordés à Developpez LLC.