Comment paramétrer mon menu déroulant horizontal ?"

Solutions (3)
Tags :
  • element
  • Programmation
|
bonjour, voilà j'ai un petit soucis que je n'arrive pas à régler moi m^me. mon menu déroulant horizontal ne touche pas mes sous menu, il y un demi-centimètre de décalage qui m'empêche de naviguer dans le menu :??: 

  1. /*menu horizontal déroulant*/
  2.  
  3.  
  4. #menu, #menu ul /* Liste */
  5. {
  6. padding : 0; /* pas de marge intérieure */
  7. margin :0; /* ni extérieure */
  8. list-style : none; /* on supprime le style par défaut de la liste */
  9. line-height : 20px; /* on définit une hauteur pour chaque élément */
  10. text-align : center; /* on centre le texte qui se trouve dans la liste */
  11. }
  12.  
  13. #menu /* Ensemble du menu */
  14. {
  15. font-weight : bold; /* on met le texte en gras */
  16. font-family : "comic sans ms"; /* on utilise Arial, c'est plus beau ^^ */
  17. font-size : 14px; /*auteur du texte:16 pixels */
  18. text-align: center;/* on centre le texte*/
  19.  
  20.  
  21. }
  22.  
  23. #menu a /* Contenu des listes */
  24. {
  25. display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
  26. padding : 0; /* aucune marge intérieure */
  27. background : #cde583; /* couleur de fond */
  28. color : #7e006a; /* couleur du texte */
  29. text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
  30. width : 145px; /* largeur */
  31. margin:0;
  32. }
  33.  
  34. #menu li /* Elements des listes */
  35. {
  36. float : left;
  37. /* pour IE qui ne reconnaît pas "transparent" */
  38.  
  39. margin-bottom: 0;
  40. }
  41.  
  42. /* IE ne reconnaissant pas le sélecteur ">" */
  43. html>body #menu li
  44. {
  45. border: 3px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
  46. }
  47.  
  48. #menu li ul /* Sous-listes */
  49. {
  50. position: absolute; /* Position absolue */
  51. width: 144px; /* Largeur des sous-listes */
  52. left: -999em; /* Hop, on envoie loin du champ de vision */
  53. }
  54.  
  55.  
  56. #menu li ul li /* Éléments de sous-listes */
  57. {
  58. /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
  59. border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
  60. }
  61.  
  62. /* IE ne reconnaissant pas le sélecteur ">" */
  63. html>body #menu li ul li
  64. {
  65. border : 1px solid black; /* on met une bordure transparente en haut de chaque élément */
  66. }
  67.  
  68.  
  69. #menu a:hover /* Lorsque la souris passe sur un des liens */
  70. {
  71. color: #7e006a; /* On passe le texte en violet... */
  72. background: #f69720; /* ... et au contraire, le fond en orange */
  73. }
  74.  
  75. #menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
  76.  
  77. {
  78. left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
  79. }
  80.  
  81. #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
  82.  
  83. {
  84. left: auto; /* Repositionnement normal */
  85. min-height: 0; /* Corrige un bug sous IE */
  86. }
  87.  
  88. /*fin du menu deroulant horizontale*/
  89.  
  90.  
  91. /* debut du menu vertical*/
  92. /* Positionnement du menu */
  93. #menu_vertical
  94. {
  95. display: block;
  96. float: left; /* Le Menu flottera à gauche.*/
  97. font-family: "Arial";
  98. text-align:center;
  99. }
  100.  
  101. /* Fond et style du menu */
  102.  
  103. .element_menu_vertical
  104. {
  105. background-image: url("");/* Endroit du positionnement de l’image dans le site */
  106. background-repeat: repeat;/* le fond sera répété */
  107. color: #7e006a;/* le texte sera en vert */
  108. margin-left: 0;
  109. margin-top : 0; /*marge extérieure en haut. */
  110. margin-bottom: 0; /*marge extérieure en bas.*/
  111. border: 2px solid black;
  112. text-align:center;
  113. line-height: 0;
  114. width: 150px;/* Sur une largeur de block de 150 Pixels */
  115. }
  116. .element_menu_vertical a /* concerne les liens de element menu */
  117. {
  118. color: #7e006a; /*Les liens de element_menu seront orange. */
  119. text-align:center;
  120. margin-left: 0;
  121. margin-top : 0; /*marge extérieure en haut. */
  122. border: 2px solid black;
  123.  
  124. }
  125. .element_menu_vertical h1 /* concerne les liens de element menu */
  126. {
  127. color: #7e006a; /*Les liens de element_menu seront orange. */
  128. text-align:center;
  129. margin-left: 0;
  130. margin-top : 0; /*marge extérieure en haut. */
  131. border-bottom: 2px solid black;
  132.  
  133. }
  134.  
  135. .element_menu_vertical h3 /* concerne les liens de element menu */
  136. {
  137. color: #7e006a; /* On passe le texte en noir... */
  138. background-color: ; /* ... et au contraire, le fond en blanc */
  139.  
  140. {
  141. display: none; /* mise en cache du block niveau 2 */
  142. }
  143.  
  144.  
  145. li:hover ul.niveau2 /* lors du survol de la souris */
  146. {
  147. display:block; /* Apparition du block de niveau 2 */
  148. border-bottom: 2px solid black;
  149. }
  150.  
  151. ul ul
  152. {
  153. display: none; /* mise en cache du block niveau 2 */
  154. position: absolute; /* Bloque le deplacement des blocks */
  155. left: 150px; /* positionnement du block de niveau 2 */
  156. top: 0; /* Decalage du block niveau 2 par apport au block niveau 1 */
  157. margin: 0; /* decalage vers la droite du block niveau 2 par apport au block niveau 1 */
  158. padding: 0; /* Marges du block de niveau 2 */
  159. text-align:center;
  160. border-bottom: 2px solid black;
  161. }
  162.  
  163. ul
  164. {
  165. list-style-type: none; /* pas de puces */
  166. position: relative; /* Positionné en relatif pour servir de repere */
  167. width: 200px; /* élargit l'espace d'écriture du block de niveau 1. */
  168. text-align:center;
  169. border-bottom: 2px solid black;
  170. }
  171. .element_menu, ul.niveau2
  172. {
  173. background-image: url("fond3.jpg"); /* Endroit du positionnement de l’image dans le site */
  174. background-repeat: repeat-x; /* le fond sera répété uniquement sur la première ligne, horizontalement */
  175. color: #7e006a; /* le texte seras rose */
  176. border: 2px ridge black; /* 2 pixel effet 3D couleur rouge */
  177. margin-top : 0; /*marge extérieure en haut. */
  178. margin-bottom :0; /*marge extérieure en bas.*/
  179. text-align:center;
  180. border-bottom: 2px solid black;
  181. }
  182.  
  183. li
  184. {
  185. margin-top : 0; /*marge extérieure en haut. */
  186. margin-bottom :0; /*marge extérieure en bas.*/
  187. text-align:center;
  188. margin-left: 0;
  189. border-bottom: 2px solid black;
  190. }
  191.  
  192. /* fin du menu vertical*/



vous m excuserez avec tous les commentaire qu'il y a dans le texte mais je suis débutante et j'en ai encore besoin :)  et je remercie d'avance tous ceux qui tenteront de m'aider.
  • Meuniers a édité ce message
  • Meuniers a édité ce message
