28256 sujets

CSS et mise en forme, CSS3

[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</blockquote>

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 Smiley biggrin 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 ! Smiley confused
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 ! Smiley biggrin
Euuuuuuh je suis pas sûr que tu puisses définir le position de la puce Smiley ohwell .
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... Smiley biggol
Sujet clos