Problème affichage Menu deroulant sous Internet Explorer

ahmet08
Problème affichage Menu deroulant sous Internet Explorer

Bonjour,

Voilà, je suis étudiant on a un projet à faire en HTML, j'ai fais mon site sous Unix et j'utilise Mozilla et mon site marche impec ! Le truc c'est que j'utilise plus Internet Explorer, mais j'ai envie de le mettre en ligne mais le problème c'est que mes menus déroulants ne se déroulent pas du tout sous IE même sous la version 7, je vous poste ma feuille de style :
-----------------------------------------------------------

#menu 
{
	padding: 0px 0px 0px 0px ;
	margin: 0px 0px 100px; 
	list-style-type: none;
}
#menu LI 
{
	padding: 0px 0px 0px 0px ;
	margin: 0px 0px 0px 0px; 
	position: relative; 
	width: 150px; 
	height: 5px;
	z-index: 100; 
	float: left; 
}
#menu LI DL 
{
	left: 0px; 
	position: absolute; 
	top: 0px;
}
#menu LI A 
{
	text-decoration: none;
}
#menu LI A:visited 
{
	text-decoration: none;
}
#menu LI DD 
{
	display: none;
}
#menu LI A:hover 
{
	border-top-width: 0px; 
	border-left-width: 0px; 
	border-bottom-width: 0px; 
	border-right-width: 0px;
}
#menu LI:hover DD 
{
	display: block;
}

#menu LI A:hover DL 
{
	padding-bottom: 20px;
}
#menu DL 
{
	padding: 0px 0px 0px 0px ;
	background-color:#df2b2b;
	margin: 0px; 
	width: 150px; 
	cursor: pointer; 
	text-align: center;
}
#menu DT 
{
	padding: 5px 5px 5px 5px ;
	margin: 0px; 
	color: white; 
 	font-size: 13px;
	border-bottom: #444 1px solid;
}#menu DT:hover
{
	background-color:#ac2626;
}#menu DD 
{
	padding: 0px 0px 0px 0px ; 
	font-size: 11px; 
	background-color:#ac2626; 
	margin: 0px; 
	text-align: left;
	height:20px;
}
#menu LI DL:hover
{
	background-color:#ac2626;
}
#menu DD:hover
{
	background:#ff6a21;
}
.haut
{
	width: auto;
	height: 40px;
	color: #fff;
	font-size: 36px;
	padding: 10px;
	background: #1f1f14;
	border: 0px;
} 
.frame
{
	height: 600px;
	width: auto; 
	overflow: auto; 
	font-size: 14px;
	border: 0px;
	margin-left:60px;
	margin-right:60px;
	background: #1f1f14;
}
a:link
{
	color:black;
}
a:visited
{
	color:black;
}
a:active
{
	color:black;
}
a:hover
{
	color:black;
}
body
{
	color:white;
	background:#cdcc89;
}
p
{
	font-size: 13px;
}
-----------------------------------------------------
et dans la page web j'ai juste fais un link rel vers le CSS et j'ai fais un JS

document.write("<div class='haut'>");
document.write("<ul id=menu>");

document.write("<li><table><tr><td></td></tr></table></li>");

document.write("<li><table><tr><td><dl>");
document.write("<dt>Episodes");
document.write("<dd><a href='db.html'>Dragon Ball</a></dd>");
document.write("<dd><a href='dbz.html'>Dragon Ball Z</a></dd>");
document.write("<dd><a href='dbgt.html'>Dragon Ball GT</a></dd>");
document.write("<dd><a href='oav.html'>O.A.V.</a></dd>");
document.write("</dt></dl></td></tr></table></li>");

document.write("<li><table><tr><td><dl>");
document.write("<dt>Galleries d'images");
document.write("<dd><a href='wall.html'>Wallpaper</a></dd>");
document.write("<dd><a href='gifs.html'>Gifs Animé</a></dd>");
document.write("<dd><a href='Dessins.html'>Mes Dessins</a></dd>");
document.write("</dt></dl></td></tr></table></li>");

