Votre question

Pb menu déroulant

Tags :
  • Gif
  • Programmation
Dernière réponse : dans Programmation
19 Janvier 2008 13:22:31

Bonjour,

Je suis actuellement en train de m'en voir avec mon menu déroulant. Je vous explique :
Mon menu est horizontal, lors du rollover sur 1 de mes boutons, un sous-menu vertical apparait sous le bouton en question.
Mon problème est le suivant :
le sous-menu passe sous ma div de contenu, donc on ne voit pas mon sous-menu et on ne peut pas cliquer dessus. J'ai bien entendu essayé avec l'attribut z-index, mais rien n'a fonctionné.

Je vous copie mon code, si vous pouvez me dire ce qui cloche parce que là je galère vraiment.

Merci à vous.


  1. <head>
  2. <title>Document sans titre</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. <!-- ImageReady Preload Script (site-final.psd) -->
  5. <SCRIPT TYPE="text/javascript">
  6. <!--
  7.  
  8. function newImage(arg) {
  9. if (document.images) {
  10. rslt = new Image();
  11. rslt.src = arg;
  12. return rslt;
  13. }
  14. }
  15.  
  16. function changeImages() {
  17. if (document.images && (preloadFlag == true)) {
  18. for (var i=0; i<changeImages.arguments.length; i+=2) {
  19. document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
  20. }
  21. }
  22. }
  23.  
  24. var preloadFlag = false;
  25. function preloadImages() {
  26. if (document.images) {
  27. site_final_03_over = newImage("images/site-final_03-over.gif");
  28. site_final_04_over = newImage("images/site-final_04-over.gif");
  29. site_final_05_over = newImage("images/site-final_05-over.gif");
  30. site_final_06_over = newImage("images/site-final_06-over.gif");
  31. site_final_07_over = newImage("images/site-final_07-over.gif");
  32. site_final_09_over = newImage("images/site-final_09-over.gif");
  33. site_final_10_over = newImage("images/site-final_10-over.gif");
  34. site_final_12_over = newImage("images/site-final_12-over.gif");
  35. site_final_13_over = newImage("images/site-final_13-over.gif");
  36. site_final_14_over = newImage("images/site-final_14-over.gif");
  37. site_final_15_over = newImage("images/site-final_15-over.gif");
  38. site_final_17_over = newImage("images/site-final_17-over.gif");
  39. preloadFlag = true;
  40. }
  41. }
  42.  
  43. function divaffiche_tour(){
  44. document.getElementById("mc_tour").style.display = "inline";
  45. }
  46. function divcache_tour(){
  47. document.getElementById("mc_tour").style.display = "none";
  48. }
  49. function divaffiche_partenaires(){
  50. document.getElementById("mc_partenaires").style.display = "inline";
  51. }
  52. function divcache_partenaires(){
  53. document.getElementById("mc_partenaires").style.display = "none";
  54. }
  55.  
  56. // -->
  57. </SCRIPT>
  58. <!-- End Preload Script -->
  59. </head>
  60.  
  61. <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
  62. <center>
  63. <div>
  64. <div style="width:1024px">
  65. <div style="float:left; width:608px; height:150px"><img src="images/site-final_01.gif" border="0" alt="tour de france humanitaire"></div>
  66. <div style="float:left; width:416px; height:150px"><img src="images/site-final_02.gif" border="0" alt="tour de france humanitaire"></div>
  67. </div>
  68. <div style="width:1024px">
  69. <div style="float:left; width:218px; top:150px">
  70. <a href="index.html"
  71. ONMOUSEOVER="changeImages('site-final_03', 'images/site-final_03-over.gif'); return true;"
  72. ONMOUSEOUT="changeImages('site-final_03', 'images/site-final_03.gif'); return true;">
  73. <img src="images/site-final_03.gif" name="site-final_03" border="0" width="218" height="69">
  74. </a>
  75. </div>
  76. <div id="m_tour" style="float:left; width:196px; top:150px"
  77. ONMOUSEOVER="changeImages('site-final_04', 'images/site-final_04-over.gif'); divaffiche_tour(); return true;"
  78. ONMOUSEOUT="changeImages('site-final_04', 'images/site-final_04.gif'); divcache_tour(); return true;">
  79. <a href="tdf.html"><img src="images/site-final_04.gif" name="site-final_04" border="0" width="196" height="69"></a>
  80. <div style="display:none" id="mc_tour" class="menu"
  81. onmouseover="changeImages('site-final_04', 'images/site-final_04-over.gif'); divaffiche_tour(); return true;"
  82. onmouseout="changeImages('site-final_04', 'images/site-final_04.gif'); divcache_tour(); return true;">
  83. <a href="#"><img src="images/site-final_09.gif" name="site-final_09" border="0"></a>
  84. <a href="#"><img src="images/site-final_13.gif" name="site-final_13" border="0"></a>
  85. <a href="#"><img src="images/site-final_15.gif" name="site-final_15" border="0"></a>
  86. <a href="#"><img src="images/site-final_17.gif" name="site-final_17" border="0"></a>
  87. </div>
  88. </div>
  89. <div id="m_partenaires" style="float:left; width:194px; top:150px"
  90. ONMOUSEOVER="changeImages('site-final_05', 'images/site-final_05-over.gif'); divaffiche_partenaires(); return true;"
  91. ONMOUSEOUT="changeImages('site-final_05', 'images/site-final_05.gif'); divcache_partenaires(); return true;">
  92. <a href="partenaires.html"><img src="images/site-final_05.gif" name="site-final_05" border="0" width="194" height="69"></a>
  93. <div style="display:none" id="mc_partenaires" class="menu"
  94. onmouseover="changeImages('site-final_05', 'images/site-final_05-over.gif'); divaffiche_partenaires(); return true;"
  95. onmouseout="changeImages('site-final_05', 'images/site-final_05.gif'); divcache_partenaires(); return true;">
  96. <a href="#"><img src="images/site-final_10.gif" name="site-final_10" border="0"></a>
  97. <a href="#"><img src="images/site-final_12.gif" name="site-final_12" border="0"></a>
  98. <a href="#"><img src="images/site-final_14.gif" name="site-final_14" border="0"></a>
  99. </div>
  100. </div>
  101. <div style="float:left; width:198px; top:150px">
  102. <a href="blog.html"
  103. ONMOUSEOVER="changeImages('site-final_06', 'images/site-final_06-over.gif'); return true;"
  104. ONMOUSEOUT="changeImages('site-final_06', 'images/site-final_06.gif'); return true;">
  105. <img src="images/site-final_06.gif" name="site-final_06" border="0" width="198" height="69">
  106. </a>
  107. </div>
  108. <div style="float:left; width:198px; top:150px">
  109. <a href="inscription.html"
  110. ONMOUSEOVER="changeImages('site-final_07', 'images/site-final_07-over.gif'); return true;"
  111. ONMOUSEOUT="changeImages('site-final_07', 'images/site-final_07.gif'); return true;">
  112. <img src="images/site-final_07.gif" name="site-final_07" border="0" width="218" height="69">
  113. </a>
  114. </div>
  115. </div>
  116. <div style="text-align:left; width:1024px; background-color:#0033FF; position:absolute; top:230px">Hello everybody hrfv aelv aevgra aevrnlkgv ebi oveaz vfjkiernv ehjvrevejbrvek uqrevjhrev qoviebnv ekjnvje ve vuez vhen<br> erbsganrzbdb aetb ry,y yi V</div>
  117.  
  118. </div>
  119. </center>
  120. </body>

Autres pages sur : menu deroulant

a c 232 L Programmation
20 Janvier 2008 12:00:11

Salut,

Ajoute un clear:both dans le style de ton div
  1. <div style="text-align:left; width:1024px; background-color:#0033FF; position:absolute; top:230px">Hello everybody hrfv aelv aevgra aevrnlkgv ebi oveaz vfjkiernv ehjvrevejbrvek uqrevjhrev qoviebnv ekjnvje ve vuez vhen<br> erbsganrzbdb aetb ry,y yi V</div>
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS