[CSS] Améliorer mes listes ul li

**barthoose** · 13/09/2005, 17h04

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 :

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

**spirou** · 13/09/2005, 20h16

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

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:

**barthoose** · 13/09/2005, 20h54

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 :

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

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

**barthoose** · 13/09/2005, 23h14

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

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

[CSS] Améliorer mes listes ul li

CSS

Vue hybride

Discussions similaires

Partager

Partager