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


 
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