28173 sujets

CSS et mise en forme, CSS3

[ resolu ] LISTE : espace entre la puce et le texte a sa droite ?

Bonjour a tous,

comme indiqué dans ma question, je voudrais pouvoir regler l'espace qu'il y a entre ma puce, qui dans mon cas perso est une image, et le texte qui la suit ?

Merci pour les reponses Smiley cligne

GeGeN
Modifié par gegen (29 Sep 2006 - 12:06)
Raphael a écrit :
Hello,

Désolé si ma réponse te paraît un peu abrupte, mais as-tu eu le réflexe que tout le monde devrait avoir, à savoir faire une recherche dans le forum ou la FAQ ?

http://forum.alsacreations.com/faq/#item54


:)
Oui je suis allé voir cet article, il regle le pb de la marge de gauche entre IE et le reste... Moi ce que j'aimerai cest reduire l'espace entre la puce et la suite a droite ?
Bonjour,

Utilise simplement un padding-left sur <li> Smiley smile 

li {
	padding-left: 3em;
}


<ul>
	<li>item</li>
	<li>item</li>
	<li>item</li>
</ul>
pierre6020 a écrit :
Bonjour,

Utilise simplement un padding-left sur <li> Smiley smile 

li {
	padding-left: 3em;
}


<ul>
	<li>item</li>
	<li>item</li>
	<li>item</li>
</ul>


Alors en essayant ton code, jarrive a agrandir lespace entre la puce et le texte, mais pas a reduire lespace par defaut Smiley smile

J'ai trouvé une soluce pour FF, en jouant avec text-indent: -4px;
Mais pour IE jai pas encore trouvé le moyen de reduire cet espace.
En attendant de voir si une solution existe, jai resolu le pb temporairement en virant l'image de la liste et en mettant directement un <img src...> dans chaque <li>, de cette facon jarrive a caler le tout correctement avec margin et padding
pierre6020 a écrit :
Dans ce cas, utilise plutôt un background sur ton élément li Smiley cligne


yep, comme je reviens a mon idée de depart, cest a dire eviter de remettre mon <img src=..> 10 milles fois Smiley smile
de plus je viens de decouvrir ke lon pouvait placer le fond via ses coords x,y

Merci Smiley cligne
gegen a écrit :
J'ai trouvé une soluce pour FF, en jouant avec text-indent: -4px;
Mais pour IE jai pas encore trouvé le moyen de reduire cet espace.

La propriété CSS marker-offset permettrait théoriquement de jouer sur cet espace, mais elle n'est supportée par aucun navigateur à ma connaissance.

Sinon, on peut se passer des puces (list-style: none) et utiliser une image de fond (background) alignée à gauche, avec un padding gauche sur li.
Sujet clos
Aller à