18041 sujets

Questions générales et questions de débutants

Menu déroulant et autres fonctions javascript

Bonjour à tous,

J'ai utilisé le menu déroulant pour une application Intranet, dans un site structuré avec des calques. J'ai aussi des boutons de navigation avec du Javascript.
Pas de problème avec Internet Explorer, tout se passe bien. En revanche, quand je passe sous Firefox et Netscape, certains boutons et fonctionnalités Javascript 'gèlent' et je ne peux plus les utiliser. Au mieux je dois attendre quelques secondes pour pouvoir cliquer (mais le menu marche toujours Smiley biggrin )

Je précise que le Javascript est bien activé dans ces navigateurs. Quant je désactive les feuilles de styles, ca marche. Bref, c'est un vrai casse-tete. Mes connaissances étant encore limitées dans tous ces domaines, je n'arrive pas a savoir si c'est le fait d'avoir plusieurs fonctions Javascript dans une meme page qui posent probleme ou bien les CSS!

Je vous serai vraiment reconnaissante si vous aviez une piste. (je vous préviens d'avance, le code ne doit pas être top).
Modifié par clea (10 Jun 2007 - 14:02)
Modérateur
Bonjour clea, bienvenue Smiley smile

Une page en ligne serait préférable pour qu'on puisse voir ton problème car il est bien difficile de t'aider actuellement. Smiley cligne
Bonjour Koala64,

Je pense que ca tient a la façon dont sont définis mes div dans les css, il doit y avoir du chevauchement(un vrai casse tete ! Smiley fatigue ).

D'abord, voici globalement la structure d'une page

<!DOCTYPE html PUBLIC \"-//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 type=text/css href=css/style.css>
<LINK REL=stylesheet type=text/css href=css/menu.css>
<LINK REL=stylesheet type=text/css href=css/div.css>";


<SCRIPT LANGUAGE=\"JavaScript\" SRC=\"js/menu.js\"></SCRIPT>";

</HEAD><BODY>";

<div id="moncadre">

     <div id="cadrehaut" align='center'>
       <img src="images/banniere.png" width="770" height="72" border='1'>
     </div>




<div class="cadredumenugauche">
       <div id="menu">
        <dl>

		<dt onclick="javascript:montre();"><a href="index.php">Accueil</a></dt>
			
		<dt onclick="javascript:montre('smenu2');">Importer</dt>

			<dd id="smenu2">
				<ul>
					<li><a href="import.php">Un fichier Bibtex</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');">Consulter</dt>

			<dd id="smenu3">
				<ul>
					<li><a href="consultgene.php">Consultation generale</a></li>
					<li><a href="consultcritere.php">Consultation par critere</a></li>
                                        <li><a href="affichagelineaire.php?affichage=all">Afficher tous les enregistrements</a></li>
					<li><a href="recherche.php">Recherche</a></li>

				</ul>
			</dd>

		<dt onclick="javascript:montre('smenu4');">Ajouter</dt>

			<dd id="smenu4">
				<ul>
					<li><a href="#">Un enregistrement</a></li>
				</ul>
			</dd>
	
        </dl>
     </div>
   </div>
   
<div id="cadrecentrale">
  <div class='barremenu'>
   <center><input type="button" value="Precedent" onclick="javascript:history.back();" class="neutre"/><INPUT TYPE="button" value="Consultation critere" onclick="document.location='consultcritere.php'" class="neutre"><INPUT TYPE="button" value="Recherche" onclick="document.location='recherche.php'" class="neutre"><INPUT TYPE="button" value="Afficher tout" onclick="document.location='affichagelineaire.php?affichage=all'" class="neutre"><INPUT TYPE="button" value="Importer" onclick="document.location='import.php'" class="neutre"></center>
  </div>

  <!--CONTENU DU SITE-->

  </div>
  </div>

 </body>
</html>


Je poste les css concernés de suite.
Voila, ca c'est le css du menu, un peu modifié par rapport a celui d'Alsacreations, mais ca va, il fonctionne bien.

Fichier menu.css

body {
margin: 0;
padding: 0;
font: 80% verdana, arial, sans-serif;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}


#menu {
position: absolute; /*placement du menu */
top: auto;/*a mettre sinon pbme*/
left: auto;/*a mettre sinon pbme*/
z-index:100;
width: 100%; /* correction pour Opera */
}


#menu dl {
float: left;
width: 12em;
}


#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #E6E6FD;
border: 1px solid gray;
margin: 1px;
}

#menu dd {
display: none;
border: 1px solid gray;
}

#menu li {
text-align: center;
background: #fff;
}

#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}


#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
Désolée pour tous ces posts!

Je continue de chercher de mon côté.

Et voici le fichier div.css


[code]#moncadre {
width:95%;
min-height:90%; /* ne fonctionnne pas sous IE*/
margin:auto;
padding:10px; /*espacement du contenu par rapport au bord du calque*/
background-color:#B7C7F9;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}



.cadredumenugauche {
float:left;
text-align:left;
width:150px;
height:250px;
padding:10px;
}



#cadrehaut {
height:100px;
text-align: center;
background-color:#B7C7F9;
margin-bottom:10px;
}


.barremenu {
background-color:#FFFCEC;
margin-bottom:10px;
border-bottom:1px dashed #000000;
z-index:102;
}


/* cadre du conteneur */
#cadrecentrale {
z-index:101;
text-align:left;
min-height:350px;
margin-left:180px;
margin-right:auto;
font-size:13px;
padding-bottom:5px;
border:1px outset #000000;
/*border-left:1px dashed #000000;
border-right:1px dashed #000000;
border-bottom:1px dashed #000000;*/
border-top:1px dashed #000000;
background-color:#FFFCEC;
}[code]
Modifié par clea (10 Jun 2007 - 14:56)
Sujet clos
Aller à