document.write("<li><table><tr><td><dl>");
document.write("<dt>Personnages");
document.write("<dd><a href='perso_Principale.html'>La Team</a></dd>");
document.write("<dd><a href='perso_ennemis.html'>Les Ennemis</a></dd>");
document.write("<dd><a href='perso_reste.html'>Le Reste</a></dd>");
document.write("</dt></dl></td></tr></table></li>");

document.write("<li><table><tr><td><dl>");
document.write("<dt>A Savoir");
document.write("<dd><a href='bio.html'>Biographie d'A.T.</a></dd>");
document.write("<dd><a href='technique.html'>Techniques</a></dd>");
document.write("<dd><a href='tournoi.html'>Tournois</a></dd>");
document.write("<dd><a href='jeux.html'>Jeux-Vidéo</a></dd>");
document.write("<dd><a href='quizz.html'>Quizz</a></dd>");
document.write("</dt></dl></td></tr></table></li>");	

document.write("</ul>");
document.write("</div>");
--------------------------------------------------------------------------------

et le problème ne vient pas non plus du JS car j'ai taper normalment le code du JS dans Body rien n'y fait !!

Pourriez vous m'aider ?

bast2

Je ne vois pas d'appel onmouseover dans ton code. Tu devrais avoir un appel du type :

<dt onmouseover="javascript:afficher();">

appellant une fonction javascript afficher()

Je te conseille également d'écrire ton code en HTML.

Préférer plutôt:

<dt>Episodes

que

document.write("<dt>Episodes");

ahmet08

Aie Aie
Je vois pas trop comment faire j'ai fais des documents.write afin d'eviter de retapper tout mon code avec les DT.... et en fesant juste juste dans ma balise script un src="menu.js" sous Mozilla je n'ai aucun bug c'est ça que ej comprend pas, j'ai un pote aussi qui ma parler des onnmousehover mais voilà dans ma fontion affcher je vois pas du tout ce que je pourrais mettre mais vraiement pas , je mets des balise ? je mets des document.write ? Désolé je débute, je ne sais faire que les formulaires en JS et des Quizz( même principe ) HELP !!!

bast2

Voici un exemple de fonction javascript, soit à mettre dans un fichier externe, soit entre les balises de ta page

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

Ensuite tu appelles ta fonction à chaque fois que tu en as besoin ainsi :

<dl><dt onmouseover="javascript:montre();"><a href="">Accueil</a></dt></dl>

Pour ce qui est de tes document.write, tu n'as absolument rien à écrire, juste les retirer et conserver seulement ce qui est entre "", ton code n'en sera que plus lisible.

ahmet08

Bon je crois que j'ai rien compris , lol , j'ai essayer de bidouiller quelque chose rien à faire , dans mon fichier Menu.js j'ai fait

-----------------------------Menu.js-----------------------------------
"<div class='haut'>";
"<ul id=menu>";
"<li><table><tr><td></td></tr></table></li>";
"<li><table><tr><td><dl>";
"<dt>Episodes";
"<dd><a href='db.html'>Dragon Ball</a></dd>";
"<dd><a href='dbz.html'>Dragon Ball Z</a></dd>";
"<dd><a href='dbgt.html'>Dragon Ball GT</a></dd>";
"<dd><a href='oav.html'>O.A.V.</a></dd>";
"</dt></dl></td></tr></table></li>";
"<li><table><tr><td><dl>";

"<dt onmouseover='javascript:montre();'>Galleries d'images";

"<dd><a href='wall.html'>Wallpaper</a></dd>";
"<dd><a href='gifs.html'>Gifs Animé</a></dd>";
"<dd><a href='Dessins.html'>Mes Dessins</a></dd>";
"</dt></dl></td></tr></table></li>";
"<li><table><tr><td><dl>";
"<dt>Personnages";
"<dd><a href='perso_Principale.html'>La Team</a></dd>";
"<dd><a href='perso_ennemis.html'>Les Ennemis</a></dd>";
"<dd><a href='perso_reste.html'>Le Reste</a></dd>";
"</dt></dl></td></tr></table></li>";
"<li><table><tr><td><dl>";
"<dt>A Savoir";
"<dd><a href='bio.html'>Biographie d'A.T.</a></dd>";
"<dd><a href='technique.html'>Techniques</a></dd>";
"<dd><a href='tournoi.html'>Tournois</a></dd>";
"<dd><a href='jeux.html'>Jeux-Vidéo</a></dd>";
"<dd><a href='quizz.html'>Quizz</a></dd>";
"</dt></dl></td></tr></table></li>";
"</ul>";
"</div>";
window.onload=montre; 
function montre(id) { 
var d = document.getElementById(id); 
   for (var i = 1; i<=10; i++) { 
      if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} 
   } 
