[résolu] Problème avec menu deroulant en CSS et XHTML

Question

tarentaise

5 Apr 2005 à 00:04

Bonjour,
j'ai actuellement un petit problème avec la mise en oeuvre du menu déroulant horizontal avec les sous-menus qui disparaisent.
suivant le navigateur voici ce que cela donne :
- firefox v1.0 les menus sont ouverts à l'ouverture de la page puis se ferment lors de l'action onmouseout
- mozilla v1.02 les menus sont ouverts à l'ouverture de la page et le dernier survolé reste ouvert
- opéra v7.54 fonctionne nickel
- IE v6.0 les menus sont ouverts à l'ouverture de la page puis se ferment lors de l'action onmouseout. De plus le block "id=site" s'affiche par dessus le menu alors qu'il a pour "z-index: 1" et le menu un "z-index: 100"

Smiley bawling

une après midi et une soirée que je sèche dessus !!! Smiley fache

!!!!

si cela peut aider à me donner la réponse je vous mets le code de ma page .HTML et de ma feuille .CCS

Page .html =


<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


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


<link href="pages/squelette1.css" rel="stylesheet" type="text/css" />
<!-- Début préchargement images -->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- Fin préchargement images-->
<!-- Chemin url 1/2-->
<script language="JavaScript" type="text/javascript">
<!--
function ExtraireURL(url) {
	var separateur = " > ";
	var tjs = url.indexOf("/",7)
	var tjs2= 0;
	var domaine=url.substring(7,url.indexOf("/",7));
	document.write("<A href='"+url.substring(0,tjs)+"'>"+domaine+"</A>");
	while (tjs>1) {
		tjs2 = url.indexOf("/",tjs+1);
		if (tjs2>0) {
			rep = url.substring(tjs+1,tjs2);
			document.write( separateur + "<A href='"+url.substring(0,tjs2)+"'>"+rep+"</A>");
		} else {
			rep = url.substring(tjs+1,9999);
			document.write( separateur + rep);
		}
		tjs = url.indexOf("/",tjs+1);
	}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- Fin chemin url 1/2-->

</head>

<body onload="MM_preloadImages('pages/o_btmess.gif','pages/o_btann.gif','pages/o_btinf.gif')">
<div id="global"> 
  <div id="bande_haut"><a href="http://www.xxxxxxxxx.fr" target="_blank" title="Accès Intr@"><img src="pages/btintra_t.gif" name="intra" width="170" height="62" id="intraterre" alt="intra" border="0" /></a><a href="mailto:xxxxxx@xxxxxxxxxxx.fr" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logo_messagerie','','pages/o_btmess.gif',1)"><img src="pages/btmess.gif" alt="Envoyez un message au webmestre" name="logo_messagerie" width="75" height="62" border="0" id="logo_messagerie" /></a><a href="pages/annuaires.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logo_annuaire','','pages/o_btann.gif',1)"><img src="pages/btann.gif" alt="Accès aux annuaires" name="logo_annuaire" width="64" height="62" border="0" id="logo_annuaire" /></a><a href="pages/plan.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logo_info','','pages/o_btinf.gif',1)"><img src="pages/btinf.gif" alt="Accès au plan du site" name="logo_info" width="58" height="62" border="0" id="logo_info" /></a><img src="pages/bandeau.jpg" width="322" height="62" /><img src="pages/logo.jpg" width="74" height="62" /></div>
  <div id="bande_milieu"><img src="pages/imacc.gif" width="763" height="32" /> 
    <div id="chemin_url"> 
      <!-- Chemin url 2/2-->
      <a href="index.html">Accueil</a> &gt; 
      <script language="JavaScript" type="text/javascript">
<!--
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=3;i<(s.length-1);i++) {
path+="<A HREF=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"/\">"+s[i]+"</A> > ";
}
document.writeln(path);
// -->
</script>
      <!-- Fin chemin url 2/2-->
    </div>
  </div>
  <div id="bande_bas"><img src="pages/imacc1_1.gif" width="763" height="32" />
<div id="menu"> 
  <dl>
    <dt onmouseover="javascript:montre('smenu1');"><a href="#">Le Centre</a></dt>
    <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"> 
      <ul>
        <li><a href="#">Historique</a></li>
        <li><a href="#">Missions</a></li>
        <li><a href="#">Situation</a></li>
        <li><a href="#">Organisation</a></li>
        <li><a href="#">Moyens</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenu2');"><a href="#">Les stages</a></dt>
    <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');"> 
      <ul>
        <li><a href="#">Catalogue</a></li>
        <li><a href="#">Activités</a></li>
        <li><a href="#">Programme type</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenu3');"><a href="#">Modalités</a></dt>
    <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');"> 
      <ul>
        <li><a href="#">Planification</a></li>
        <li><a href="#">Visite préalable</a></li>
        <li><a href="#">Consignes</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenu4');"><a href="#">Autres...</a></dt>
    <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');"> 
      <ul>
        <li><a href="#">Organigramme</a></li>
        <li><a href="#">Photos</a></li>
      </ul>
    </dd>
  </dl>
</div>
</div>
 <div id="site">bonjour</div> </div>
</body>
</html>

Feuille .ccs =


body {
     margin: 0; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     }

