[Résolu] Puce image trop haute

Bonsoir
Je peine pour placer correctement une liste avec une puce "image" sur cette page à droite (puce bleue), si vous avez un conseil, une idée ?

http://www.larressore.net/liquide.html

L' image de la puce fait 18 px de large et 6 px de haut

Merci


Code css :

#bloccadre {
padding-right: 10px; padding-left: 10px; background: white; padding-bottom: 25px; padding-top: 0px; border: dotted 1px #76a9dd;
}
#bloccadre ul {
padding-right: 10px; padding-left: 25px; padding-bottom: 0px; margin: 1em 10px 0px 0px; padding-top: 0px; 
}
#bloccadre li {
list-style-image: url(puce.gif); margin: 0px;  
}
#bloccadre li a {
color: black; text-decoration: underline
}
#bloccadre li a:hover {
text-decoration: none
}

Code html :

<div id="bloccadre">
<ul>
  <li><a title="" 
  href="http://www.larressore.net</a>  </li>
  <li><a title="" 
  href="http://www.larressore.net">Associations</a>  </li>
</ul>
</div>

Modifié par africa (17 May 2007 - 14:21)

et si tu augmentais la line-height? ca se positionnerait peut-etre mieux

Bonjour,
si tu souhaites placer ta puce plus précisément, il faut alors te tourner
vers la propriété background.

li {
background: url(puce.gif) no-repeat 0 0.4em; 
padding-left: 18px;
}

La première valeur (0) indique le placement horizontal de la puce
et la deuxième son placement vertical. La valeur (arbitraire) en em
permet à la puce d'être toujours placée au niveau de la première ligne
quelque soit le nombre de ligne de l'item de liste.
Les valeur initial sont 0% 0%.
Modifié par Hermann (17 May 2007 - 12:44)

CPascal a écrit :
et si tu augmentais la line-height? ca se positionnerait peut-etre mieux

J'ai résolu le problème

#bloccadre li {
list-style-type: none;
background-image: url(puce.gif);
background-repeat: no-repeat;
background-position: -8% 65%;
margin: 0px;
padding-left: 15px;
}

Merci
Modifié par africa (17 May 2007 - 12:46)

Alors n'oublies pas de marquer ton sujet comme [Résolu]