Menu déroulant CSS/JS et DIV

Menu déroulant CSS/JS et DIV - HTML/CSS - Programmation

Marsh Posté le 30-11-2006 à 14:51:11    

Bonjour, n'ayant pas eu de succès en recherche sur Google, je poste donc mon petit problème :
j'ai un menu déroulant en CSS/JS qui fonctionne très bien, et juste en dessous, un flash tout bête (qui fonctionne aussi très bien !).
Problème : le menu passe sous le flash !
J'ai essayé 50 solutions avec des div et autre pour tenter de faire repasser le menu par dessus tout le reste ... impossible ... enfin disons plus simplement : je n'y arrive pas !
J'ai mis le menu dans une div avec z-index=2;, que dalle ... j'ai mis tout le reste dans une div avec z-index=-1;, pas mieux ...
Je pensais avoir pigé l'utilisation du z-index, mais manifestement non !!!
Est-ce si compliqué, ou est-ce que j'ai juste rien compris ?
Je vous joint le code CSS et HTML du menu uniquement car sinon la page ferait 15 bornes ... si c'est nécessaire que j'affiche tout, dites le moi !
 
Dans le code ci-dessous, il n'y a pas les tests de DIV pour pas surcharger mes explications.
 
Le CSS :

Code :
  1. /* CSS du menu horizontal, bieler batiste */
  3. .menu{
  4.     position:absolute;
  5.     display:block;
  6.     margin:0px 0px 0px 0px;
  7.     padding:0px 0px 0px 0px;
  8.     width:858px;
  9.     }
  11. .menu ul{
  12.     position:absolute;
  13.     display:block;
  14.     width:96px;
  15.     margin:0px 0px 0px 0px;
  16.     padding:0px 0px 0px 0px;
  17. border:1px #CCCCCC solid;
  18. background-color:#FFFFFF;
  19.     }
  20.    
  21. .menu li ul{
  22.     visibility:hidden;
  23.     }
  25. .menu li li ul{
  26.     position:absolute;
  27.     margin-left:102px;
  28.     margin-top:-15px;
  29.     }
  30.    
  31. .menu li{
  32.     list-style:none;
  33.     width:96px;
  34.     height:auto;
  35.     display:inline;
  36.     display/**/:block;
  37.     float:none;
  38.     float/**/:left;
  39.     margin:0px 0px 0px 0px;
  40.     padding:0px 0px 0px 0px;
  41.     }
  42.    
  43. .menu li li{
  44.     display:block;
  45.     float:none;
  46.     }
  47.    
  48. /* correct a little IE bug */
  49. * html .menu li li{
  50.     display:inline;
  51.     }
  53. .menu a{
  54.     text-align:center;
  55. font-family:Arial;
  56. font-size:11px;
  57. /* background-color: #FFFFFF;
  58.     border:1px #666 solid;*/
  59.     color:#CCCCCC;
  60.     display:block;
  61.     width:96px;
  62.     text-decoration:none;
  63.     padding:0px 0px 0px 0px;
  64.     margin:0px 0px 0px 0px;
  65.     }
  66.    
  67. .menu a:hover{
  68.    background-color: #eee;
  69.     /* border:1px #aaa solid;*/
  70. color:#FF55AE;
  71.     }
  72.    
  73. /* for a mozilla better display with key nav */
  74. .menu a:focus{
  75.     background-color: #aaf;
  76. }
  78. a.linkOver{
  79.     /*background-color: #eee;*/
  80. color:#FF55AE;
  81.     }


 
et le HTML :

