[Résolu] Position de la puce s'il y a une 2e ligne

Bonjour
J'ai suivi les recommandations des tutoriaux et des autres réponses proposées sur le forum mais rien n'y fait. Soit je suis bouché à l'émeri soit il y a quelque chose qui m'échappe...
Que ce soit sous Opera, Firefox ou IE, l'image de la puce est centrée par rapport à l'ensemble des lignes associées à une li... alors que j'aimerais qu'elle reste au niveau de la 1ere ligne !

Bon je ne suis pas sur d'etre clair :
Voici le lien :
http://www.larrierecour.com/pagesfr/liens.html

le pb se trouve au niveau du texte :

a écrit :
Pour les amoureux de gastronomie, le restaurant et la boutique d’Antoine Westermann, chef 3 étoiles : www.buerehiesel.com

le petit carré de la puce se trouve au milieu de 2 lignes et j'aimerais qu'il soit au même niveau que les autres liens sur la première ligne...

et voici le code css associé :

#texte2 ul {
	margin: 0px;
	padding: 0px;
	margin-left: 15px;
	list-style-type: none;	
}

#texte2 li {
	margin: 0px;
	padding: 0px;
	color: #EEEEEE;
	padding-left: 20px;
	background-image: url(../img/puce2.jpg);
	background-position:0% 55%;
	/*background-position: left;*/
	background-repeat: no-repeat;*/
	margin-top: 3px;
	margin-bottom: 3px;
}

Merci de toute aide apportée et désolé s'il y a déjà eu une réponse précise à ce post mais je ne l'ai pas trouvée !
Modifié par Blue James (09 Feb 2006 - 18:33)

Bonjour,

En fait, au lieu d'utiliser une image d'arrière plan pour les éléments li, tu peux utiliser la propriété list-style-image qui te permet de définir une image à la place des puces habituellement utilisées. Il te restera ensuite à ajuster les marges en fonction du rendu que tu souhaites.
En bidouillant rapidement, je suis arrivé au résultat suivant :

#texte2 ul {
	margin: 0px;
	padding: 0px;
	margin-left: 35px; /*original à 15*/
	list-style-type: none;
	margin-bottom: 0px;
	margin-right: 5px;
}

#texte2 li {
	margin: 0px;
	padding: 0px;
	color: #EEEEEE;
	padding-left: 5px; /* original à 20 */
	list-style-image: url(../img/puce2.jpg);
        /* supprimé les mentions à background */
	margin-top: 3px;
	margin-bottom: 3px;
}

Modifié par Jihel (09 Feb 2006 - 17:15)

Top ! ça marche !!
Merci beaucoup...
Par contre sans vouloir abuser, est-ce qu'il est possible de positionner ensuite cette puce un peu plus bas ?
J'ai bien lorgné du coté de

list-style-position: 0% 55%;

même si inside et outside sont les seules options proposées par défaut,
mais bon rien n'y fait...
Merci en tous cas : c'est déjà beaucoup, beaucoup mieux !

Euuuuuuh je suis pas sûr que tu puisses définir le position de la puce .
Par contre tu peux faire un png avec un espace de x pixels transparents en haut de ton carré et qui ferait office de padding...

Subtil !!! Je n'y avais pas pensé !! Ca sent le hack mais il me parait sympa !!!