[résolu] Position sur Y et list-style-image de listes ?

Salut,

Sur quoi peut on jouer pour aligner une puce image et son texte <li> dans une liste, quand l'image de puce est grosse ?

Sur la largeur je joue sur les padding, mais sur la hauteur ?

CSS

ul.listtop {margin: 0 0 0 30px; }
ul.listtop li {list-style-image: url(../images/puce/puce.jpg); border: 1px solid green;  height: 25px; }

Aperçu du problème :


Merci d'avance !
Modifié par Hum (05 Dec 2006 - 19:44)

Merci à toi, mais ma question était en fait par rapport à :

List-style-image. et non background-image.

Peut être que cela fonctionne aussi ?

Merci.
Modifié par Hum (02 Dec 2006 - 19:45)

Bonjour
Tu peux déjà essayer de rajouter un padding-bottom : xpx. avec x = la hauteur de l'image de la puce, cela permet de "remonter" le texte

ul.listtop {
	margin: 0 0 0 30px;
}

ul.listtop li {
	list-style-image: url(MonImage.gif);
	border: 1px solid green;
	height: 40px;
	width : 100px;
	padding-bottom : 40px;
	padding-left : 10px;
	padding-top : 20px
}

Non ça ne fonctionne pas, rajouter un padding-botom aux <li> joue en même temps sur le texte du <li> et sa puce.

Et apparemment list-style-position n'accepte que deux valeurs :inside et outside.

Merci quand même

EDIT :

Une copie d'écran pour visualiser ce que donne l'ajout de padding-bottom sur les <li> de ma liste, j'ai trafiqué l'image d'origine, car là je peux pas faire de copie d'écran (problème de clavier...)


Modifié par Hum (03 Dec 2006 - 20:02)

Bon ben à défaut d'avoir trouvé une solution, je me suis résolu à mettre des background-image sur mes <li> pour pouvoir positionner l'image faisant office de puce comme je le souhaite.

Est ce que c'est ce que vous faites aussi ?

Hum a écrit :
Est ce que c'est ce que vous faites aussi ?

Oui, il me semble que c'est encore la meilleure solution pour contourner les différences d'implémentation de list-style-image.