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

Le déroulement d'un menu qui passe sous un bloc, probléme! - HTML/CSS - Programmation

Marsh Posté le 16-06-2007 à 23:00:18    

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!
 
http://img239.imageshack.us/img239/9664/exemb7.jpg
 
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 :


 
<!-- Début du header -->
<div id="header">
</div>
<!-- Fin du header -->
<!-- Debut code HTML du menu -->
<!-- Debut Menu 1 -->
<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>
<!-- Fin Menu 1 -->
<!-- Debut Menu 2 -->
<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>
<!-- Fin Menu 2 -->
<!-- Debut Menu 3 -->
<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>
 
<!-- Fin code HTML du menu -->
 
<!-- Début code du conteneur "wrap"  -->
 
<div id="wrap">


 
Tout en sachant que mes blocs sont en relative.


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

Marsh Posté le 16-06-2007 à 23:00:18   

Reply

Marsh Posté le 17-06-2007 à 08:50:51    

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 :o)
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
Reply

Marsh Posté le 17-06-2007 à 15:08:15    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed