mes puces me démangent !

**SpaceFrog** · 07/11/2005, 14h51

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 :

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

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 :

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

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 ?

**hunter** · 07/11/2005, 15h20

tu veux enlever la puce ??

ou tu veux que lord du retour à la ligne ca passe pas sous la puce ??

**SpaceFrog** · 07/11/2005, 15h25

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

**Auteur** · 07/11/2005, 15h34

bonjour,

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

Code :

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

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

**hunter** · 07/11/2005, 15h34

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

Code :

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

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

css:

Code :

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

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 °)

**SpaceFrog** · 07/11/2005, 15h39

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 ...

**Auteur** · 07/11/2005, 15h51

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

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

tu as imposé des marges à ta liste (text-indent, margin-left) ?

**SpaceFrog** · 07/11/2005, 16h01

desolé auteur, j'ai oublié de préciser que j'ai deux li sur la même ligne ...

**SpaceFrog** · 07/11/2005, 16h08

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 :

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

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

Merci du coup de main

**Auteur** · 07/11/2005, 16h15

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 :

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

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

Merci du coup de main

ah, si les images s'y mettent...

**SpaceFrog** · 07/11/2005, 16h27

raf j'ai parlé trop vite ...
ça plante sur fire fox ...

**SpaceFrog** · 07/11/2005, 16h36

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

mes puces me démangent !

HTML

Vue hybride

Discussions similaires

Partager

Partager