[HTML] Cadres et Menu

Version imprimable

01/06/2006, 15h10
JCD_31

[HTML] Cadres et Menu

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 @+
01/06/2006, 15h12
<romain/>

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

On pourra t'aider plus facilement...

romain

Le jeu de cadres:

Code:

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>

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

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

01/06/2006, 16h37
JCD_31

Yeah ça marche nickel merci bcp!! :D :D

Il reste à résoudre ce problème de cadres... (ne croyez pas que j'attend la réponse sans rien faire, je cherche moi aussi ;) )
05/06/2006, 10h26
JCD_31

petit up