[HTML] Cadres et Menu

**JCD_31** · 01/06/2006, 16h10

J'ai fait un menu vertical (cf topic:http://www.developpez.net/forums/sho...d.php?t=157143 où ce serait bien de savoir comment je peut le mettre vertical) dans un cadre à gauche. J'ai fait un autre cadre à droite. Le problème est que lorsque je passe la souris sur une rubrique pour afficher un sous-menu, le cadre de droite reste "au-dessus" et masque ce sous-menu. Comment faire pour que se soit le cadre de gauche qui soit "au dessus" du cadre de droite?

merci et @+

**<romain/>** · 01/06/2006, 16h12

tu peux nous montrer ton code (x)html et ton css?

On pourra t'aider plus facilement...

romain

**JCD_31** · 01/06/2006, 16h20

Le jeu de cadres:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
 
<frameset rows="150,*" cols="*" frameborder="no" border="0" framespacing="0">
  <frame src="file:///C:/Documents and Settings/smarrot/Bureau/developpement/site CE/logo.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
  <frameset cols="220,*" frameborder="no" border="0" framespacing="0">
    <frame src="file:///C:/Documents and Settings/smarrot/Bureau/developpement/site CE/menu.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" />
    <frame src="file:///C:\Documents and Settings\smarrot\Bureau\developpement\site CE\tableau.html" name="mainFrame" id="mainFrame" />
  </frameset>
</frameset>
<noframes><body>
</body>
</noframes></html>

**Kerod** · 01/06/2006, 17h22

Bon voilà un petit code que j'ai testé que sous FF :

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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!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">
<head>
<style type="text/css">
body
{
 font: 11px verdana, sans-serif;
 background: #AFA99B url("fond.jpg") top left no-repeat;
 margin: 0;
 padding: 0;
}
#menuDeroulant
{
 width: 644px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li
{
 width: 150px;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 width: 150px;
 height: auto;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 149px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu
{
 left:150px;
 position:absolute;
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; 
 margin-top:-22px;}
</style>
</head>
 
 
<body background="site bia/back.gif">
<ul id="menuDeroulant">
 <li>
  <a href="#">Partie 1</a>
  <ul class="sousMenu">
   <li><a href="#">castor</a></li>
   <li><a href="#">aligator</a></li>
   <li><a href="#">musclor</a></li>
  </ul>
 </li>
 <li>
  <a href="#">Partie 2</a>
  <ul class="sousMenu">
   <li><a href="#">whisky</a></li>
   <li><a href="#">vodka</a></li>
   <li><a href="#">gin</a></li>
   <li><a href="#">vin</a></li>
   <li><a href="#">champagne</a></li>
  </ul>
 </li>
 <li>
  <a href="#">Partie 3</a>
  <ul class="sousMenu">
   <li><a href="#">pommes</a></li>
   <li><a href="#">poires</a></li>
   <li><a href="#">ananas</a></li>
   <li><a href="#">pamplemousse</a></li>
   <li><a href="#">banane</a></li>
   <li><a href="#">raisins</a></li>
   <li><a href="#">framboises</a></li>
   <li><a href="#">fraises</a></li>
   <li><a href="#">mirabelles</a></li>
   <li><a href="#">groseilles</a></li>
 </ul>
 </li>
 <li>
 <a href="#">Partie 4</a>
  <ul class="sousMenu">
   <li><a href="#">tomates</a></li>
   <li><a href="#">haricots</a></li>
   <li><a href="#">carrottes</a></li>
   <li><a href="#">choux</a></li>
   <li><a href="#">concombres</a></li>
   <li><a href="#">courgettes</a></li>
   <li><a href="#">endives</a></li>
   <li><a href="#">navets</a></li>
   <li><a href="#">epinards</a></li>
   <li><a href="#">avocat</a></li>
  </ul>
 </li>
</ul>
</body>
</html>