Position relative ET absolue pour <ul> et <li>

**bigltnt** · 04/04/2007, 12h20

Bonjour,

Je souhaite réaliser un menu dépliant en CSS par la propriété over. Mon menu se trouve à gauche, les rubriques pointées dépliant les sous-rubriques en colonnes, et ces memes sous-rubriques doivent en déplier d'autres, mais cette fois-ci sur la droite:
----------------
|~~Menu~~~~|
---------------
|~Rubrique~~~|
|~~S-rubrique~|
|~~S-rubrique~~SS-rubrique
|~~~~~~~~~~SS-rubrique
|_____________|

Pour ce faire, je suppose que mes SS-rubriques doivent être en position relative pour se placer par rapport à leur S-rubrique, mais en meme temps, il faut qu'elles soient en position absolue pour se placer par dessus le menu et ne pas agrandir mon menu qui décalerai mon div de contenu, placé juste à droite du menu.

Comment faire ???

Car en position absolue, mes SS-rubriques se chevauchent, et cela m'oblige à faire des id plutot que des classes (donc une pour chaque SS-rubrique, c'est ennuyant ...).

Voici mon code html et CSS actuels, les classes réalisées se basant sur les <ul>:

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
<div id="menu">
	<ul class="niveau1">
 
		<li> Annuaire 
			<ul class="niveau2">
				<li><a href="index.php?page=groupe">Consulter</a></li>
				<li><a href="index.php?page=groupe&action=creer">Rechercher</a></li>
			</ul>
		</li>
		<li> Patrimoine 
			<ul class="niveau2">
				<li><a href="index.php?page=rubrique">Lister</a></li>
				<li><a href="index.php?page=rubrique&action=creer">Creer</a></li>
			</ul>
		</li>
		<li> News 
			<ul class="niveau2">
				<li>Sens
					<ul class="niveau3">
						<li><a href="">Consulter</a></li>
						<li><a href="">Ecrire</a></li>
					</ul>
				</li>
				<li>Auxerre
				</li>
			</ul>
		</li>
	</ul>
</div>

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
#menu {
	width: 160px;
	height: 100%;
	float: left;
	margin: 0;
	padding: 0;
	color: red;
	font-weight: bold;
	border: 2px solid green;
	border-top: none;
}
 
#menu ul {
	list-style-type: none;
	margin-left: 0;
}
 
ul.niveau1 li {
	width: 132px;
	height: 40px;
	font-family: "Rockwell Extra Bold", Andalus, "Arial Black";
	font-variant: small-caps;
	background-image: url("img/bouton1.jpeg");
	background-repeat: no-repeat;
	line-height: 200%;
	margin-top: 20px;
}
ul.niveau1 li:hover  ul.niveau2 {
	display: block;
}
 
ul.niveau2 {
	display: none;
	margin: 0;
	padding: 0;
}
 
ul.niveau2 li{
	width: 132px;
	height: 40px;
	font-family: "Rockwell Extra Bold", Andalus, "Arial Black";
	font-variant: small-caps;
	background-image: url("img/bouton1.jpeg");
	background-repeat: no-repeat;
	line-height: 200%;
	margin: 10px;
	padding: 4px;
}
 
ul.niveau2 li a, ul.niveau2 li a:link, ul.niveau2 li a:visited{
	color: green;
	display: block;
	text-decoration: none;
}
 
ul.niveau3 {
	margin: 0;
	padding: 0;
	display: none;
}
 
ul.niveau2 li:hover  ul.niveau3 {
	display: block;
}

Comment gérer le ul.niveau3 ???

Merci de vos remarques et réponses !

**Bisûnûrs** · 04/04/2007, 12h24

Est-ce ça que tu souhaites :
http://developpez.net/forums/showpos...5&postcount=83
?

**bigltnt** · 04/04/2007, 12h57

Et bien en fait je souhaiterais plutôt ne pas avoir de javascript pour 2 raisons:

1) Je n'y connais pas grand chose (je suis déjà en apprentissage de CSS, php, mysql, avec javascript ca sera de trop

)
2) L'administrateur ne veut pas de modification des postes et browser des clients de l'intranet (CSS avec IE6, c'est pas de la tarte lol ! Vive les behavior !

).

Donc si possible la solution tout en CSS ! Si c'est pas possible alors ca risque d'etre trèèèèèèèèèèès compliqué pour moi

Pfff pas facile ...

**Bisûnûrs** · 04/04/2007, 13h34

Je vois ...

Tu peux mettre position:relative à ton <li> du niveau 1, comme ça déjà tu pourras positionner en absolu le niveau 2 et donc le niveau 3 ...

**bigltnt** · 04/04/2007, 13h49

Ouio c'est vrai que le 1er <li> en relatif c'est déjà mieux. Mais le chevauchement des 3ème niveau ne s'arrange pas.

En fait, petite question: ca n'existe pas les classes avec un "position: absolute" ? Car tout les éléments de la même classe se superposeront non ?

Car en effet, si je veux mettre en absolue mes 3èmes niveaux, il faudra que je leur donne des coordonnées différentes, et donc je pert l'interet des classes, et par la meme occasion de mes listes ...

Ou y'a ptet un truc que je n'ai pas saisi ?

