Le déroulement d'un menu qui passe sous un bloc, probléme!

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Le déroulement d'un menu qui passe sous un bloc, probléme!

stravoguine

Salut,

Comme vous pouvez le voir sur la photo, j'ai grossi les bordures d'un menu que je souhaite installer sous un header de 100px, et au dessus d'un bloc conteneur qui englobe lui-méme 4 autres blocs internes à celui-ci (sur la photo vous en voyez que 3).

Seulement mon menu passe en dessous du bloc conteneur, en fait c'est le déoulement qui passe dessous or, je voudrais qu'il passe au dessus!

Comment faire selon vous, avec quelle propriété?

code menu :

Citation :

.menu{
float: left;
margin: 2px;
padding: 2px;
position:relative;
height:100px;
}

.titreMenu, .contenuMenu, .lienMenu{
color: #000000;
}

.titreMenu, .contenuMenu{
border: 2px outset #AAAAAA;
width: 120px;
text-align: center;
margin: 0px;
padding: 0px;
}

.contenuMenu{
display: none;
position: absolute;
background-color: #FFFFFF;
}

.menuOverflow{
overflow: auto;
}

.itemOver{
background-color: #AAAAFF
}

.itemOut{
background-color: #FFFFFF;
}

.lienMenu{
text-decoration: none;
}

Code menu HTML

Citation :


<div id="header">
</div>



<div class="menu" id="Menu1" onmouseout="fout(this)" onmouseover="fover(this)">
<div class="titreMenu itemOut" id="Menu1Titre">Menu 1</div>

<div class="contenuMenu" id="Menu1Item">
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 11</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 12</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 13</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 14</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 15</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 16</a></div>
</div>

</div>


<div class="menu" id="Menu2" onmouseout="fout(this)" onmouseover="fover(this)">
<div class="titreMenu itemOut" id="Menu2Titre">Menu 2</div>

<div class="contenuMenu" id="Menu2Item">
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 21</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 22</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 23</a></div>
</div>

</div>


<div class="menu" id="Menu3" onmouseout="fout(this)" onmouseover="fover(this)">
<div class="titreMenu itemOut" id="Menu3Titre">Menu 3</div>

<div class="contenuMenu menuOverflow" id="Menu3Item">
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 30</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 31</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 32</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 33</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 34</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 35</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 36</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 37</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 38</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 39</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 36</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 37</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 30</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 31</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 32</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 33</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 34</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 35</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 36</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 37</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 38</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 39</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 36</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 37</a></div>
</div>

</div>





<div id="wrap">

Tout en sachant que mes blocs sont en relative.

Message édité par stravoguine le 16-06-2007 à 23:01:09

Publicité

dartyduck

n00b AttitudE

appliques un "z-index:2;" à ton .menu et un z-index:1;" à ton div "wrap" qui est en dessous (celui qui cache ton menu déroulant koi )
Un z-index sera au dessus d'un z-index plus petit.

Message édité par dartyduck le 17-06-2007 à 08:52:03

---------------
Nikon D7000 + 18-105VR + 35mm 1.8

stravoguine

Merci énormément, effectivement je ne connaissais pas du tout cette propriété et ça marche impeccablement.

FORUM HardWare.fr

Programmation

HTML/CSS

Le déroulement d'un menu qui passe sous un bloc, probléme!

Sujets relatifs
Probleme avec Hashmap	Probléme VALUES formulaire
Problème avec le curseur	Probleme session combiné aux frames
[HLSL] Problème de positionnement	Probleme permission en local
Probléme avec script pour modifier une table Mysql	Menu flash...Help pour la fonction Geturl
probleme de liste déroulante	probleme de label dans un formulaire
Plus de sujets relatifs à : Le déroulement d'un menu qui passe sous un bloc, probléme!

Page générée en 0.059 secondes