Centrer verticalement le texte d'un <li> par rapport à une imag

Bonjour à tous,

J'ai changé la puce des items d'une liste pour une image, et j'ai un souci de centrage du texte de ces items...

http://www.moviestats.fr/FR/DotClear/index.php/2006/04/25/9-mises-a-jour

Voici le code HTML correspondant:

<ul class="listNouveautes">
			<li>Ajout d'assistants de nettoyage de la base de données</li>
<li>Ajout d'icônes et coloration différente des matches dans la liste des analyses ou des enregistrements pour mieux différencier les matches.</li>
		</ul>

et CSS:

.listNouveautes {
	list-style-image: url(http://www.moviestats.fr/Images/DotClear/ampoule.gif);
	list-style-position: outside;	
}

Est-ce que quelqu'un aurait une idée?

Merci d'avance

Mike

Salut mike,
en jouant sur le padding, tu devrais reussir a obtenir ce que tu souhaites.
A+

hello,

je viens d'essayer différentes combinaisons de padding, mais rien à faire, c'est tout le bloc (image + Texte) qui est affecté (ce qui me semble normal), et pas uniquement le texte...

Salut, j'avais pas fait attention, ton iage, tu dois la mettre pour ton <li> et non <ul>, ce qui nous donne un truc du genre:

li {
display: list-item;
list-style-image: url(img/picto.gif);
line-height:1.3em;/*eventuellement modifier la hauteur de ligne */
	
    }

VOila, tchus
Modifié par broadcastor (14 Jun 2006 - 15:12)

bonjour,
j'ai le même problème d'espace entre ma style-image et le texte, cependant dans firefox l'afficahage est impeccable, (lorsque le style-image est apliqué au #ul) comment faire pour IE?
merci,
html classique d'un ul verticale!

.menu li
{
padding-left: 5px;
list-style-image: url(puce_bigred_reduct.gif);
list-style-position: inside;
}

Rien à faire pour moi, je n'y arrive vraiment pas...

Le code CSS est maintenant ceci:

.listBugs li {
	list-style-image: url('http://www.moviestats.fr/Images/DotClear/bug.gif');	
	list-style-position: outside;
	margin: 10px 0px 20px 10px;
}

.listNouveautes li {
	list-style-position: outside;
	list-style-image: url('http://www.moviestats.fr/Images/DotClear/ampoule.gif');	
	margin: 10px 0px 20px;
}

Et l'affichage ceci:

http://www.moviestats.fr/FR/DotClear/index.php/2006/04/25/9-mises-a-jour

Donc c'est pas vraiment ça

Bonjour,

Pour placer précisément une image/puce mettez la en background de LI.
Pour imiter "inside" utiliser text-indent et "outside" padding
Modifié par Alan (14 Jun 2006 - 15:29)

Merci beaucoup, ça marche! (enfin )

Voici le code:

.listBugs li{
	background: url('http://www.moviestats.fr/Images/DotClear/bug.gif') no-repeat left;
	list-style-type: none;
	padding: 5px 0 5px 40px;
	margin: 10px 0 0 -30px;
}