HTML / CSS : menus déroulants et texte balladeur (MAJ pb FF & IE

HTML / CSS : menus déroulants et texte balladeur (MAJ pb FF & IE - HTML/CSS - Programmation

Marsh Posté le 11-03-2005 à 17:50:10    

Bonjour
Je suis en train de créer un premier site. J'ai fait des menus déroulants dans une bande en haut mais j'ai un problème : lorsque je passe la souris, le menu se déroule bien, mais le texte de la page ne reste pas dessous, il se sauve, de façon à être centré entre le menu déroulé et le bord de la page.
Que faire ?  
 
MAJ
- sous Firefox : le fait de dérouler un menu fait se décaler tout le milieu du site (texte et images) entre le menu déroulé et le bord de la page. J'ai résolu le problème pour les paragraphes en mettant l'argument "position:absolute" dans mon css (au style texte_milieu). Par contre, toujours le même problème pour le titre. J'ai donc mis la même chose au style titre, mais cette fois toute la mise en forme est décalée.  
Comment améliorer cela ?
 
- Sous Internet explorer : ça ne marche pas bcp mieux...
 > j'ai un message comme quoi explorer a empeché le contenu actif du fichier de fonctionner (le javascript du menu j'imagine). Résultat : les menus ne marchent pas. Je ne me vois pas autoriser des choses sur un site que je ne connais pas, les éventuels visiteurs auront sûremnet la même réaction
 > si je clique quand même : je n'ai plus le problème du centrage mais un autre. Mon menu est situé dans la bande bleue, si je déroule le menu, toute la bande bleue s'agrandit!
Comment arranger ça ?
Voici mon css :  
 

Code :
  1. body
  2. {
  3. padding:0;
  4. position: absolute;
  5. width: 100%;
  6. height: 100%;
  7. margin:0
  8. }
  10. .haut
  11. {
  12. width: 100%;
  13. height: 12%;
  14. background-color: #06c;
  15. font-size: 18px;
  16. font-weight: bold;
  17. text-align: justify;
  18. margin:0px;
  19. paddingbotton:0;
  20. paddingtop:0;
  21. marginbotton:0;
  22. }
  24. .milieu
  25. {
  26. width: auto;
  27. height: 72%;
  28. background-color: #FFFFFF;
  29. font-size: 18px;
  30. text-align: justify;
  31. margin:10px;
  32. overflow: auto;
  33. }
  34. .bas
  35. {
  36. width: auto;
  37. height: 27px;
  38. background-color: #06C;
  39. font-size: 18px;
  40. padding:6px;
  41. text-decoration: none;
  42. color:white;
  43. }
  45. .titre
  46. {
  47. text-align:center;
  48. font-size:30px;
  49. font-style: italic;
  50. font-weight: bold;
  51. background-color: #FFFFFF;
  52. }
  54. .texte_milieu
  55. {
  56. text-align:justify;
  57. font-size:18px;
  58. margin:20px;
  59. background-color: #FFFFFF;
  60. }
  62. a:link
  63. {
  64. text-decoration: none;
  65. color:black;
  66. }
  67. a:visited
  68. {
  69. text-decoration: none;
  70. color: red;
  71. }
  73. a:active
  74. {
  75. text-decoration: none;
  76. color: #FF3300;
  77. }
  79. a:hover
  80. {
  81. text-decoration:none;
  82. color:white;
  83. background-color:#06C;
  84. }
  85. .titre_paragraphe
  86. {
  87. text-align:left;
  88. font-style:italic;
  89. font-size:36px;
  90. }
  92. dl, dt, dd, ul, li {
  93. margin: 0;
  94. padding: 0;
  95. list-style-type: none;
  96. }
  97. #menu {
  98. position: 20px; /* placement du menu, à modifier selon vos besoins */
  99. top: 0;
  100. left: 0;
  101. z-index:100;
  102. width: 100%; /* correction pour Opera */
  103. }
  104. #menu dl {
  105. float: left;
  106. width: 8em;
  107. }
  108. #menu dt {
  109. cursor: pointer;
  110. text-align: center;
  111. font-weight: bold;
  112. background: #0066a6;
  113. border: 1px solid gray;
  114. margin: 1px;
  115. color:white;
  116. }
  117. #menu dd {
  118. display: none;
  119. border: 1px solid gray;
  120. }
  121. #menu li {
  122. text-align: center;
  123. background: #fff;
  124. }
  125. #menu li a
  126. {
  127. color: #000;
  128. text-decoration: none;
  129. display: block;
  130. height: 100%;
  131. border: 0 none;
  132. }
  133. #menu dt a {
  134. color: white;
  135. text-decoration: none;
  136. display: block;
  137. height: 100%;
  138. border: 0 none;
  139. }
  140. #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
  141. background: #0093cc;
  142. color:white;
  143. }


Message édité par gros minet le 11-03-2005 à 20:46:12
Reply

Marsh Posté le 11-03-2005 à 17:50:10   

Reply

Marsh Posté le 11-03-2005 à 18:03:30    

il faut placer le men et ses éléments de manière absolue ou fixed afin de le faire sortir du flux (sinon il influence le reste de la page au niveau du placement)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 11-03-2005 à 18:15:00    

J'ai mis un "position:absolute" dans "texte milieu" et ça marche pour le texte.
Par contre j'ai mis la même chose dans "titre" : le problème est réglé mais la mise en forme du titre et du texte milieu d'origine n'est plus respectée. Que modifier ?  
Merci

Reply

Marsh Posté le 11-03-2005 à 19:12:21    

AUtre problème : le titre se déplace toujours, le texte du milieu ne se déplace plus, mais on le voit à travers le menu et on ne peut pas cliquer sur l'item du menu à l'endroit où il y a le texte. Que faire ?

Reply

Sujets relatifs:

Leave a Replay

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