[CSS] Améliorer mes listes ul li

Version imprimable

Bonjour,

j'ai tenté de faire un menu avec des ul li ul li, etc... car avant je ne faisais que des div, ce qui n'est pas bon !

J'ai juste un problème sur la mise en forme.
Du texte apparait lors du survol de mon bloc 'texte 1 à texte 4'. J'aimerais que ce texte apparaisse à droite de ce bloc.

Comment procéder ? J'ai essayé de jongler avec les float, position, etc... mais rien à faire...

Voici mon code :

Code:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
 
 
 
	<head>
		<title>Site Industrie EAT</title>
 
		<meta http-equiv="Content-Language" content="fr">
    	<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
 
	    <meta http-equiv="Content-style-type" content="text/css" />
 
<style type="text/css">
 
 
<!--
 
 
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
 
a:hover {
background: none; /* correction d'un bug IE */
}
 
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
 
a:hover span { /* définition de la balise <span> au survol */
position : relative;
display: inline;
top: 0px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: 0px;
background: blue;
text-align: center;
color: white;
}
 
ul li { /* toutes les listes auront un fond bleu */  
background: blue; 
display:inline;
 
} 
ul li ul li{ /* toutes les listes situé dans des listes auront un fond rouge */ 
background: red; 
} 
 
ul li ul li ul li{ /* toutes les listes situé dans des listes auront un fond vert */ 
background: green; 
} 
 
 
-->
</style>
 
 
	</head>
 
 
<body>
 
 
 
<div>
<ul>
	<li>Niveau 1
	    <ul>
        	<li>Niveau 2
		        <ul>
				<a href="#">Texte 1<br />Texte 2<br />Texte 3<br />Texte 4<br />
					<span>
						<li>Texte 1</li>
						<li>Texte 2</li>
					</span>
				</a>
		        </ul>
		</li>
	    </ul>
	</li>
	<li>Niveau 1
	    <ul>
        	<li>Niveau 2
		        <ul>
				<a href="#">Texte 1<br />Texte 2<br />Texte 3<br />Texte 4<br />
					<span>
						<li>Texte 1</li>
						<li>Texte 2</li>
					</span>
				</a>
		        </ul>
		</li>
	    </ul>
	</li>	<li>Niveau 1
	    <ul>
        	<li>Niveau 2
		        <ul>
				<a href="#">Texte 1<br />Texte 2<br />Texte 3<br />Texte 4<br />
					<span>
						<li>Texte 1</li>
						<li>Texte 2</li>
					</span>
				</a>
		        </ul>
		</li>
	    </ul>
	</li>
</ul>
</div>
 
 
</body>
 
</html>

Quelqu'un a une idée ?

13/09/2005, 20h16
spirou

Salut,

Je ne sais pas ce que tu veux réellement obtenir, mais le seul moyen que je connaisse pour placer ton span là où tu le souhaite est de le mettre en position absolue, mais il va falloir que tu définisse des dimensions à tes balises ul, li, a, ce qui te promets un beau casse-tête en perspective :mouarf:

Dans ton code il est vraiment difficile de s'y retrouver, peut-être devrais tu mettre des classes pour chaque listes afin de mieux le comprendre.

De plus il y a beaucoup d'erreurs, passe ton fichier au validateur pour les visualiser, ou avec un éditeur les contrôlant.

En tout cas bons plaisirs avec ta mise en page.

:uc:

Bon, apparemment ce que je veux faire ne peut pas se faire de manière simple en CSS.

Tant pis, j'ai pas vraiement le temps de me casser la tête. Je vais me faire un tableau HTML et intégrer une fonction javascript pour l'affichage au passage de la zone de texte.

Merci quand meme !

Edit : au cas où, ce que je souhaite obtenir, c'est ca :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 TEXTE NIV 1 TEXTE NIVEAU 2 IMAGE TEXTE AFFICHé au survol Image TEXTE NIVEAU 2 IMAGE TEXTE AFFICHé au survol Image TEXTE NIVEAU 2 IMAGE TEXTE AFFICHé au survol Image TEXTE NIV 1 TEXTE NIVEAU 2 IMAGE TEXTE AFFICHé au survol Image TEXTE NIVEAU 2 IMAGE TEXTE AFFICHé au survol Image

J'ai passé les validations W3C, mais j'ai encore le meme probleme :

Code:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
 
 
 
	<head>
		<title>Site Industrie EAT</title>
 
		<meta http-equiv="Content-Language" content="fr" />
    	<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
 
	   <meta http-equiv="Content-style-type" content="text/css" />
 
		<style type="text/css">
 
 
<!--
 
.details li {
float: left;
}
 
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
 
a:hover {
background: none; /* correction d'un bug IE */
}
 
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
 
a:hover span { /* définition de la balise <span> au survol */
position:relative;
display: inline;
top: 0px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: 20px;
background: blue;
text-align: center;
color: black;
}
 
ul li { /* toutes les listes auront un fond bleu */  
background: blue; 
display:inline;
 
} 
ul li ul li{ /* toutes les listes situé dans des listes auront un fond rouge */ 
background: red; 
} 
 
ul li ul li ul li{
	/* toutes les listes situé dans des listes auront un fond vert */
	background: green;
} 
 
 
-->
</style>
 
 
	</head>
 
 
	<body>
 
 
 
<ul>
	<li>Niveau 1
		<ul>
        		<li>Niveau 2
				<ul class="detail">
		        		<li>
						<a href="#"><img src="test.jpg" alt="Test"/>
							<span>Texte 1 Texte 2</span>
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
 
 
 
 
</body>
 
</html>