Numérotation automatique des images avec les propriétés css2 content et before

Dans le cadre de la réalisation d’une nouvelle interface de gestion, il m’était demandé de pouvoir modifier l’ordre des vidéos (vignette) à la guise du client. Une solution à été rapidement trouvé grâce à JQuery et son user interface (l’interface utilisateur comprends plusieurs fonctionnalités souvent utilisées dans une administration avec le code HTML et le JavaScript nécessaire pour le faire fonctionner) avec la fonctionnalité « sortable ».

Voici le résultat qui était obtenu.

Afin d’augmenter la lecture de l’interface, on souhaitais rajouter sur chaque vignette un numéro indiquant sa position dans la liste.

La première solution trouvée était l’utilisation d’une OL (order liste, liste ordonnée). Mais rapidement la mise en place de CSS (Cascading Style Sheet, feuille de style en cascade) semblait poser problème.

La seconde solution qui a été mise en place était l’utilisation de propriété CSS2 content et before.

Nos images sont contenues dans une div qui est elle-même contenu dans une div global.

Ce qui donne niveau code HTML

 <div id="wrap">
<div class="video">
<a href="#"><img src="monimage.jpg" alt="video" title="Explication" /></a>
</div>
<div class="video">
<a href="#"><img src="monimage.jpg" alt="video" title="Explication" /></a>
</div>
<div class="video">
<a href="#"><img src="monimage.jpg" alt="video" title="Explication" /></a>
</div>
</div>

Niveau CSS

div.video{
position: relative;
z-index: 5;
color: #cdf26c;

padding: 10px 0 0 10px;
font-size: 30px;

text-shadow: #000 1px 1px, #000 -1px 1px, #000 -1px -1px, #000 1px -1px;

width: 274px;
height: 150px;
}

div.wrap:before {
content: "";
counter-reset: compteur;
}

div.video:before {
content: counter(compteur);
counter-increment: compteur;
}

div.video img{
position: absolute;
left: 0;
top: 0;
z-index: -1;
}

Explication:

  1. On met la div qui entoure l’image en position relative, ainsi les enfants seront placés en fonction du parent et non pas de body.
  2. On remet le compteur de la div qui englobe le tout à 0 pour éviter les problèmes de numéro.
  3. On utilise la pseudo class « :before » avec la propriété content pour ajouter le compteur.
  4. On met l’image de la div en position absolue, top et left à 0. Et le z-index à -1 pour qu’il passe derrière le texte. Si votre image disparait vous avez probablement oublié de mettre la div qui entoure l’image en position absolute.
  5. On joue avec la marge de la div pour adapter la typographique du numéro, la taille etc.

Et voici le résultat.

J’espère que cet article vous évitera les recherches que j’ai du faire.

Ce contenu a été publié dans Web. Vous pouvez le mettre en favoris avec ce permalien.

Une réponse à Numérotation automatique des images avec les propriétés css2 content et before

  1. Mr Alexis dit :

    l’interface c’est d’en savir plus ‘information pour ne pas se perdre et cette démarche que tu as suivi va permettre d’éliminer plusieurs étape pour modifier l’ordre des vidéos (vignette) .

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.