Discussion :

[andlio]

Bonjour à tous,

Je travaille actuellement sur le développement d'une application Web.
Je voudrais que le menu principal soit fixe. J'utilise donc des pseudos frames avec des div.
Je me suis fortement inspiré de ce site : http://www.dynamicdrive.com/style/la...frames-layout/

Le problème, c'est que mon menu principal est un menu déroulant, et que les sous-menus ne s'affichent pas (caché par les autres pseudos frames).

Comment y remédier ?

Voici mon CSS "LAYOUT":

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
/* LAYOUT */
body {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	height: 100%;
	max-height: 100%;
}
 
#frame_content_top {
	position: absolute;
	top: 0;
	left: 0px; /*Set left value to WidthOfLeftFrameDiv*/
	right: 0;
	/*height: 125px;*/ /*Height of top frame div*/
	height:25px;
	overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
	z-index: 1;
}
 
#frame_content_left {
	position: absolute;
	top: 125px; left : 0; width : 200px; /*Width of left frame div*/
	height: 100%;
	overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
	background-color: white;
	color: black;
	background-image: url(../images/content_menu_bg.png) !important;
	background-position: right top;
	background-repeat: repeat-y;
	left: 0;
	width: 200px;
}
 
#frame_content_bottom {
	position: absolute;
	top: auto;
	left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
	bottom: 0;
	right: 0;
	height: 50px; /*Height of bottom frame div*/
	overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
	color: grey;
}
 
#content_container {
	position: fixed;
	top: 125px; /*Set top value to HeightOfTopFrameDiv*/ left : 200px;
	/*Set left value to WidthOfLeftFrameDiv*/
	right: 0;
	bottom: 30px; /*Set bottom value to HeightOfBottomFrameDiv*/
	overflow: auto;
	background: #fff;
	left: 200px; /*Set left value to WidthOfLeftFrameDiv*/ right : 0;
	bottom : 30px; /*Set bottom value to HeightOfBottomFrameDiv*/ overflow
	: auto; background : #fff;
	z-index: 1;
}

Voici mon CSS "MENU":

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
#main_menu,
#main_menu ul /* Liste */ {
	padding: 0; /* pas de marge intérieure */
	margin: 0; /* ni extérieure */
	list-style: none; /* on supprime le style par défaut de la liste */
	line-height: 21px; /* on définit une hauteur pour chaque élément */
	text-align: center;
	/* on centre le texte qui se trouve dans la liste */
}
 
#main_menu /* Ensemble du menu */ {
	font-weight: bold; /* on met le texte en gras */
	font-family: Arial; /* on utilise Arial, c'est plus beau ^^ */
	font-size: 12px; /* hauteur du texte : 12 pixels */
}
 
#main_menu a /* Contenu des listes */ {
	display: block;
	/* on change le type d'élément, les liens deviennent des balises de type block */
	padding: 0; /* aucune marge intérieure */
	background: #000; /* couleur de fond */
	color: #fff; /* couleur du texte */
	text-decoration: none;
	/* on supprime le style par défaut des liens (la plupart du temps = souligné) */
	width: 144px; /* largeur */
}
 
#main_menu a:hover {
	color: #000;
	background: #fff;
}
 
#main_menu li /* Elements des listes */ {
	float: left;
	/* pour IE qui ne reconnaît pas "transparent" */
	border-right: 1px solid #fff;
	/* on met une bordure blanche à droite de chaque élément */
}
 
#main_menu li.selected /* Elements des listes */ {
	color: red;
	border-right: 1px solid red;
	border-bottom: 3px solid red;
	/* on met une bordure rouge en bas de l'élément sélectionné */
}
 
#main_menu li.right /* Elements des listes */ {
	float: right;
	/* pour IE qui ne reconnaît pas "transparent" */
	border-right: 1px solid #fff;
	/* on met une bordure blanche à droite de chaque élément */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #main_menu li {
	border-right: 1px solid transparent;
	/* on met une bordure transparente à droite de chaque élément */
}
 
#main_menu li ul /* Sous-listes */ {
	position: absolute; /* Position absolue */
	width: 144px; /* Largeur des sous-listes */
	left: -999em; /* Hop, on envoie loin du champ de vision */
}
 
#main_menu li ul li /* Éléments de sous-listes */ {
	/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
	border-top: 1px solid #fff;
	/* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

Mon Html :

Code html :

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
<div id="main_container">
	<!-- PSEUDO FRAME TOP -->
	<div id="frame_content_top">
		<ul id="main_menu">
			<li>
				<a href="/mon_appli/">Dashboard</a>
			</li>
			<li class="selected">
				<a href="/mon_appli/projects/" class="selected">
					Projects
				</a>
				<ul>
					<li>
						<a href="/mon_appli/projects/project1/">
							project1
						</a>
					</li>
					<li>
						<a href="/mon_appli/projects/project2/">
							project2
						</a>
					</li>
 
				</ul>
			</li>
			<!-- etc ... -->
		</ul>
	</div>
 
	<!-- PSEUDO FRAME LEFT -->
	<div id="frame_content_left">
		<ul>
			<li class="selected">
				<a href="/mon_appli/projects/project1/">
					Project
				</a><br/>
			</li>
			<li>
				<a href="/mon_appli/projects/project1/action1/">
					action1
				</a><br/>
			</li>
			<li>
				<a href="/mon_appli/projects/project1/action2/">
					action2
				</a><br/>
			</li>
			<!-- etc ... -->
		</ul>
	</div>
 
	<!-- PSEUDO FRAME CONTENT -->
	<div id="content_container">
		<div id="content">
			<div class="innertube">
				CONTENU
			</div>
		</div>
	</div>
 
	<!-- PSEUDO FRAME BOTTOM -->
	<div id="frame_content_bottom">
		<div class="innertube">
			<center>FOOTER</center>
		</div>
	</div>
</div>

[Ceddoc]

Sans me pencher sur le code plus que ça, est-ce que tu as joué avec les z-index?

[andlio]

Oui j'ai essayé de résoudre le problème avec les z-index.
Le menu se déroule et s'affiche correctement.
Le problème c'est que le contenu se trouvant en dessous du menu s'affiche mais n'est plus accessible (impossible de cliquer sur des liens ou de sélectionner du texte par exemple).
Ce qui est encore plus problématique c'est que je rencontre le problème cité ci-dessus même lorsque que le menu n'est pas déroulé ^^

[andlio]

Bon après plusieurs jours de galère, j'ai enfin résolu mon problème :
La pseudo frame du haut (contenant le menu) avait la propriété "overflow" positionnée sur "hidden".
Je l'ai mise en "visible", est tout roule !!!!

TAG RESOLU ^^