problème de décalage et de compatibilité

**quaresma** · 23/10/2010, 21h48

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 :

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

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
<!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&eacute;&acirc;tre</a></div><br>
<div class="sousmenu"><a href="#">enfance et jeunesse</a></div><br>
<div class="sousmenu"><a href="#">po&eacute;sie</a></div><br>
 
<div class="sousmenu"><a href="#">traduction</a></div><br>
<div class="sousmenu"><a href="#">in&eacute;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&egrave;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="#">&agrave; 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;">&nbsp;</td>
</tr>
</table>
 
</body>
</html>

Javascript

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

**antoyo** · 24/10/2010, 17h35

Salut,
pourquoi faire un autre sujet pour le même problème ?

Je t’ai déjà répondu que tu ne dois pas faire un design avec un tableau.
Ton tableau, là, ne te sert à rien…

Je t’avais également donné le lien de ce tutoriel, mais, manifestement, tu ne l’as pas lu.
Si tu souhaite progresser, tu devras lire des tas de truc.

Donc, supprime ton tableau, fais-toi un div pour le menu, un pour le corps de ta page, etc.

Un autre point, tu pourrais utiliser des listes pour tes menus.

Alors, lis et retravaille ton code du mieux que tu peux avant de demander de l’aide ; nous ne ferons pas le travail à ta place.

À plus !

**quaresma** · 31/10/2010, 23h29

En effet, je supprimé tous les tableaux qui ne servent à rien sauf à générer plein d'erreur. Et je les ai remplacé par des div.

Du coup, plus de problème et le site fonctionne bien sous IE, firefox et Safari (pour le moment)

merci beaucoup et bonne soirée

problème de décalage et de compatibilité [HTML 5]

HTML

Vue hybride

Discussions similaires

Partager

Partager