problème de décalage et de compatibilité
Bonjour à toutes et tous,
j'ai fait un menu en html/css.
Cependant, je ne sais pas pourquoi, le menu est décalé du haut de la cellule.
Pour plus de compréhension, voici mes codes :
CSS
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
| #menu{
width:150px;
}
.menu, .sousmenu{
text-align: right;
}
.menu{
height:18px;
width:150px;
color:#fff;
padding-bottom: 10px;
top:auto;
font-family:arial,sans-serif;
font-size:12px;
text-decoration:none;
}
.sousmenu{
height:14px;
width:170px;
padding: 0px;
color:#ffffff;
text-align: right;
}
.menu a{
display:block;
width:100%;
height:100%;
color:#fff;
font-family:arial,sans-serif;
font-size:12px;
text-decoration:none;
}
.sousmenu a{
display:block;
width:100%;
height:100%;
color:#666666;
font-family:Garamond;
font-size:18px;
text-decoration:none;
}
.sousmenu a:hover, .sousmenu a:active, .sousmenu a:focus{
color:#ffffff;
} |
HTML
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
| <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content=" "/>
<meta name="description" content=" "/>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
<script type="text/javascript" src="js/copie_functions.js"></script>
<style type="text/css">
<!--
body {
margin-top: 0px;
}
-->
</style></head>
<body bgcolor="#333333">
<table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;">
<tr>
<td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"></td>
</tr>
<tr>
<td width="183" valign="top"><div id="menu">
<div class="menu" id="menu1" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
<div id="sousmenu1" style="display:none"><br>
<div class="sousmenu"><a href="#">théâtre</a></div><br>
<div class="sousmenu"><a href="#">enfance et jeunesse</a></div><br>
<div class="sousmenu"><a href="#">poésie</a></div><br>
<div class="sousmenu"><a href="#">traduction</a></div><br>
<div class="sousmenu"><a href="#">inédits</a></div><br>
<div class="sousmenu"><a href="#">autres publications</a></div><br>
</div>
<div class="menu" id="menu2" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
<div id="sousmenu2" style="display:none"><br>
<div class="sousmenu"><a href="#">saison 2010-2011</a></div><br>
<div class="sousmenu"><a href="#">saison 2009-2010</a></div><br>
<div class="sousmenu"><a href="#">archives</a></div><br>
</div>
<div class="menu" id="menu3" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
<div id="sousmenu3" style="display:none"><br>
<div class="sousmenu"><a href="#">lacoop</a></div><br>
<div class="sousmenu"><a href="#">projets pour la scène</a></div><br>
<div class="sousmenu"><a href="#">enseignement/Ateliers</a></div><br>
<div class="sousmenu"><a href="#">radio</a></div><br>
</div>
<div class="menu" id="menu4" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
<div id="sousmenu4" style="display:none"><br>
<div class="sousmenu"><a href="#">à l'affiche</a></div><br>
<div class="sousmenu"><a href="#">nouvelle publication</a></div><br>
<div class="sousmenu"><a href="#">impromptus</a></div><br>
</div>
<div class="menu" id="menu5" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
<div id="sousmenu5" style="display:none"><br>
<div class="sousmenu"><a href="#">presse</a></div><br>
<div class="sousmenu"><a href="#">liens</a></div><br>
<div class="sousmenu"><a href="#">contact</a></div><br>
</div>
</div></td>
<td width="800" valign="top" style="width: 665px; background: #fff;">contenu</td>
<td width="17" style="background: #000;"> </td>
</tr>
</table>
</body>
</html> |
Javascript
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
| function afficheMenu(obj){
var idMenu = obj.id;
var idSousMenu = 'sous' + idMenu;
var sousMenu = document.getElementById(idSousMenu);
/*****************************************************/
/** on cache tous les sous-menus pour n'afficher **/
/** que celui dont le menu correspondant est cliqué **/
/** où 4 correspond au nombre de sous-menus **/
/*****************************************************/
for(var i = 1; i <= 5; i++){
if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
document.getElementById('sousmenu' + i).style.display = "none";
}
}
if(sousMenu){
//alert(sousMenu.style.display);
if(sousMenu.style.display == "block"){
sousMenu.style.display = "none";
}
else{
sousMenu.style.display = "block";
}
}
} |
Pour voir le résultat : http://www.la-grange-sardieres.fr/si...entation2.php#
Sous IE il y a également un problème, lorsque je clique sur un menu pour le dérouler, on attend un clique et l'image est entourée.
Pourriez-vous m'aider s'il vous plait ?
Merci beaucoup et bonne soirée
