Affichage d'une image à la place des puces

**qi9859** · 20/05/2007, 12h08

Bonjour à tous,

Je voulais remplacer les traditionnelles puces de listes et mettant à la place une autre image.

Je pense savoir le faire, mais y a rien qui s'affiche.

Le code ci-dessous est un exemple de ce que je voudrais faire :

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
32
33
34
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<style type="txt/css">
#content ul li{
 list-style: circle;
 list-style-image: url(fleche.gif);
 list-style-position: outside;}
</style>
 
</head>
 
<body>
 
<div id="content">
 
<ul>
	<li>Accueil</li>
		<ul>
			<li>Historique</li>
			<li>Contact</li>
				<ul>
					<li>Contact avec le Webmaster</li>
					<li>Forum</li>
					<li>Livre d'or</li>
				</ul>
		</ul>
</ul>
 
</div>
 
</body>
</html>

S'il y a une erreur, franchement je ne vois pas où ???

Si vous pouviez m'aider en m'apportant vos lumières !

Merci d'avance.

Cordialement, QI9859

**Nesmontou** · 20/05/2007, 13h18

Salut, il ne faudrait pas remplacer

Code :

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

#content ul li{

par

Code :

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

#content ul {

?
Le style s'applique sur la balise ul et non sur li.

Bon développement

**qi9859** · 20/05/2007, 14h35

Envoyé par Nesmontou

Salut, il ne faudrait pas remplacer

Code :

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

#content ul li{

par

Code :

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

#content ul {

?
Le style s'applique sur la balise ul et non sur li.

Bon développement

Non, j'avais déjà essayé comme ça.

En fait, c'est le <li>...</li> qui supporte la puce !

**Dan_A** · 20/05/2007, 14h40

Il manque un doctype, une parenthèse fermante pour #content ul li, un contrôle des margins (marge à gauche suffisante) et paddings.
La meilleure solution c'est peut-être de mettre l'image en background pour li.

**qi9859** · 20/05/2007, 15h01

Envoyé par Dan_A

Il manque un doctype, une parenthèse fermante pour #content ul li, un contrôle des margins (marge à gauche suffisante) et paddings.
La meilleure solution c'est peut-être de mettre l'image en background pour li.

Non toutes le () ou {} sont en place, et en ce qui concerne margin et padding, ici, ça n'a aucune importance puisque ce n'est pas un essai de mise en page.

Le prb est tout autre parce que quand je mets directement dans une balise <li style="list-style-image:url(./images/fleche.gif)">....</li>, c'est OK.

Donc, à mon avis cela vient de <style type="txt/css">....</style>, mais où et comment !!!!
Je ne vois rien du tout.

**othmane126** · 20/05/2007, 15h06

Il faut que tu vérifie est ce que l'image fleche.gif se trouve bien dans le mêmedossier que la feuille de style, si non tu entre son adresse complète ok.
Il faut que tu met list-style-image:url(image/fleche.gif); le problême vient de là.
et pour list-style-image... c le bon code

**qi9859** · 20/05/2007, 15h13

Envoyé par othmane126

Il faut que tu vérifie est ce que l'image fleche.gif se trouve bien dans le mêmedossier que la feuille de style, si non tu entre son adresse complète ok.
Il faut que tu met list-style-image:url(image/fleche.gif); le problême vient de là.
et pour list-style-image... c le bon code

C'est fait tout ça !

J'y comprends de - en -

**othmane126** · 20/05/2007, 15h24

Dans le code que tu as mis tout à l'heure tu as mis

Code :

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

1
2
3
4
5
6
7
8
<style type="txt/css">
#content ul li{
 list-style: circle;
 list-style-image: url(fleche.gif);
 list-style-position: outside;}
</style>
 
</head>

Il faut que tu mets

Code :

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

1
2
3
4
5
6
7
8
<style type="txt/css">
#content ul li{
 list-style: circle;
 list-style-image: url(image/fleche.gif);
 list-style-position: outside;}
</style>
 
</head>

**qi9859** · 20/05/2007, 15h45

Envoyé par othmane126

Dans le code que tu as mis tout à l'heure tu as mis

Code :

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

1
2
3
4
5
6
7
8
<style type="txt/css">
#content ul li{
 list-style: circle;
 list-style-image: url(fleche.gif);
 list-style-position: outside;}
</style>
 
</head>

Il faut que tu mets

Code :

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

1
2
3
4
5
6
7
8
<style type="txt/css">
#content ul li{
 list-style: circle;
 list-style-image: url(image/fleche.gif);
 list-style-position: outside;}
</style>
 
</head>

Si j'ai changé le chemin de l'image, c'est parce que ça n'allait pas avec le rép. images, donc j'ai essayé sans le répertoire.
Ca ne va toujours pas bien que l'image existe à la racine et dans le répertoire.

Et en plus, le "list-style" et le "list-style-position" ne sont d'aucune utilité; enfin je pense...

**othmane126** · 20/05/2007, 16h04

Essai ce code

Code :

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

1
2
3
4
5
6
<style type="txt/css">
li.taclasse{
 list-style: circle;
 list-style-image: url(fleche.gif);
 list-style-position: outside;}
</style>

ou

Code :

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

1
2
3
4
5
6
<style type="txt/css">
ul.taclasse{
 list-style: circle;
 list-style-image: url(fleche.gif);
 list-style-position: outside;}
</style>

Et tu ajoute dans tes listes

Code :

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

<ul class="taclasse">ldjlksdjlq</ul>

Ou

Code :

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

<li class="taclasse">ldjlksdjlq</ul>

Les deux marches bien

**qi9859** · 20/05/2007, 16h18

Envoyé par othmane126

Essai ce code

Code :

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

1
2
3
4
5
6
<style type="txt/css">
li.taclasse{
 list-style: circle;
 list-style-image: url(fleche.gif);
 list-style-position: outside;}
</style>

ou

Code :

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

1
2
3
4
5
6
<style type="txt/css">
ul.taclasse{
 list-style: circle;
 list-style-image: url(fleche.gif);
 list-style-position: outside;}
</style>

Et tu ajoute dans tes listes

Code :

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

<ul class="taclasse">ldjlksdjlq</ul>

Ou

Code :

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

<li class="taclasse">ldjlksdjlq</ul>

Les deux marches bien

Non ça marche pas.
Pour infos dans les codes, à ma connaissance, si limitée soit-elle, un <UL> et toujours accompagné d'un <LI> et ce dernier qui contient les puces.

**othmane126** · 20/05/2007, 16h23

Oui ja sais c par ce que j'ai fais du copier coller quand j'écrivais le message.
En tout cas pour le code que je t'ai donné il marche très bien chez moi. Bonne chance

**qi9859** · 20/05/2007, 16h38

Envoyé par othmane126

Oui ja sais c par ce que j'ai fais du copier coller quand j'écrivais le message.
En tout cas pour le code que je t'ai donné il marche très bien chez moi. Bonne chance

OK ! mais chez moi ça marche pas. Je vais désactiver le firewall et vider le cache, on verra bien.