if (d) {d.style.display='block';} 
}

Et ca ne marche toujours pas , le truc c'est que je n'ai pas compris ton JS pourrais tu mieux expliquer pasque les trucs que tu utilises j'en connais aucun !!a part le for, le if ;-) !!

Je désépère la !!

bast2

que fait tout ton code html entre guillemets ?

ahmet08

j'ai vu je vien de lé enlever , et le truc c'est que les menus ne s'affiche pas du tout !!

bast2

ahmet08 wrote:
j'ai vu je vien de lé enlever , et le truc c'est que les menus ne s'affiche pas du tout !!

tu as pensé à enlever les ; (point-virgule) également ?

Met ton code actuel afin que l'on voit ce qui ne va pas

ahmet08

C'est bon ça fonctionne, je devais modifier mon css ainsi :

#menu 
{
	padding: 0px 0px 0px 200px ;
	margin: 0px 0px 100px; 
	list-style-type: none;
	position: absolute;
	z-index: 100;
}
#menu dl 
{
	float: left;
	width: 150px;
	margin: 0;
}
#menu dt 
{
	padding: 5px 5px 5px 5px;
	font-size: 14px;
	cursor: pointer;
	text-align: center;
	background: #df2b2b;
	border: 0;
}
#menu li
{
	text-decoration: none;
	font-size: 12px;
	background: #df2b2b;
	padding: 0px 0px 0px 0px ; 
	font-size: 12px;
	margin: 0px; 
	text-align: left;
}
#menu li a, #menu dt a 
{
	color: white;
	text-decoration: none;
	display: block;
	height: 100%;
}
#menu li a:hover, #menu dt a:hover 
{
	height: 17px;
	background: #ac2626;
}
#menu li dl:hover
{
	background-color:#df2b2b;
}
.haut
{
	width: auto;
	height: 50px;
	color: #fff;
	padding: 10px;
	background: #1f1f14;
	border: 0px;
} 
.frame
{
	height: 600px;
	width: auto; 
	overflow: auto; 
	font-size: 14px;
	border: 0px;
	margin-left: 60px;
	margin-right: 60px;
	background: #1f1f14;

}
body 
{
	margin: 0;
	padding: 0;
	background: white;
	color: white;
	background:#cdcc89;
}
dl, dd, ul, li 
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
a, a:link, a:visited, a:active, a:hover
{
	color:red;
	text-decoration:none;
}
p
{
	font-size: 13px;
}

Et mon html ainsi

<html>
	<head>
		<title>Biographie d'Akira Toriyama</title>
		<link rel="stylesheet" type="text/css" href="menu_div.css">
		<script type="text/javascript"> 
		<!-- 
		window.onload=montre; 
		function montre(id)
		{ 
			var d = document.getElementById(id); 
			for (var i = 1; i<=10; i++) 
			{ 
				if (document.getElementById('smenu'+i)) {
				{
					document.getElementById('smenu'+i).style.display='none';
				} 
			} 
			if (d) 
			{
				d.style.display='block';
			} 
		} 
		//--> 
</script>
	</head>

<body>
	<div class='haut'>
	<ul id='menu'>
		<dl>
			<dt onmouseover="javascript:montre('smenu1');">Episodes
				<dd id='smenu1' onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
					<li><a href="page.php?link=db.php&title=Dragon Ball">Dragon Ball</a></li>
					<li><a href="page.php?link=dbz.php&title=Dragon Ball Z">Dragon Ball Z</a></li>
					<li><a href="page.php?link=dbgt.php&title=Dragon Ball GT">Dragon Ball GT</a></li>

					<li><a href="page.php?link=oav.php&title=O.A.V.">O.A.V.</a></li>
				</dd>
			</dt>
		</dl>
	</ul>
</div>
[/code]

Pour le JS il marche niquel !! merci à toi !!