18081 sujets

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

Menu horizontal, problème d'affichage sur IE

Bonjours,

Je viens souvent sur le site mais c'est la première fois que j'ai besoin de venir sur le forum pour règler un problème Smiley langue .

Mon problème est le suivant, mon menu est en position absolute et à un z-index de 100, pourtant sous IE le menu n'embarque pas par dessus mon calque de contenue alors que Firefox et Opera n'ont aucun problème.

Voici une image du résultat sous Firefox
Firefox

et sous Explorer
Explorer

Voici mon code XHTM valide
<!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=ISO-8859-1" />
<title>Club Lions de Matane - Index</title>
<link rel="stylesheet" href="css/style.css" type="text/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 id="conteneur">

   <div id="bandeau">
   </div>
   
   <div id="menu">
      <div id="menuPos">
         <dl>

            <dt class="Accueil" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
			<a href="" title="Retour à l'accueil"><span>Accueil
			</span></a>
			</dt>         
		 
            <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
	   
               <ul>
                  <li><a href="#">Mot du Président</a></li>
                  <li><a href="#">Organigramme</a></li>
                  <li><a href="#">Livre d'Or</a></li>
               </ul>
		  
             </dd>
		 
	     </dl>
	
	     <dl>			 
            <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Historique</dt>

            <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
	   
               <ul>
                  <li><a href="#">Club des Lions de Matane</a></li>
                  <li><a href="#">Lions International</a></li>
                  <li><a href="#">Les présidents</a></li>
                  <li><a href="#">Tableaux d'honneurs</a></li>
			      <li><a href="#">In Memoriam</a></li>
               </ul>
		  
             </dd>
		
	     </dl>
	
	
	     <dl>	
	  
            <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">À propos</dt>

            <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
		 
               <ul>
                  <li><a href="#">Liste des membres</a></li>
			      <li><a href="#">Les Lions</a></li>
			      <li><a href="#">Les Fondations</a></li>
			      <li><a href="#">Nos oeuvres</a></li>
			   </ul>
			
            </dd>
		 
         </dl>
	
         <dl>	
	  
	        <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"><span class="testo">Agenda</span></dt>
		 
	        <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
		 
		       <ul>
		          <li><a href="#">Mois courant</a></li>
			      <li><a href="#">Archives</a></li>
		       </ul>

	        </dd>
		 
         </dl>
	  
         <dl>	
	  
	        <dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">Infos</dt>
		 
	        <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
		 
		       <ul>
		          <li><a href="#">Charte des Lions</a></li>
			      <li><a href="#">Carte du district</a></li>
		       </ul>

	        </dd>
		 
         </dl>
      </div>

   </div>
   
   <div id="header"></div>
   <div id="contenue">
   
       
      <div id="colGauche">
	  <img src="i/tiAccueil.gif" alt="Accueil" /> 
	  
	     <h4>Le mot du Président</h4>
		 
	     <p>À mes amies et amis Lions, </p>
		 
		 <p>Permettez-moi de débuter mon humble message en utilisant le thème de notre
            Gouverneur : « LA PASSION D'ÊTRE LIONS ».
         </p>
		 
		 <p>Si nous sommes réellement passionnés pour une chose, on prend les moyens
            susceptibles de nous faire vivre cette passion.
         </p>
		 
		 <p>
		    Le Club Lions de Matane c'est notre passion, la passion de réaliser ensemble
            de multiples activités en vue d'aider nos frères et soeurs dans le besoin. Cette
            passion devra dicter notre agir, devra motiver toutes nos actions et devra être
            le point culminant de notre dépassement.
		 </p>
		 
		 <p>
		    Cette belle maxime qui dit : Le Passé est garant de l'avenir devrait susciter
            chez tous les Lions de notre Club, une passion telle que rien ne pourra ternir
            notre renommée si vivante au sein de notre collectivité.
		 </p>
		 
		 <p>
		    Que toute notre fatigue, tout notre acharnement, que toutes nos activités
            soient imprégnés de cette passion du don total de soi. On sera enchanté de
            dire à la fin de cette année remplie d'oeuvres de bienfaisances, mission accomplie,
            car ma passion pour le Lionisme n'a pas fait défaut.
		 </p>
		 
		 <p>
		    J'ose croire en terminant, que ma devise : UNE VISION D'AVENIR ET UN
            REGARD SUR LE PASSÉ, soutenue par mes objectifs 2005-2006, saura vous
            convaincre que pour être un bon Lion il faut être : UN PASSIONNÉ.
		 </p>
		 
		 <p>
		    J'APPRÉCIE SINCÈREMENT VOTRE IMPLICATION.
		 </p>
		 
		 <p>
		    Lion Cléo, président
		 </p>

	  </div>
	  
	  
	  <div id="colDroite">
	     <img src="i/tiMembres.gif" alt="Section Membres" />
		 <br />
		 <br />
		 
         <table>
		    <tr>
			   <td>Login : </td>
			   <td><input type="text" name="log" /></td>
			</tr>
			<tr>
			   <td>No Membre : </td>
			   <td><input type="text" name="numero" /></td>
			</tr>
			<tr>
			   <td></td>
			   <td style="text-align:right;"><input style="border:none;" src="i/btnConnexion.gif" type="image" name="numero" /></td>
			</tr>
		 </table>
		 
		 <br /><br />
		 <img src="i/tiLionsA.gif" alt="Lions en Action" />
		 
	  </div>
	  
	  
   </div>
   
   <div id="footer">
      <p><a href="#">Menu1</a> <a href="#">Menu2</a> <a href="#">Menu3</a> <a href="#">Menu4</a></p>
	  <p>Copyright</p>
   </div>
   
