Icone sur une liste ?

saluté ...
j'ai un petit pb avec les listes
j'aimerai bien mettre à la place de chaque puce de ma liste une icone ...mais pas à chaque fois la même ... une icone pour chaque rubrique ...
mon menu sera disposé en ligne . mais dès que je mets une image le lien se mets à la ligne et pas à côté ...

Voici mon css

div#menu { 
position: relative;
width: 850px; 
height: 40px; 
background-color: #e7e6e6; 
}


div#menu ul{
list-style-type: none;
}

div#menu li{
float: left;
margin: 0 20px 0 0;
}

#menu a {
display: block;
width: auto;
margin: 0px 0px 0px 0px;
padding: 0px;
text-decoration: none;
}

et mon html

<div id="menu">
<ul>
	<li><img src="images/icon/stats.gif" alt="" height="14" width="14" border="0"><a href="<?echo $dossier_racine; ?>news/index.php">Actualité</a></li>
	<li><img src="images/icon/aaa.gif" alt="" height="14" width="14" border="0"><a href="<?echo $dossier_racine; ?>promo/index.php">Promotions</a></li>

</ul>
</div>

si vous pouviez m'aider ce serai super sympas
merki
@++
Modifié par NAS (11 Aug 2006 - 14:45)

Bonjour,

tu peux regarder du côté de list-style-image (exemple sur Listamatic)
ou sinon utiliser une image de fond (exemple suivant sur Listamatic)
Attention aux différentes marges entre IE et autres, selon le Doctype utilisé.

(désolé pour les liens en anglais, il y en a certainement en français mais j'ai toujours plus de mal à les retrouver )

EDIT: si le bout de HTML proposé se limite à ça sur ton site, tu peux aussi bien déclarer:

<ul id="menu">
<li>...</li>
</ul>

si le <div> n'est là que pour y placer un id
Modifié par Felipe (11 Aug 2006 - 15:34)

merci je regarde ça
(le menu est plus long mais j'ai résumé)
au pire j'enlèverai le système de liste et je mettrai simplement des liens à la suite des autres non ?
++

hello !

j'ai aussi essayé avec list-style-image mais ca ne marchait pas donc je me suis bricolé ca :

<div id="menu">
<ul>
	<li><img src="bleu.gif" alt="" border="0" /><a href="<?PHP echo $dossier_racine; ?>news/index.php">Actualité</a></li>
	<li><img src="rouge.gif" alt="" border="0" /><a href="<?PHP echo $dossier_racine; ?>promo/index.php">Promotions</a></li>
</ul>
</div>

avec les css :

div#menu { 
position: relative;
width: 850px; 
height: 40px; 
background-color: #e7e6e6; 
}
div#menu ul li {
padding-left: 10px;
display: inline;
}
div#menu ul li a {
padding-left: 5px;
}
#menu a {
text-decoration: none;
}

merci à toi
je teste dessuite
++

yess ! ça marche !
C'est la propriété display: inline; qui fait ça ?

merci bcp
+++

exactement