**Bisûnûrs** · 04/04/2007, 14h10

En fait, quand tu positionnnes un élément en absolute, il se positionne par rapport à son parent positionné, à défaut, le body.

Donc si tu positionnes en absolu ton niveau 2, ton niveau 3 se positionnera automatiquement par rapport au niveau 2, vu qu'il est positionné. Il n'a pas besoin d'être en relative.

**bigltnt** · 04/04/2007, 14h43

OK je comprend. Donc ce qui veut dire que si je met mon niveau 3 en absolu, afin que les <li> ne se chevauchent pas, et je suis obligé de traiter leur coordonnées indépendament ?

En effet, pour plusieurs <li> de niveau 3, ils ont le meme parent qui est <ul> de niveau 3 ... donc il sont superposés s'ils font partis de la meme classe !

Je crois qu'il n'y a pas de solutions en CSS pur. Le positionnement en relatif aurait pu le faire mais mon menu n'est pas assez large et le déploiement du 3ème niveau sur la droite fait décaler mon conteneur (pas accéptable).

C'est bien triste

Snif :'(

**Bisûnûrs** · 04/04/2007, 15h07

Pour le niveau 3, ne postionne pas les <li> en absolu, mais les <ul> directement. Leur parent sera le <li> juste avant qui lui est aussi positionné en absolu.

**bigltnt** · 04/04/2007, 15h26

Ah bah oui ! Pourquoi j'ai pas tilté plus tôt et que je m'acharnais sur les <li> ...

Y'a pas à dire, depuis que j'ai 5 ans les bizounours sont tjrs aussi sympa ^^

Ben ca marche ! Je donne vite fais mon code pour si quelqu'un a le meme problème que moi, mais il faudra l'adapter c'est pas très propre !

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
#menu {
	width: 160px;
	height: 100%;
	float: left;
	margin: 0;
	padding: 0;
	color: red;
	font-weight: bold;
	border: 2px solid green;
	border-top: none;
 
}
 
#menu ul {
	list-style-type: none;
	margin-left: 0;
}
 
ul.niveau1 li {
	position: relative;
	width: 132px;
	height: 40px;
	font-family: "Rockwell Extra Bold", Andalus, "Arial Black";
	font-variant: small-caps;
	background-image: url("img/bouton1.jpeg");
	background-repeat: no-repeat;
	line-height: 200%;
	margin-top: 20px;
}
ul.niveau1 li:hover  ul.niveau2 {
	display: block;
}
 
ul.niveau2 {
	display: none;
 
}
 
ul.niveau2 li{
	width: 132px;
	height: 40px;
	font-family: "Rockwell Extra Bold", Andalus, "Arial Black";
	font-variant: small-caps;
	background-image: url("img/bouton1.jpeg");
	background-repeat: no-repeat;
	line-height: 200%;
}
 
ul.niveau2 li a, ul.niveau2 li a:link, ul.niveau2 li a:visited{
	color: green;
	display: block;
	text-decoration: none;
}
 
ul.niveau3 {
	margin: 0;
	padding: 0;
	display: none;
	position: absolute;
}
 
ul.niveau2 li:hover  ul.niveau3 {
	display: block;
	left: 132px;
	top: 0px;
}
 
 
ul.niveau3 li {
	margin:0;
	padding:0;
}

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
<div id="menu">
	<ul class="niveau1">
 
		<li> Annuaire 
			<ul class="niveau2">
				<li><a href="">Consulter</a></li>
				<li><a href="">Rechercher</a></li>
			</ul>
		</li>
		<li> Patrimoine 
			<ul class="niveau2">
				<li><a href="">Lister</a></li>
				<li><a href="">Ajouter</a></li>
			</ul>
		</li>
		<li> News 
			<ul class="niveau2">
				<li>News1
					<ul class="niveau3">
						<li><a href="">Consulter News</a></li>
						<li><a href="">Ecrire News</a></li>
					</ul>
				</li>
				<li>News2
				</li>
			</ul>
		</li>
	</ul>
</div>

Voila encore un grand merci a toi bizoo, et a bientot !

**Bisûnûrs** · 04/04/2007, 15h35

Un dernier truc quand même, ton code ne fonctionne pas sur IE6.

En effet, IE6 ne reconnaît pas la pseudo-classe hover sur autre chose que les liens. Donc sur les li, 'a marche pas.

**bigltnt** · 04/04/2007, 15h58

Voui je sais

C'est pour ca que pour les gens qui veulent faire comme moi (c'est à dire un hover sur autre chose qu'un <a href="">) et veulent que ca fonctionne sur IE6, il faut mettre dans votre CSS

Code :

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

body {behavior:url("csshover2.htc");}

Ca vous permet de faire un hover sur ce que vous voulez ! Bien sûr vous devez télécharger "csshover2.htc" sur le net (ca se trouve très facilement) ou ici.

Ce fichier ne se place pas à l'endroit du CSS, mais là où sont vos pages php/html. Voila voila :p

**Bisûnûrs** · 04/04/2007, 16h00

Ok, parfait alors.

Position relative ET absolue pour <ul> et <li>

Positionnement en CSS

Discussions similaires

Partager

Partager