Liste à puce (list-style) mettre un simple tiret ?

**Fabious** · 04/08/2008, 14h14

Bonjour tlm,

Bon peut être que le titre n'est pas très explicite, je vais "essayer" d'expliquer mon problème clairement (je suis très mauvais pour ça..)

Donc je voudrais mettre de simple tiret a une liste (<ul> <li>), sachant qu'il est n'y a pas ce dit tiret dans les propriétés "list-style" :
Le problème est que si je met ces tiret à la main dans le code, ma liste est mal présenté car si une ligne tient sur 2 ou plusieurs lignes, ces lignes additionelles commencent sous le tiret, alors qu'elles auraient commencé après la puce si c'était une puce de list style (un cercle par exemple).

Comment faire pour que ces tirets soient réellement compté comme une puce ?

J'espère que quelqu'un aura compris mon problème lol je suis vraiment mauvais pour m'expliquer je vous ai prévenu ^^

Merci d'avance

**12monkeys** · 04/08/2008, 21h36

Bonsoir

Ne t'en fais pas, je t'ai très bien compris

Utilises à la place une image que tu utiliseras avec list-style-image, en tout cas c'est comme ça que je fais...

**Fabious** · 05/08/2008, 09h15

Merci pour ta réponse,

Je voulais éviter cette solution de secours mais si il n'y a que ca

Je vais devoir faire une image d'un tiret lol, ils auraient pu mettre le tiret dans le list-style !

**ben.IT** · 03/05/2012, 17h14

Salut à tous,
je me permets de relancer le topic 4 ans après, car je rencontre le même problème (je souhaiterai préfixer les éléments de mes listes avec un tiret).
Est ce qu'il y a une autre solution ou bien est on obligé de passer par une image ?

Voici le rendu que je souhaite :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 -element1
  suite de element1
  suite de element1
  suite de element1
 
 -element2
  suite de element2
  suite de element2
  suite de element2

et non

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 -element1
suite de element1
suite de element1
suite de element1
 
 -element2
suite de element2
suite de element2
suite de element2

Le tiret doit précéder l'élément de liste

Est ce que quelqu’un sait comment je peux faire ça en CSS ?
J'ai essayer la propriété css li:before mais celle ci ne semble pas supportée.

merci d'avance,
ben

**Bisûnûrs** · 03/05/2012, 17h46

Pourtant ça fonctionne très ben :

Code html :

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

1
2
3
4
5
6
<ul>
   <li>Test 1</li>
   <li>Test 2</li>
   <li>Test 3</li>
   <li>Test 4</li>
</ul>

Code :

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

1
2
3
4
5
6
ul {
   list-style-type: none;
}
li:before {
   content: '- ';
}

**ben.IT** · 03/05/2012, 18h22

merci de ta réponse,
j'ai essayé sous FF cela ne fonctionne pas sous IE (7 et 8) chez moi.
ben

**elfamine** · 03/05/2012, 18h36

Bonjour,

vu l'exemple donné :

Code :

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

1
2
3
4
5
6
7
8
9
 -element1
  suite de element1
  suite de element1
  suite de element1
 
 -element2
  suite de element2
  suite de element2
  suite de element2

Est ce qu'il ne serait pas mieux d'utiliser des balises <dl><dt><dd>

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
22
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
dt:before {content: '-';}
dd{margin-left:10px;} <!-- on pourait supprimer cette ligne vu qu'ils sont par defaut margé sur la gauche -->
</style>
</head>
<body>
 
<dl>
<dt>element1</dt>
<dd>suite de element1</dd>
<dd>suite de element1</dd>
<dd>suite de element1</dd>
 
<dt>element2</dt>
<dd>suite de element2</dd>
<dd>suite de element2</dd>
<dd>suite de element2</dd>
</dl>
</html>

testé sur FF et IE 9

**ben.IT** · 04/05/2012, 10h20

salut Melcain,
merci de ta réponse, j'ai besoin d'une compatibilité avec IE 7.
Sous IE 7, les tirets n'apparaissent pas.
une idée ?

si c'est vraiment impossible, je testerai avec list-style-image.

merci,
ben

**elfamine** · 04/05/2012, 11h55

Bonjour,
Alors attention je suis debutant en javascript y a peut etre mieux comme code.

Code :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(document).ready(function() {
	$('dt').each(function(insert){
			insert = "-";
			insert += $(this).text();
			$(this).empty().append(insert);
	});
});
</script>

pour chaque dt on va initialiser une variable insert avec la valeur :"-". ensuite on récupère le texte que contient la balise dt et concatène le tout. A ce moment la Insert va avoir comme valeur "-"+"la chaine de caractère de notre dt actuel".On remplace le contenu de dt par la valeur insert et on reboucle autant de fois qu'il faut

apres je sais pas si y'a moyen d'insérer le - tout betement. J'ai essayer avec

Code :

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

$('dt:before').css('content','"-"');

ou encore avec

Code :

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

$('dt').before('-');

ca n'a pas vraiment fonctionné.

sinon voila le code complet pour le test (testé sous ie7 ca a l'air d'etre bon)

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
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
dd{margin-left:20px;} <!-- Regler la marge ici -->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('dt').each(function(insert){
			insert = "-";
			insert += $(this).text();
			$(this).empty().append(insert);
	});
});
</script>
</head>
<body>
 
<dl>
<dt>element1</dt>
<dd>suite de element1</dd>
<dd>suite de element1</dd>
<dd>suite de element1</dd>
 
<dt>element2</dt>
<dd>suite de element2</dd>
<dd>suite de element2</dd>
<dd>suite de element2</dd>
</dl>
</html>

**ben.IT** · 04/05/2012, 19h27

Salut,
merci de ta réponse. Je ne préfère pas mettre de JQUERY pour un truc aussi simple.

voici comment je me suis débrouillé :

Code :

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

list-style-image:url(../images/puce_style1.jpg);

mais ne fonctionne pas sous IE 7 http://esprit-creatif.blog.mongenie....idblogp=406297

en revanche, fonctionne partiellement sous IE7 et fonctionne sous IE8 :

Code :

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

background:url(../images/puce_style1.jpg) center left no-repeat;

a+
ben

**ben.IT** · 09/05/2012, 16h50

voici une solution qui fonctionne sous IE 7,8 , chrome et FF en fixant la hauteur de ligne et en centrant les puces au niveau des textes :

Code :

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

1
2
3
4
5
6
7
8
9
#actu li {
margin-bottom:0px;
height:20px;
padding-bottom:10px;
padding-top:10px;
background-image: url(../images/puce_style1.jpg);
background-repeat: no-repeat;
background-position: left;
}

a+
ben

Liste à puce (list-style) mettre un simple tiret ?

CSS

Discussions similaires

Partager

Partager