erreur dans menu et décalage

**quaresma** · 22/10/2010, 22h35

Bonsoir,
je suis en train de faire un menu en php/sql, mais j'ai quelques problèmes.

Voici le code de la page "presentation.php" :

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
<!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/style_menu.css" type="text/css" />
	 <script type="text/javascript" src="js/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;">&nbsp;</td>
</tr>
<tr>
<td width="183" valign="top" style="width: 145px;"><?php include"menu/menu.php" ?></td>
<td width="850" style="width: 682px; background: #fff;">contenu</td>
<td width="17" style="background: #000;">&nbsp;</td>
</tr>
</table>
 
</body>
</html>

Voici le code du 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
#menu { 
width: 150px;
background: #000;
margin: 0;
}
.menu_niv2 { display: none; }
.menu_niv1 a { 
display: block;
background: #333; 
color: #fff;
text-decoration: none;
text-align: center;
}
.menu_niv1 a:hover { 
display: block;
background: #666; 
color: #fff;
text-decoration: underline;
text-align: center;
}
.menu_niv2 a {
color: #333;
background: #ccc;
text-decoration: none;
text-align: center;
display: block;
}
.menu_niv2 a:hover {
color: #333;
background: #aaa;
text-decoration: underline;
text-align: center;
display: block;
}

Voici le code du js :

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
function afficheMenu(menu) {
// generation du nom du sous menu que l'on veut gerer (afficher / cacher)
var sousMenu='sous' + menu;
// on recupere son etat
var etatSousMenu=document.getElementById(sousMenu).style.display;
// on cree un array de tous les menus de niveau 1, donc ceux qui ont la classe 'menu_niv1'
var listeNiv1=document.getElementsByClassName('menu_niv1');
// on boucle sur ces elements
for (var i=0; i<listeNiv1.length; i++) {
// on recupere l'id du menu courant
var idCourant=listeNiv1[i].id;
// si l'id courant est le meme que le menu que l'on a clique alors on traite le sous menu
// sinon on le cache et on passe au suivant
if (idCourant==menu) {
if (etatSousMenu=='block') {
document.getElementById(sousMenu).style.display='none';
} else {
document.getElementById(sousMenu).style.display='block';
}
} else {
// attention, si on cache, on doit cacher le sous menu du menu courant, il faut donc creer une nouvelle variable pour cacher celui-ci
var sousMenuTemp='sous' + idCourant;
document.getElementById(sousMenuTemp).style.display='none';
}
}
}

Et, enfin le code du menu :

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
<div id="menu">
<?php
require("identification/connexion_sql.php");
// on attaque le php ici
// dans un premier temps on recupere les menus de niveau 1 donc ceux qui ont l'id_parent egal a 0
$req1 = "SELECT id_menu, lib_menu FROM menus WHERE id_parent='0' ORDER BY ordre_menu" or die ("impossible d'effectuer la requête");
$rep1 = mysql_query($req1);
while($row1 = mysql_fetch_array($rep1)) {
// on affiche le menu de niveau 1
echo "<div class=\"menu_niv1\" id=\"menu".$row1['id_menu']."\" onclick=\"afficheMenu(this.id)\"><a href=\"#\">".$row1['lib_menu']."</a></div>\n";
// ensuite on fait une seconde requete pour chercher les sous menus de ce niveau, s'il y en a on les affiche, sinon on ne fait rien
$req2="SELECT id_menu, lib_menu FROM menus WHERE id_parent='".$row1['id_menu']."' ORDER BY ordre_menu"  or die ("impossible d'effectuer la requête");
$rep2=mysql_query($req2);
$nb2=mysql_num_rows($rep2);
if (isset($nb2) && $nb2>0) {
echo "<div id=\"sousmenu".$row1['id_menu']."\" class=\"menu_niv2\">\n";
while ($row2=mysql_fetch_array($rep2)) {
echo "<a href=\"#\">".htmlentities($row2['lib_menu'])."</a>\n";
}
echo "</div>\n";
}
}
?>
</div>

le premier problème est le décalage du menu par rapport à la zone blanche.
Normalement, le menu doit être à la même hauteur que la zone blanche, mais ce n'est pas le cas

Je ne comprends pas pourquoi il y a ce problème.

Autre problème, le menu ne fonctionne pas du tout sous IE.

Le résultat est visible ici : http://www.la-grange-sardieres.fr/si...esentation.php

Pensez-vous pouvoir m'aider ?

Merci beaucoup et bonne soirée

**antoyo** · 23/10/2010, 17h18

Salut,
un design de site Web ne se fait avec un tableau.
Un tableau doit seulement être utilisé pour des données tabulaires.
Je crois que tu devrais lire ce tutoriel.
À plus !

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

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

erreur dans menu et décalage [HTML 5]

HTML

Vue hybride

Discussions similaires

Partager

Partager