Menu deroulant et jeux de cadre

**fred_sj413** · 13/10/2010, 10h07

Bonjour , je vient de me lancer dans css et j ai un probleme , j ai realise un jeu de cadre sous css ainsi qu un menu deroulant , le probleme c est quand je clique su un bouton du menu deroulant , la page appele ce place sur une nouvelle feuille bien que j ai rentre sur la page la commande pour la placer a un endroit de ma page .

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
<!DOCTYPE HTML P
 
page index
 
UBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" />
	 <script type="text/javascript" src="functions.js"></script>
<title>Positionnement CSS</title>
</head>
<body>
   <div id="bandeau">Ceci est le bandeau</div>
      <div id="menu">
       <div class="menu" id="menu1" onmouseover="affiche(this)">
	    <a href="#">Menu 1</a>
		<div class="sousmenu" id="sousmenu1" style="display:none" onmouseout="affiche(this)">
			<div><a href="page1betty.html#">SousMenu 1.1</a></div>
			<div><a href="page2betty.html#">SousMenu 1.2</a></div>
			<div><a href="#">SousMenu 1.3</a></div>
		</div>
	</div>
	<div class="menu" id="menu2" onmouseover="affiche(this)">
		<a href="#">Menu 2</a>
		<div class="sousmenu" id="sousmenu2" style="display:none" onmouseout="affiche(this)">
			<div><a href="#">SousMenu 2.1</a></div>
			<div><a href="#">SousMenu 2.2</a></div>
			<div><a href="#">SousMenu 2.3</a></div>
		</div>
	</div>
	<div class="menu" id="menu3" onmouseover="affiche(this)"><a href="#">Menu 3</a></div>
	<div class="menu" id="menu4" onmouseover="affiche(this)"><a href="#">Menu 4</a></div>
</div>
	<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>

page css

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
 
*{
	margin:0;
	padding:0;
}
#menu{
	background:#0f0;
	color:#fff;
	float:left;
	display:inline;
}
#menu div{
	width:120px;
	text-align:center;
}
.menu{
	position:relative;
}
#menu div a:link, #menu div a:visited, #menu div a:hover{
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
	padding-top:3px;
	height:22px;
	display:block;
}
#menu div a:link, #menu div a:visited{
	background:#404040;
}
#menu div a:hover, #menu div a:active, #menu div a:focus{
	background:#ca0003;
}
.sousmenu{
	position:absolute;
	left:120px;
	top:0;
}
#content{
	margin:20px 0 0 10px;
	width:600px;
	border:1px solid #abc;
	float:left;
}
div {
	text-align:center;
	}
div#bandeau {
	width:600px;
	height:50px;
	background-color:#00CCFF;
	}
div#menu {
	float:left;
	width:100px;
	height:400px;
	background-color:#FF6699;
	}
div#contenu {
	float:left;
	width:500px;
	height:400px;
	background-color:#FFCC00;
	}
div#pied_page {
	clear:both;
	width:600px;
	height:50px;
	background-color:#33FF99;
	}