Espace entre une puce et son texte

**12monkeys** · 20/11/2006, 22h33

Bonsoir,

J'ai inséré une liste à puces dans ma page, j'ai remplacé la puce par une image. Mais je n'arrive pas à trouver comment réduire l'espace entre la puce et son texte, mon code css :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
UL.ex1 {
	MARGIN: 0px 0px 0px 18px;PADDING-RIGHT: 0px;LIST-STYLE-POSITION: outside;
LIST-STYLE-IMAGE: url("fleche.gif");FONT-FAMILY: Times New Roman;FONT-WEIGHT: bold;
FONT-SIZE: 13px;LINE-HEIGHT: 16px
}

et dans la page :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<UL class="ex1">
<LI>
Me contacter
</LI>
<LI>
Envoyer des images
</LI>
<LI>
Liens
</LI>
</UL>

Ca donne : (puce) -espace que je veux réduire- le texte.

Peut on réduire cet espace par le css ? Comme vous le voyez j'ai testé avec padding-right mais sans succès.

Merci.

**Bisûnûrs** · 20/11/2006, 22h44

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

list-style-position:inside;

Comme dit dans l'autre post, mets tous tes balises/propriétés/attibuts en minuscules.

**12monkeys** · 20/11/2006, 23h01

Ca à l'air de me poser d'autres problèmes, mais là je suis trop crevé pour tester, à demain si je n'ai pas trouvé tout seul...

**12monkeys** · 21/11/2006, 18h28

Envoyé par Bisûnûrs

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

list-style-position:inside;

Comme dit dans l'autre post, mets tous tes balises/propriétés/attibuts en minuscules.

Bonsoir,

J'ai fait comme t'as dit, ça marche mais mes puces se sont mainteant déplacées vers la droite, c'est à dire qu'elles ne se retrouvent plus au bord du tableau, alors j'ai réglé le problème en réglant margin en négatif, soit -12px...
L'inconvénient de cela c'est que des éléments dans mon tableau, en l'occurence un HR qui ne contient pas de css, que j'ai centré par une balise html, n'est plus centré, il semblerait que pour centrer il prenne en compte la marge crée dans mon css pour la liste de puces... C'est bizarre quand même...

Ensuite, maintenant la puce est collée au texte qui la suit et je ne trouve pas comment régler cela, d'ailleurs à la source c'était l'origine de ma question. Maintenant j'ai le souci inverse : comment augmenter l'espace entre ma puce et le texte en css...
Sinon je met un espace dans le texte html par un " "

Merci de votre patience...

**12monkeys** · 21/11/2006, 18h42

A noter qu'il semblerait qu'avec les puces prédéfinies (testé avec disc et square) l'espace entre la puce et le texte reste constant même en mettant ceci :

Code Css :

Sélectionner tout - Visualiser dans une fenêtre à part

list-style-position:inside;

**Kerod** · 21/11/2006, 23h46

Ce n'est qu'une proposition qui a le mérite d'être testé : si tu joues sur le text-indent en lui attribuant une valeur négative ca te donne quoi ?

**Bisûnûrs** · 21/11/2006, 23h46

Il y a vraiment trop de différences d'interprétation des listes entre Firefox et IE.

Le mieux étant de contourner le problème en faisant :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

list-style-type:none;

et de mettre l'image de la puce en background et d'appliquer un padding-left au texte pour qu'il ne se positionne pas sur l'image.

**12monkeys** · 22/11/2006, 18h53

Envoyé par Kerod

Ce n'est qu'une proposition qui a le mérite d'être testé : si tu joues sur le text-indent en lui attribuant une valeur négative ca te donne quoi ?

Merci de ton aide, en fait cela déplace l'ensemble, soit la puce, l'espace entre puce et texte, et le texte... mais ne réduite pas l'écart entre la puce et le texte... Ceci en mettant le text-indent dans la balise de la puce, et non du texte...

Je pense que je vais intégrer une image, le problème ne se pose pas tout à fait dans ce cas...

**12monkeys** · 25/11/2006, 18h23

Envoyé par Bisûnûrs

Il y a vraiment trop de différences d'interprétation des listes entre Firefox et IE.

Le mieux étant de contourner le problème en faisant :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

list-style-type:none;

et de mettre l'image de la puce en background et d'appliquer un padding-left au texte pour qu'il ne se positionne pas sur l'image.

En regardant ce que ça donne dans firefox je crois que tu as tout à fait raison

**marsupix** · 26/11/2006, 15h33

Envoyé par 12monkeys

Merci de ton aide, en fait cela déplace l'ensemble, soit la puce, l'espace entre puce et texte, et le texte... mais ne réduite pas l'écart entre la puce et le texte... Ceci en mettant le text-indent dans la balise de la puce, et non du texte...

Je pense que je vais intégrer une image, le problème ne se pose pas tout à fait dans ce cas...

le text-indent doit etre appliqué seulement aux li.