Bonjour,
Je cherche à réduire l'espace entre le point ou plutôt l'image qui remplace le point de mes listes et le texte se trouvant dans chaque LI.

Voici mon css:

#showNav ul {
	margin:0;
	padding:0;
}
#showNav li {
	list-style: url(../images/list-dot.jpg) inside;
	font-size:0.9em;
}
#showNav li a{
	vertical-align:-1px;
} 

et l'html:

<div id="showNav" style="display:block;">		
		<div id="first">
			<a href="#" class="lienParent">Logiciels</a>
			<ul>
				<li><a href="#">esteor</a></li>
			</ul>
		</div>
		<div id="second">
			<a href="#" class="lienParent">Imagerie numérique</a>
			<ul>
				<li><a href="#">Capteur 1</a></li>
				<li><a href="#">Capteur 2</a></li>
				<li><a href="#">Camera 1</a></li>
				<li><a href="#">quick launcher</a></li>
				<li><a href="#">max easy</a></li>
				<li><a href="#">certificat</a></li>
				<li><a href="#">carosteose</a></li>
			</ul>
		</div>
	</div>

Merci d'avance pour votre aide Smiley smile .
Modifié par maniT4c (01 Mar 2010 - 17:17)
Bonjour,

Pour pouvoir gérer l'espace entre la puce et le texte, je conseillerais de placer la puce en image d'arrière-plan comme ceci :

#showNav li {
  list-style: none;
  background : url(../images/list-dot.jpg) no-repeat  [#darkblue]5px 50%[/#];
}


Les deux variables en bleu servent à caler la puce horizontalement et verticalement.
Les valeurs en pixel, les pourcentages et les mots-clefs (center, top, ...) sont acceptés.
ah je pensais qu'il existait une règle qui permettait de gérer cela.
Si en effet ça n'existe pas cette solution fonctionnera en effet.

Bon je place le topic en résolu même si j'avoue que j'aimerai connaître cette règle si elle existe.

Merci.
Les valeurs inside et outside ne servent pas à cela. Smiley cligne

inside place la puce dans la liste, le texte s'écoule autour.
outside exclut la puce de la liste, le texte est ferré de manière uniforme.