28173 sujets

CSS et mise en forme, CSS3

[Résolu] Styler les nombres d'une liste ordonnée

Bonjour,

Je tombe sur un problème que je n'ai par hasard jamais rencontré, et je dois dire que je ne vois pas trop comment parvenir à mes fins.

Je souhaiterais simplement placer un fond noir aux chiffres d'une liste ordonnée, mais je ne vois pas trop comment faire. J'ai pensé attribuer à tout le li un arrière-plan non dupliqué d'une petite cartouche noire, faisant ainsi illusion... mais ce n'est franchement pas génial, vous en conviendrez.

Si quelqu'un a une idée, je suis preneur. Smiley smile

Cordialement,
Benjamin
Modifié par Benjamin D.C. (26 Apr 2007 - 17:58)
Christian Le Bouler a écrit :
Pourquoi ?
D'abord parce que celà demande de créer une image pour les nombres à un chiffre, à deux chiffres et éventuellement à 3 chiffres. Ensuite parce que cette technique tiendra moyennement bien la route lors de l'agrandissement des polices, et enfin parce que j'espèrais pouvoir agir directement sur la puce plutôt que sur le bloc conteneur entier.
Salut,

Oui mais ca risque d'etre difficile. j'ai lu que contrairement au autre type de puces les liste de type <dl><dt><dd> accepte tous les types de mises en forme CSS. margin, background et tous ça.

mais dans ce cas là la numérotation viendrait pas toute seule....même si avec php j'imagine que c faisable de la générer....

pascal
Benjamin D.C. a écrit :
Pour confirmer, donc, pas d'autre solution que celle proposée dans mon post initial?

Tu peux toujours générer un marqueur de liste avec la pseudo-classe :before, mais faire ça de manière incrémentale... à priori non.

Bref, soit tu transiges sur le rendu graphique, soit tu génères des marqueurs de liste en dur, dans un span par exemple...
Florent V. a écrit :

Tu peux toujours générer un marqueur de liste avec la pseudo-classe :before, mais faire ça de manière incrémentale... à priori non.

Bref, soit tu transiges sur le rendu graphique, soit tu génères des marqueurs de liste en dur, dans un span par exemple...
Oui c'est bien ce que je me disais. Je pense que je vais garder ma liste ordonnée, c'est autrement plus pratique à maintenir et teeeellement plus sémantique! Smiley ravi

Merci pour vos réponses,
Benjamin
Au passage:

Florent V. a écrit :
Tu peux toujours générer un marqueur de liste avec la pseudo-classe :before, mais faire ça de manière incrémentale... à priori non.
Avec un counter-increment, ça devrait être faisable, mais les puces numérotées seront-elles personnalisables?
Benjamin D.C. a écrit :
Avec un counter-increment, ça devrait être faisable, mais les puces numérotées seront-elles personnalisables?

Aucune idée. Faut tester.
Florent V. a écrit :
Aucune idée. Faut tester.
C'est choste faite! Smiley smile
La bonne nouvelle, c'est que ça fonctionne pas mal du tout (bon évidemment, on oublie ie sur ce coup) :

[#black][b]CSS[/b][/#]

ol {list-style:none; counter-reset:numero;}
	
li:before {content: counter(numero); counter-increment: numero; background:yellow; margin-right:5px;}

li {margin-top:5px;}


[#black][b]HTML[/b][/#]

<ol>
	
	<li>Contenu</li>
	<li>Contenu</li>
	<li>Contenu</li>
	<li>Contenu</li>
	<li>Contenu</li>

</ol>
Sujet clos
Aller à