</div>

</body>
</html>


et ma CSS
/* CSS Document */

/* Redéfinition de l'élément body */
body{
   text-align:center;
   background-color:#F7D001;
   position:relative;
   margin-top:0;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   padding:0;
   text-align:center;
}

/* Redéfiniton du input */
input{
   border-color: #000000;
   border-style: solid;
   border-width:thin;
}

input .btn{
   border:none;
}

/* Id conteneur */
#conteneur{
   width:768px;
   position:relative;
   background-color:#FFFFFF;
   margin:0 auto;
   font-size:14px;
}


/* Id bandeau */
#bandeau{
   position:relative;
   float:left;
   width:768px;
   height:189px;
   background-image:url(../i/bandeau.gif);
   background-repeat: no-repeat;
}


/* Id menu */
#menu{
   position:relative;
   width: 768px;
   height:42px;
   float:left;
   background-image:url(../i/menu.gif);
}

/* Id du header */
#header{
   position:relative;
   float:left;
   width:768px;
   height:30px;
   background-image:url(../i/header.gif);
}

/* Id du contenue */
#contenue{
   position:relative;
   float:left;
   width:768px;
   background-image:url(../i/contenue.gif);
   z-index:1;
}

/* Id colGauche */
#colGauche{
   position:relative;
   float:left;
   width:420px;
   padding-left:40px;
   padding-top:10px;
   text-align:justify;
   
}

/* Id colDroite */
#colDroite{
   position:relative;
   float:left;
   width:232px;
   padding-left: 40px;
   padding-top:10px;
   text-align:justify;
}


/* Id Footer */
#footer{
   position:relative;
   float:left;
   width:768px;
   height:99px;
   background-image:url(../i/footer.gif);
   text-align:center;
   font-size: 0.8em;
}



/* Test du menu avec sous menu en xhtml, css, javascript */

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

.testo{
position:relative;
margin-top:10px;
}

#menuPos {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size:13px;
position:absolute; /* placement du menu, à modifier selon vos besoins */
top:0px;
left: 24px;
float:left;
z-index:100;
width: 100%; /* correction pour Opera */
}

#menuPos dl {
float: left;
width: 8.2em;

}

#menuPos dt {
cursor: pointer;
text-align: center;
color:#FFFFFF;
font-weight: bold;
height:29px;
border-left: 1px solid black;
}

#menuPos dt.Accueil {
border-left: none;
}


#menuPos dd {
display: none;
border: 1px solid black;
}

#menuPos li {
text-align: center;
background: #024567;
border: 0.04em solid black;

}

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

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


Merci à l'avance
WerKa
Modifié par WerKa (24 Mar 2006 - 23:18)
Salut,
Je pense qu'il faut mettre le z-index à #menu 
#menu {
	z-index:2;
/* + le reste des déclarations */
}

Tu peux enlever l'autre z-index:100;
Je pense d'ailleurs que tu pourrais enlever le z-index:1; sur #contenue (à moins qu'il serve à quelque chose de particulier, je n'ai pas regardé) et mettre dans ce cas 1 de valeur à celui de #menu.
Modifié par Alan (24 Mar 2006 - 23:46)
Bon, nous sommes lundi donc je commence ma journée avec ce bug et je dois dire Merci Alan car tu as vu juste Smiley cligne .

Problème résolu!
Modifié par WerKa (27 Mar 2006 - 15:49)
Sujet clos
Aller à