#global {
     position: relative; /* on positionne le conteneur */
     margin-left: auto;
     margin-right: auto;
     width: 763;
     text-align: left;
     }
	 
#bande_haut {
     position: absolute;
	 top: 0;
	 left: 0;
	 }	 
   	 	 
#bande_milieu {
     position: absolute;
	 top: 62px;
	 left: 0; 
	 display: inline;
	 }
   	 	 
#chemin_url {
	position: absolute;
	top: 8px;
	left: 133px;
	padding-left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #ffffff;
	font-weight: bold;
	display: inline;
	height: auto;
	width: auto;
	 }	 
	 
#chemin_url a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #ffffff;
	font-weight: bold;
	 }	 
	 
#chemin_url a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #ffffff;
	font-weight: bold;
	text-decoration: underline;
	 }	 	 
   	 	 
#bande_bas {
     position: absolute;
	 top: 93px;
	 left: 0;
	 }
   	 
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
position: absolute;
top: 9px;
left: 133px;
padding-left: 0px;
z-index: 100;
width: 553px;
}

#menu dl {
float: left;
width: 110px;
height: 50px;
}

#menu dt {
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
font-weight: bold;
background: #cccc99;
}

#menu dd {
border: 0px;
width: 110px;
height: 50px;
}

#menu li {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
font-weight: bold;
background: #cccc99;
}

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

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

#site {
position: relative;
z-index: 1;
width: 760px;
top : 125px;
left : 0px;
color: #000;
background-color: #ddd;
border: 1px solid gray; 
}

a {text-decoration: none;
color: black;
color: #222;
}

[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par tarentaise (16 Apr 2005 - 09:06)

~~supprimé~~

5 Apr 2005 à 00:12

Bonsoir, bienvenue sur le forum.

Peux tu editer ton post pour placer ton code entre les tags [ code] et [/code] pour des raisons de lisibilité. En général quand c'est trop long comme ton exemple il vaut mieux essayer de mettre un exemple en ligne.

Ensuite n'oublie pas d'utiliser les fonctions recherche, faq et aide avant de poster.

Revenons à nos moutons :

a écrit :

- firefox v1.0 les menus sont ouverts à l'ouverture de la page puis se ferment lors de l'action onmouseout
- IE v6.0 les menus sont ouverts à l'ouverture de la page puis se ferment lors de l'action onmouseout.

Problème d'interaction entre le script du menu et tes scripts provenant de DreamWeaver. Plus particulièrement entre :


window.onload = montre;

Et (cette cochonnerie Smiley smile

) :


<body onload="MM_preloadImages('pages/o_btmess.gif','pages/o_btann.gif','pages/o_btinf.gif')">

1ere solution, la plus clean : Tu supprime les evènements sur body onload et tu en profitte pour virer tous ces scripts de préchargement d'images. Quand c'est necessaire tu remplace tes prechargements + rollovers par des equivalents CSS comme expliqué dans cet article

2eme solution, la vilaine bidouille : Tu supprime la ligne :


window.onload = montre;

Et tu remplace celle du body par quelque chose d'encore plus horrible :


<body onload="montre();MM_preloadImages('pages/o_btmess.gif','pages/o_btann.gif','pages/o_btinf.gif')">

Dans les 2 cas ton problème sera corrigé mais je te déconseille FORTEMENT la deuxième solution, si ce n'est pour faire un test rapide et voir que ton menu fonctionne.

a écrit :

De plus le block "id=site" s'affiche par dessus le menu alors qu'il a pour "z-index: 1" et le menu un "z-index: 100"

Le problème vient du fait que ton menu est dans un block qui n'a pas de z-index, sous IE le menu hérite du z-index de ce block (#bande_bas). Donc tu peux rajouter z-index: -1 à #bande_bas et supprimer le z-index de #site . Ou inversement... bref comme tu le sent. Dans tous les cas tu auras peut être des micro modifications à apporter à tes blocs, par exemple fixer les hauteurs).

a écrit :

- mozilla v1.02 les menus sont ouverts à l'ouverture de la page et le dernier survolé reste ouvert

Aucune idée, je n'ai pas le vieux Mozilla sous la main.
Modifié par jb_gfx (05 Apr 2005 - 00:48)

tarentaise

5 Apr 2005 à 08:31

Merci pour les réponses qui m'ont permis de sortir de ce mauvais pas. Les problèmes sont réglés.
J'ai pris note des remarques concernant l'édition du code et la mise en ligne de la page posant problème.
Encore merci
@+
Laurent

Raphael

Administrateur

5 Apr 2005 à 09:38

tarentaise a écrit :
Merci pour les réponses qui m'ont permis de sortir de ce mauvais pas. Les problèmes sont réglés.
J'ai pris note des remarques concernant l'édition du code et la mise en ligne de la page posant problème.
Encore merci
@+
Laurent

Salut Laurent et bienvenue ici Smiley cligne

Pourrais-tu prendre connaissance de l'aide/Règles du forum qui t'indique quoi faire à présent que le problème est résolu ?

Peux-tu également prendre la peine d'éditer ton message précédent, comme jb_gfx te l'a suggéré, et le modifier pour afficher le code proprement ?
Merci d'avance Smiley smile

Sujet clos