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 :
- /* CSS du menu horizontal, bieler batiste */
- .menu{
- position:absolute;
- display:block;
- margin:0px 0px 0px 0px;
- padding:0px 0px 0px 0px;
- width:858px;
- }
- .menu ul{
- position:absolute;
- display:block;
- width:96px;
- margin:0px 0px 0px 0px;
- padding:0px 0px 0px 0px;
- border:1px #CCCCCC solid;
- background-color:#FFFFFF;
- }
-
- .menu li ul{
- visibility:hidden;
- }
- .menu li li ul{
- position:absolute;
- margin-left:102px;
- margin-top:-15px;
- }
-
- .menu li{
- list-style:none;
- width:96px;
- height:auto;
- display:inline;
- display/**/:block;
- float:none;
- float/**/:left;
- margin:0px 0px 0px 0px;
- padding:0px 0px 0px 0px;
- }
-
- .menu li li{
- display:block;
- float:none;
- }
-
- /* correct a little IE bug */
- * html .menu li li{
- display:inline;
- }
- .menu a{
- text-align:center;
- font-family:Arial;
- font-size:11px;
- /* background-color: #FFFFFF;
- border:1px #666 solid;*/
- color:#CCCCCC;
- display:block;
- width:96px;
- text-decoration:none;
- padding:0px 0px 0px 0px;
- margin:0px 0px 0px 0px;
- }
-
- .menu a:hover{
- background-color: #eee;
- /* border:1px #aaa solid;*/
- color:#FF55AE;
- }
-
- /* for a mozilla better display with key nav */
- .menu a:focus{
- background-color: #aaf;
- }
- a.linkOver{
- /*background-color: #eee;*/
- color:#FF55AE;
- }
|
et le HTML :
Code :
- <ul id="menu">
- <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>
- <ul>
- <li><a href="dans_quelle_ville.php">Dans quelle ville ?</a></li>
- <li><a href="auberge.php">L'Auberge</a></li>
- <li><a href="restaurant.php">Le Restaurant</a></li>
- <li><a href="chambres.php">Les Chambres</a></li>
- <li><a href="seminaires_banquets.php">Séminaires - banquets</a></li>
- <li><a href="accueil_services.php">L'accueil, les services</a></li>
- <li><a href="construction_bois.php">Construction en bois</a>
- <ul>
- <li><a href="#">Test1</a></li>
- <li><a href="#">Test2</a>
- <ul>
- <li><a href="#">Test2</a></li>
- <li><a href="#">Test2</a></li>
- <li><a href="#">Test3</a></li>
- </ul>
- </li>
- <li><a href="#">Test3</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <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>
- <ul>
- <li><a href="offre.php">Nos Offres</a></li>
- </ul>
- </li>
- <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>
- <ul>
- <li><a href="offres_groupe.php">Nos Offres Groupe</a></li>
- </ul>
- </li>
- <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>
- <ul>
- <li><a href="quels_objets.php">Quels objet ?</a></li>
- <li><a href="quelle_collection.php">Quelle collection ?</a></li>
- <li><a href="compagnon_auberge.php">Compagnon de l'Auberge</a></li>
- </ul>
- </li>
- <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>
- <ul>
- <li><a href="acheter.php">Acheter, c'est<br />payer moins d'impôts</a></li>
- <li><a href="dormez.php">Dormez, nous gérons</a></li>
- <li><a href="descriptif_immo.php">Descriptif Immobilier</a></li>
- </ul>
- </li>
- <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>
- <ul>
- <li><a href="devenez_aubergiste.php">Devenez l'aubergiste<br />du XXIeme siècle</a></li>
- <li><a href="metier_aubergiste.php">Le métier d'Aubergiste</a></li>
- <li><a href="passion_collection.php">La Passion de la Collection</a></li>
- <li><a href="rencontrons_nous.php">Rencontrons nous</a></li>
- </ul>
- </li>
- </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.
