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

Discussion dans 'Administration d'un site Web' créé par Meeuuuhhh, 10 Mai 2007.

  1. Meeuuuhhh
    Meeuuuhhh WRInaute passionné
    Inscrit:
    8 Janvier 2007
    Messages:
    1 539
    J'aime reçus:
    0
    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:
    
    
    
    <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:
    .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: :?:
     
  2. Koxin-L
    Koxin-L WRInaute passionné
    Inscrit:
    29 Mars 2007
    Messages:
    1 569
    J'aime reçus:
    1
    Essaye en forçant le z du div lettre
    z-index:1;
     
  3. Meeuuuhhh
    Meeuuuhhh WRInaute passionné
    Inscrit:
    8 Janvier 2007
    Messages:
    1 539
    J'aime reçus:
    0
    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.
     
  4. Koxin-L
    Koxin-L WRInaute passionné
    Inscrit:
    29 Mars 2007
    Messages:
    1 569
    J'aime reçus:
    1
    Et en mettant z-index:100 dans la div thematique ?
     
  5. Meeuuuhhh
    Meeuuuhhh WRInaute passionné
    Inscrit:
    8 Janvier 2007
    Messages:
    1 539
    J'aime reçus:
    0
Chargement...
Similar Threads - problème création menu Forum Date
Problème création pages automatique via Wordpress Référencement Google 16 Février 2018
Problème de création de cookie Développement d'un site Web ou d'une appli mobile 6 Décembre 2012
Problème Création Page Facebook Facebook 8 Février 2011
probleme creation fichier php sur serveur Développement d'un site Web ou d'une appli mobile 15 Juillet 2010
Création d'un flux RSS avec PHP, problème récurrent avec getElementById Développement d'un site Web ou d'une appli mobile 13 Juin 2010
Creation de deux sites distincts à partir d'un site... probleme avec Google? Référencement Google 12 Avril 2010
Probleme creation compteur de clic en javascript Débuter en référencement 21 Mars 2010
Création d'un flux RSS (problème d'affichage) Développement d'un site Web ou d'une appli mobile 22 Février 2010
Problème pour la création de mon .htaccess Développement d'un site Web ou d'une appli mobile 13 Septembre 2008
WordPress Problème indéxation suite à migration HTTP vers HTTPS Problèmes de référencement spécifiques à vos sites 31 Janvier 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice