Liste numérotée avec style spécifique pour le numéro

Bonjour

Y a-t-il un moyen élégant de définir séparément le style des numéros d'une liste numérotée <ol> (police, corps, couleur, présence ou non d'un point après le numéro, distance entre le numéro et le texte...) ?

Pour l'instant, ne sachant comment résoudre la difficulté avec une liste <ol>, j'utilise une liste <ul> dans laquelle j'indique explicitement le numéro de chaque item, auquel j'applique un style spécifique.

Merci d'avance
Modifié par cadbor (19 Sep 2009 - 23:47)

Salut,

Tu peux utiliser les propriétés attribuées aux listes pour styliser les numéros via les <li>, mais le style sera appliqué au contenu de ses <li>, sauf si celui ci est inséré dans une autre balise, un <span> par exemple, te permettant d'avoir un style différent de la numérotation.

Tu peux donc utiliser :
list-style-position : pour définir la position de la puce, à l'intérieur ou à l'extérieur du bloc,
list-style-type : pour définir le type de numérotation, roman, latin, greek, etc. (je te laisse regarder les spécifications pour connaitre toutes les valeurs possibles
et bien sur tu as :
list-style-image, si vraiment le style que tu peux définir ne te convient pas, tu peux le faire via des images que tu devras bien évidemment créer.

Bonjour,

pas moyen sans utiliser un élément span dans chaque élément li

Question HS : quelqu'un peut me rappeler pourquoi j'utilise background-color et pas list-style-image ? J'ai oublié ...

Felipe a écrit :
Question HS : quelqu'un peut me rappeler pourquoi j'utilise background-color et pas list-style-image ? J'ai oublié ...

Peut-être parce que... http://forum.alsacreations.com/topic-2-34538-1-List-style-imagebackground.html ou alors c'est parce que... http://openweb.eu.org/articles/puces_images/

Mikachu a écrit :


[...]

Tu peux donc utiliser :
list-style-position : pour définir la position de la puce, à l'intérieur ou à l'extérieur du bloc,
list-style-type : pour définir le type de numérotation, roman, latin, greek, etc. (je te laisse regarder les spécifications pour connaitre toutes les valeurs possibles

[...]

Merci de ta réponse

J'ai effectivement procédé comme tu me le conseillais :

Dans le formatage de li, j'indique les caractéristiques de police valables pour l'ensemble de l'item, numéro et intitulé de l'item.

"list-style-type:decimal;" permet de sélectionner une numérotation décimale (1. xxx, 2. xxx, 3. xxx...)

En mettant "list-style-position:outside;" , padding-left permet de régler la distance entre le numéro et l'intitulé de l'item.

Comme il s'agit dans mon cas d'une liste de liens, la typographie utilisée pour l'intitulé de l'item est définie dans le formatage de li a {}.

Je différencie donc bien le numéro et le texte de l'item de liste.


Seul point que je ne sais pas encore résoudre : comment faire pour que le numéro s'affiche sans point ?


Merci encore