Méthodes pour personnaliser les puces en css

Bonjour tout le monde,

J'ai une question concernant la personnalisation des puces en css
Actuellement il y a 2 méthodes pour insérer des images au lieu des puces classiques

1) background: url(monimage.gif) top no-repeat;
2) list-style-image: url(monimage.gif) top no-repeat;

Savez laquelle est conseillée ?

Merci d'avance,
Jonathan

Assurément la seconde !

La première méthode ne fait qu'ajouter une image de fond et ne remplacera en rien la puce par défaut.

Au passage, la réponse était assez explicite rien que par le nom des propriétés non ?
list-style-image fait directement référence à l'image à utiliser comme style pour la liste

Salut,

personnellement je dirai que cela dépend.
Tu peux aussi bien être amené à utiliser une image de fond avec une position (parfois accompagné d'un line-height) comme tu peux être amené à utiliser un list-style-image.

L'un comme l'autre a ses avantages.

la seconde position est adapté à la liste.
Cependant elle a le gros désavantage de positionner ta puce en haut a gauche de ton élément ( du moins pour une partie des navigateurs il me semble ). tu ne peux pas la mettre à 2px du bord gauche et 4px de hauteur par exemple.

La propriété background peut elle être positionner a 2px du bord gauche et 4px du haut. Elle n'est pas non plus interdite pour une liste. C'est donc pour ma part celle que j'utilise.

Par expérience, je dirais aussi qu'elle a l'avantage d'offrir sensiblement le même rendu suivant les navigateurs contrairement au liste-style.

Salut salut,

Pour complèter l'information je te conseil le tuto donnez du style a vos listes si tu ne l'as pas encore lu.

Hello merci pour vos commentaires, j'avais oublié qu'il y avait un bel article sur les puces
Modifié par psykhe (11 Aug 2011 - 16:48)

Bonjour,

list-style ça serait bien si ça suffisait. Perso, ça n'a jamais été le cas en intégrant des design pour des clients, il y a toujours besoin d'un background-position (et même en feintant en rajoutant des lignes transparentes dans l'image au-dessus de la puce pour décaler la partie utile de l'image sans positionner en CSS - la puce sert toujours dans des situations différentes).