Ajoutez du style à vos listes ordonnées

Publié le 25 avril 2012

ParCatalin RosuSite personnel

Didier Mouronval (traducteur)Site personnel

Ajouter des styles à des listes ordonnées a longtemps été une tâche difficile et piégeuse, je ne suis pas le seul à le penser. Pour donner un style aux nombres, vous devez d'abord supprimer le style par défaut du navigateur puis ajuster le code des éléments de la liste afin de leur donner le style approprié.
Dans cet article, je vais vous montrer comment utiliser CSS3 pour améliorer la présentation de vos listes ordonnées en utilisant une approche sémantique.
Cet article est la traduction deCSS3 ordered list stylespublié surRed Team Design.
2 commentairesDonner une note à l'article (5)

Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us MySpace Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Windows Live Favorites 



L'idée 
Le HTML 
Le CSS 
Numérotation arrondie 
Numérotation rectangulaire 
Numérotation cerclée 
En guise de bonus 
Support des navigateurs 
Conclusion et remerciements 


L'idée
Lorsque j'ai lu pour la première foisenl'articlede Roger Johansson sur les styles des listes ordonnées, je dois avouer que j'ai tout de suite aimé sa technique. Je vais essayer de l'utiliser et de l'améliorer un petit peu pour vous montrer différentes façons de mettre en forme vos listes ordonnées.

Vous pouvez déjà voir un exemple en ligne.


Le HTML
Le balisage utilisé est tout ce qu'il y a de plus classique :


Le CSS
Essayons d'expliquer simplement comment cela fonctionne.

Nous allons utiliserLe contenu généré, le numérotage automatique et les listes. Il s'agit essentiellement d'utiliser deux propriétés CSS2.1 :counter-reset(initialise un compteur) etcounter-increment(le nom est explicite, cela incrémente le compteur précédent). Comme vous le verrez dans le code ci-dessous,counter-incrementsera utilisé en relation avec du contenu généré CSS (enpseudoéléments).


Numérotation arrondie


Numérotation rectangulaire


Numérotation cerclée


En guise de bonus

Des animations de la numérotation ont été ajoutées au survol dansla démo. Malheureusement, il semble qu'actuellement, seul Firefox permet d'animer des pseudoéléments. Espérons que celaense généraliserabientôt.


Support des navigateurs
Voir la démonstration en ligne. 
  <ol class="rounded-list"> <li><a href="">List item</a></li> <li><a href="">List item</a></li> <li><a href="">List item</a> <ol> <li><a href="">List sub item</a></li> <li><a href="">List sub item</a></li> <li><a href="">List sub item</a></li> </ol> </li> <li><a href="">List item</a></li> <li><a href="">List item</a></li> </ol>  
  ol{ counter-reset: li; /* Initialise le compteur */ list-style: none; /* Supprime la numérotation par défaut */ *list-style: decimal; /* Restitue la numérotation par défaut pour IE6/7 */ font: 15px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5); } ol ol{ margin: 0 0 0 2em; /* Ajoute une marge à gauche pour les listes imbriquées */ }  
  .rounded-list a{ position: relative; display: block; padding: .4em .4em .4em 2em; *padding: .4em; margin: .5em 0; background: #ddd; color: #444; text-decoration: none; border-radius: .3em; transition: all .3s ease-out; } .rounded-list a:hover{ background: #eee; } .rounded-list a:hover:before{ transform: rotate(360deg); } .rounded-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #87ceeb; height: 2em; width: 2em; line-height: 2em; border: .3em solid #fff; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out; }  
  .rectangle-list a{ position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 2.5em; background: #ddd; color: #444; text-decoration: none; transition: all .3s ease-out; } .rectangle-list a:hover{ background: #eee; } .rectangle-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -2.5em; top: 50%; margin-top: -1em; background: #fa8072; height: 2em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; } .rectangle-list a:after{ position: absolute; content: ''; border: .5em solid transparent; left: -1em; top: 50%; margin-top: -.5em; transition: all .3s ease-out; } .rectangle-list a:hover:after{ left: -.5em; border-left-color: #fa8072; }  
  .circle-list li{ padding: 2.5em; border-bottom: 1px dashed #ccc; } .circle-list h2{ position: relative; margin: 0; } .circle-list p{ margin: 0; } .circle-list h2:before{ content: counter(li); counter-increment: li; position: absolute; z-index: -1; left: -1.3em; top: -.8em; background: #f5f5f5; height: 1.5em; width: 1.5em; border: .1em solid rgba(0,0,0,.05); text-align: center; font: italic bold 1em/1.5em Georgia, Serif; color: #ccc; border-radius: 1.5em; transition: all .2s ease-out; } .circle-list li:hover h2:before{ background-color: #ffd797; border-color: rgba(0,0,0,.08); border-width: .2em; color: #444; transform: scale(1.5); }
Catégories : Cours
Ajoutez du style à vos listes ordonnées
Un menu déroulant en CSS3
Retour à l'accueil