Code :
  1. <ul id="menu">
  2. <li><a href="#menu1"><?php if($page != "auberge_everhotel.php" && $page != "dans_quelle_ville.php" && $page != "auberge.php" && $page != "restaurant.php" && $page != "chambres.php" && $page != "seminaires_banquets.php" && $page != "accueil_services.php" && $page != "construction_bois.php" ) echo '<img src="images/menu_haut_03.jpg" width="120" height="75" border="0" />';  else echo '<img src="images/menu_haut_on_03.jpg" width="120" height="75" border="0" />'; ?></a>
  3.  <ul>
  4.   <li><a href="dans_quelle_ville.php">Dans quelle ville ?</a></li>
  5.   <li><a href="auberge.php">L'Auberge</a></li>
  6.   <li><a href="restaurant.php">Le Restaurant</a></li>
  7.   <li><a href="chambres.php">Les Chambres</a></li>
  8.   <li><a href="seminaires_banquets.php">S&eacute;minaires - banquets</a></li>
  9.   <li><a href="accueil_services.php">L'accueil, les services</a></li>
  10.   <li><a href="construction_bois.php">Construction en bois</a>
  11.    <ul>
  12.     <li><a href="#">Test1</a></li>
  13.     <li><a href="#">Test2</a>
  14.      <ul>
  15.       <li><a href="#">Test2</a></li>
  16.       <li><a href="#">Test2</a></li>
  17.       <li><a href="#">Test3</a></li>
  18.      </ul>
  19.     </li>
  20.     <li><a href="#">Test3</a></li>
  21.    </ul>
  22.   </li>
  23.  </ul>
  24. </li>
  25. <li><a href="#menu2" ><?php if($page != "forfaits_etapes.php" && $page != "offre.php" ) echo '<img src="images/menu_haut_04.jpg" width="105" height="75" border="0" />'; else echo '<img src="images/menu_haut_on_04.jpg"" width="105" height="75" border="0" />'; ?></a>
  26.  <ul>
  27.   <li><a href="offre.php">Nos Offres</a></li>
  28.  </ul>
  29. </li>
  30. <li><a href="#menu3" ><?php if($page != "professionnels.php" && $page != "offres_groupe.php" ) echo '<img src="images/menu_haut_05.jpg" width="98" height="75" border="0" />';  else echo '<img src="images/menu_haut_on_05.jpg" width="98" height="75" border="0" />'; ?></a>
  31.  <ul>
  32.    <li><a href="offres_groupe.php">Nos Offres Groupe</a></li>
  33.  </ul>
  34. </li>
  35. <li><a href="#menu4" ><?php if($page != "route_collections.php" && $page != "quels_objets.php" && $page != "quelle_collection.php" && $page != "compagnon_auberge.php" ) echo '<img src="images/menu_haut_06.jpg" width="141" height="75" border="0" />'; else echo '<img src="images/menu_haut_on_06.jpg" width="141" height="75" border="0" />'; ?></a>
  36.  <ul>
  37.   <li><a href="quels_objets.php">Quels objet ?</a></li>
  38.   <li><a href="quelle_collection.php">Quelle collection ?</a></li>
  39.   <li><a href="compagnon_auberge.php">Compagnon de l'Auberge</a></li>
  40.  </ul>
  41. </li>
  42. <li><a href="#menu5" ><?php if($page != "investisseurs.php" && $page != "acheter.php" && $page != "dormez.php" && $page != "descriptif_immo.php" ) echo '<img src="images/menu_haut_07.jpg" width="117" height="75" border="0" />';  else echo '<img src="images/menu_haut_on_07.jpg" width="117" height="75" border="0" />'; ?></a>
  43.  <ul>
  44.   <li><a href="acheter.php">Acheter, c'est<br />payer moins d'imp&ocirc;ts</a></li>
  45.   <li><a href="dormez.php">Dormez, nous g&eacute;rons</a></li>
  46.   <li><a href="descriptif_immo.php">Descriptif Immobilier</a></li>
  47.  </ul>
  48. </li>
  49. <li><a href="#menu6" ><?php if($page != "franchises.php" && $page != "devenez_aubergiste.php" && $page != "metier_aubergiste.php" && $page != "passion_collection.php" && $page != "rencontrons_nous.php" ) echo '<img src="images/menu_haut_08.jpg" width="126" height="75" border="0" />';  else echo '<img src="images/menu_haut_on_08.jpg" width="126" height="75" border="0" />'; ?></a>
  50.  <ul>
  51.   <li><a href="devenez_aubergiste.php">Devenez l'aubergiste<br />du XXIeme si&egrave;cle</a></li>
  52.   <li><a href="metier_aubergiste.php">Le m&eacute;tier d'Aubergiste</a></li>
  53.   <li><a href="passion_collection.php">La Passion de la Collection</a></li>
  54.   <li><a href="rencontrons_nous.php">Rencontrons nous</a></li>
  55.  </ul>
  56. </li>
  57. </ul>


 
Est-ce qu'il y aurait un moyen de mettre le menu devant en retouchent juste le css ?
 
J'espere que c'est assez clair ;)
Merci d'avance pour le coup de main.

Reply

Marsh Posté le 30-11-2006 à 14:51:11   

Reply

Marsh Posté le 30-11-2006 à 15:34:41    

Laissez tomber, j'ai trouvé : c'était le flash qui est sur la page où ça m'embete ... il suffisait de le passer en wmode transparent ... merci SitePoint Forum !

Reply

Sujets relatifs:

Leave a Replay

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