Contenus similaires
Score
0
òh
òi
, Modérateur |
Chez moi sous IE9 et Firefox 5 j'ai bien les sous éléments qui touchent le menu horizontal ?
Avec quel(s) navigateur(s) tu as un soucis ?
Et est-ce que tu pourrais montrer le soucis avec un screenshot (que tu uploades chez un hébergeur d'images genre casimages, imageshack...)
  • Commenter cette réponse |
Score
0
òh
òi
|
oups désolé

  1. <div id="menu">
  2. <li>
  3. <a href="#">accueil</a>
  4. </li>
  5.  
  6. <li>
  7. <a href="#">membres</a>
  8. <ul>
  9. <li><a href="#">connexion</a></li>
  10. <li><a href="#">inscription</a></li>
  11. </ul>
  12. </li>
  13.  
  14. <li>
  15. <a href="#">mon espace</a>
  16. <ul>
  17. <li>
  18. <a href="#">album photos</a>
  19. </li>
  20. <li>
  21. <a href="#">Profil</a>
  22. </li>
  23. <li>
  24. <a href="#">Blog</a>
  25. </li>
  26. <li>
  27. <a href="#">mes outils wedding planner</a>
  28. </li>
  29. </ul>
  30. </li>
  31.  
  32. <li>
  33. <a href="#">Annuaire</a>
  34. <ul>
  35. <li><a href="#">faire-part</a></li>
  36. <li><a href="#">bijoux</a></li>
  37. <li><a href="#">tenue</a></li>
  38. <li><a href="#">alliances</a></li>
  39. <li><a href="#">animation</a></li>
  40. <li><a href="#">photographe</a></li>
  41. </ul>
  42. </li>
  43.  
  44. <li>
  45. <a href="s_organiser.php">organiser</a>
  46. <ul><li><a href="#">Votre planning general</a></li>
  47. <li><a href="votre_lieu_de_reception.php">Votre lieu de reception</a></li>
  48. <li><a href="#">la robe</a></li>
  49. <li><a href="#">le traiteur</a></li>
  50. <li><a href="#"></a></li></ul>
  51. </li>
  52. <li>
  53. <a href="#">FORUM</a>
  54. </li>
  55.  
  56. </ul>
  57.  
  58. </br>
  59. </br>
  60.  
  61. </br>
  62.  
  63. <div id="menu_vertical">
  64. <div class="element_menu_vertical">
  65. <h3> Annuaire</h3>
  66.  
  67. <ul><li><a href="">Tenue de cérémonie</a></li></ul>
  68. <ul><li><a href="page de destination.html">Traiteur</a></li></ul>
  69. <ul><li><a href="page de destination.html">faire-part</a></li></ul>
  70. <ul><li><a href="page de destination.html">Bijoux</a></li></ul>
  71. <ul><li><a href="page de destination.html">Alliances</a></li></ul>
  72. <ul><li><a href="page de destination.html">Animation</a></li></ul>
  73. <ul><li><a href="page de destination.html">photographe</a></li></ul>
  74. <ul><li><a href="page de destination.html">Vidéaste</a></li></ul>
  75. <ul><li><a href="page de destination.html">Décoration</a></li></ul>
  76. <ul><li><a href="page de destination.html">Wedding Planner</a></li></ul>
  77. <ul><li><a href="page de destination.html">Animation insolite</a></li></ul>
  78. <ul><li><a href="page de destination.html">Animation</a></li></ul>
  79. <ul><li><a href="page de destination.html">Animation</a></li></ul>
  80. <ul><li><a href="page de destination.html">Animation</a></li></ul>
  81. <ul><li><a href="page de destination.html">Animation</a></li></ul>
  82. <ul><li><a href="page de destination.html">Alliances</a></li></ul>
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89. </div>
  90. </div>


je viens de démarrer le site donc pour le moment c'est vide ^^
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Le soucis c'est que sans le code HTML associé, un fichier CSS ne nous aide pas beaucoup... :) 
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

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