problème avec création d'un menu déroulant.

Répondre
 

Meeuuuhhh
WRInaute accro
WRInaute accro
 
Messages: 1686
Inscription: Lun Jan 08, 2007 22:48

problème avec création d'un menu déroulant.

Message le Jeu Mai 10, 2007 18:58

Bonjour,

J'essaie de faire un menu déroulant horizontal sur mon site.
Je suis ce tutorial d'alsacréation : http://css.alsacreations.com/Constructi ... horizontal


Le problème, sans doute classique, c'est que ça pousse les éléments en dessous. dans le tuto, ils disent d'utiliser la fonction z-index, mais j'ai dû rater un épisode.

Le code HTML :


Code: Tout sélectionner



<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>
<style type="text/css" media="screen">
<!--

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
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: #ccc;
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;
}

-->
</style>

</head>

<body>


<div class="thematique">
<div id="menu">
   

   <dl>         
      <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

         <dd id="smenu1">
            <ul>
               <li><a href="#">Sous-Menu 1.1</a></li>

               <li><a href="#">Sous-Menu 1.2</a></li>
               <li><a href="#">Sous-Menu 1.3</a></li>
               <li><a href="#">Sous-Menu 1.4</a></li>

               <li><a href="#">Sous-Menu 1.5</a></li>
               <li><a href="#">Sous-Menu 1.6</a></li>
            </ul>

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

   </dl>

   
   <dl>   
      <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
         <dd id="smenu3">
            <ul>
               <li><a href="#">Sous-Menu 3.1</a></li>

               <li><a href="#">Sous-Menu 3.2</a></li>

               <li><a href="#">Sous-Menu 3.3</a></li>
               <li><a href="#">Sous-Menu 3.4</a></li>

               <li><a href="#">Sous-Menu 3.5</a></li>
            </ul>
         </dd>
   </dl>
   
   <dl>   
      <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>

         <dd id="smenu4">
            <ul>
               <li><a href="#">Sous-Menu 4.1</a></li>
               <li><a href="#">Sous-Menu 4.2</a></li>

               <li><a href="#">Sous-Menu 4.3</a></li>
            </ul>

         </dd>
   </dl>
   

</div><!-- ferme menu -->
</div><!-- ferme themactic -->

<div class="lettre></div>




Le code CSS de la div lettre :

Code: Tout sélectionner
.lettre
{
background-color:#EEEEEE;
font-weight:bold;
text-align:center;
padding-top:4px;
padding-bottom:2px;
margin-bottom:15px;
}


Voilà, donc le menu se déroule, mais la div lettre est poussée vers le bas.

Vous connaissez le problème :idea: :?:
Haut

Consultez la formation à Google Analytics de WebRankInfo / Ranking Metrics

Koxin-L
WRInaute accro
WRInaute accro
 
Messages: 1925
Inscription: Jeu Mar 29, 2007 16:54

Message le Jeu Mai 10, 2007 20:58

Essaye en forçant le z du div lettre
z-index:1;
Haut

Meeuuuhhh
WRInaute accro
WRInaute accro
 
Messages: 1686
Inscription: Lun Jan 08, 2007 22:48

Message le Jeu Mai 10, 2007 21:09

oui j'ai essayé mais ça fait rien.

Si je le place position absolute, alors ça pousse ce qu'il y a dans la suite de la div centre, là où se trouve la div lettre.
Haut
Koxin-L
WRInaute accro
WRInaute accro
 
Messages: 1925
Inscription: Jeu Mar 29, 2007 16:54

Message le Jeu Mai 10, 2007 21:17

Et en mettant z-index:100 dans la div thematique ?
Haut

Meeuuuhhh
WRInaute accro
WRInaute accro
 
Messages: 1686
Inscription: Lun Jan 08, 2007 22:48

Message le Ven Mai 11, 2007 2:07

Non plus.

Bon voilà, j'ai fait une page de test, vous pouvez voir le problème ici, le css et le javascript sont dans les balises head :

http://www.soins-nature.com/menu.php
Haut
 

Modérateurs: WebRankInfo, e-kiwi, OTP, fandecine, Patrice A.

Répondre

Formation recommandée sur ce thème :

Formation Google Analytics : en 2 jours, apprenez comment exploiter l'essentiel des possibilités de l'outil de mesure d'audience de Google. Formation animée par Julien Coquet, expert certifié officiellement par Google Analytics.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :

Consultez la description détaillée des produits ou services de Google suivants : Omnisio, Google Présentations



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group , traduction par phpBB-fr.com, mod SEO par phpbb-seo.com