mes puces me démangent !

Version imprimable

07/11/2005, 14h51
SpaceFrog

mes puces me démangent !
je construis dynamiquement en javascript une page web à partir d'un fichier récupéré en XMLhttprequest.
j'utilise des li qui me posent problème avec leurs puces lorsque la li s'affiche sur plusieurs lignes ......

j'aimerais en effet avoir un alignement du type:
Code:

1 2 o lorsque la li depasse la ligne il devrait me faire une indentation propre
mais il me fair eun retour complet à droite ...
Code:

1 2 3 o lorsque la li depasse la ligne il devrait me faire une indentation propre
il existe un truc css pour remedier à ça ?
07/11/2005, 15h20
hunter

tu veux enlever la puce ??

ou tu veux que lord du retour à la ligne ca passe pas sous la puce ??
07/11/2005, 15h25
SpaceFrog

ha mince l'alignement à foiré ...
je recommence ...

bonjour,

utilise la propriété list-style-position :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
	<title></title>
<style type="text/css">
.MaListe{
list-style-type: circle;
list-style-position: outside;
}
</style>
</head>
 
<body>
<ul class="MaListe">
<li>bla bla bla bla <br>bla bla bla bla
<li>bla bla bla bla bla bla bla bla
<li>bla bla bla bla bla bla bla bla
<li>bla bla bla bla bla bla bla bla
</ul>
</body>
 
</html>

list-style-position prend 2 valeurs : outside ou inside

une petite triche tu mets une image pour le ° et le texte
Code:

1 2 <li><div class="point"></div><div class="text"></div></li>
css:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 li { width:100px; } .image { backgroung-image: url(image.jpg); backgroung-repeat: no-repeat; height:100%; width:10px; float:left; } .text { width:90px; float:right; }
vla je sius pas sûr du code .. c'est un solution pas très propre j'en connais pas d'autre (j'enleve case tjr les °)

07/11/2005, 15h39
SpaceFrog

Auteur => j'avais essayé avec position, mais du coup il me vire complètement la puce ..???!!!

hunter ... heu oui mais dans ce cas plus besoin de li ...
07/11/2005, 15h51
Auteur

Citation:

il me vire complètement la puce ..???!!!

8O
Je n'ai pas de souci moi (FF et IE)!

tu as imposé des marges à ta liste (text-indent, margin-left) ?
07/11/2005, 16h01
SpaceFrog

desolé auteur, j'ai oublié de préciser que j'ai deux li sur la même ligne ...
07/11/2005, 16h08
SpaceFrog
en fait avec pôsition outside, mes puce étaient toujours là mais masquées par des images ...

donc je m'en suis sorti comme ça :
Code:

1 2 3 4 5 li {padding-left:20px; list-style-position:outside; text-indent:0px; }
Merci du coup de main :wink:
07/11/2005, 16h15
Auteur
Citation:
Envoyé par SpaceFrog

en fait avec pôsition outside, mes puce étaient toujours là mais masquées par des images ...

donc je m'en suis sorti comme ça :

Code:

1 2 3 4 5 li {padding-left:20px; list-style-position:outside; text-indent:0px; }

Merci du coup de main :wink:
ah, si les images s'y mettent... :roll:
07/11/2005, 16h27
SpaceFrog

raf j'ai parlé trop vite ...
ça plante sur fire fox ...
07/11/2005, 16h36
SpaceFrog

j'ai rajouté un margin-left et c'est bon ...