Résolu Comment éclaircir mon problème de menu déroulant horizontal ?

Solutions (8)
Tags :
  • Html
  • Programmation
|
Bonjour à tous,

Je suis entrain de créer un site web, et j'ai mis en place un menu déroulant horizontal. Tout fonctionne bien le seul problème que je rencontre est l'espace entre chaque sous menu que je souhaiterais réduire (il fait une dizaine de pixel et je voudrais le réduire a 1px). Quelqu'un aurait-il la solution ?

voici le html et le css

HTML :

Edit OmaR: suppression du code. Il est dispo dans la 1ère réponse de l'utilisateur

Et voici le CSS:

  1. #menu_deroulant
  2. {
  3. width: 1057px;
  4. list-style-type: none;
  5. margin-left: 100px;
  6. margin-top: 100px;
  7. padding: 0px;
  8. border: 0px;
  9. position: absolute;
  10. top: 0;
  11. left: 0;
  12. }
  13. #menu_deroulant li
  14. {
  15. float: left;
  16. width: 146px;
  17. margin: 0px;
  18. padding: 0px;
  19. border: 0px;
  20. }
  21. #menu_deroulant .sous_menu_deroulant
  22. {
  23. display: none;
  24. list-style-type: none;
  25. margin: 0px;
  26. padding: 0px;
  27. border: 0px;
  28. text-align: center;
  29. }
  30. #menu_deroulant .sous_menu_deroulant li
  31. {
  32. float: none;
  33. margin: 0px;
  34. padding: 0px;
  35. border: 0px;
  36. width: 149px;
  37. border-top: 0px;
  38. border-right: 0px;
  39. }
  40. #menu_deroulant li a:link, #menu_deroulant li a:visited
  41. {
  42. display: block;
  43. height: 1%;
  44. color: #ffffff;
  45. background:#000000;
  46. margin: 0px;
  47. padding:4px 8px;
  48. border:0px inset #ffffff;
  49. text-decoration: none;
  50. }
  51. #menu_deroulant li a:hover
  52. {
  53. background-color: #F2462F;
  54. }
  55. #menu_deroulant li a:active
  56. {
  57. background-color: #5F879D;
  58. }
  59. #menu_deroulant .sous_menu_deroulant li a:link, #menu_deroulant .sous_menu_deroulant li a:visited
  60. {
  61. display: block;
  62. color: #000000;
  63. margin: 0px;
  64. border: 0px;
  65. text-decoration: none;
  66. background-color: #ffffff;
  67. top: 1px;
  68. }
  69. #menu_deroulant .sous_menu_deroulant li a:hover
  70. {
  71. background-image: none;
  72. background-color: #F2462E;
  73. }
  74. #menu_deroulant li:hover > .sous_menu_deroulant
  75. {
  76. display: block;
  77. }


Merci beaucoup pour votre aide...

Ah et il faut que je rajoute que cela ne fonctionne pas sous IE par contre sous chrome et firefox pas de soucis...
  • Meuniers a édité ce message
Contenus similaires
Meilleure solution
partage
, Modérateur |
Pour les espaces en trop, c'est parce que tu utilises des h3 et des h4 qui ont des valeurs par défaut de margin.
Ajoute ça :
  1. #menu_deroulant .sous_menu_deroulant h4, #menu_deroulant h3
  2. {
  3. margin: 0;
  4. }


Et même d'une manière générale, si tu veux que ton site soit à peu près identique sur les différents navigateurs, je te conseillerai de toujours mettre au début de ton CSS (à noter que tu n'aurais plus besoin du code précédent dans ce cas):
  1. * { padding: 0; margin:0; }

Les navigateurs utilisant des valeurs différentes pour les margin et padding, ça te permet de remettre ça à 0, et de spécifier toi-même tes valeurs.

Après, le code marche chez moi avec IE9, je n'ai pas de version précédente pour tester.
C'est peut être à cause du > que tu as dans #menu_deroulant li:hover > .sous_menu_deroulant, essaie de supprimer le >. Ca devrait résoudre le problème avec IE sans avoir d'impact pour les autres navigateurs.
  • Commenter cette solution |
Score
0
òh
òi
|
Désolé, après ton message j'ai vérifié mon code et il manquais le "!" avant DOCTYPE...

Merci beaucoup en tout cas
  • Commenter cette réponse |
Score
0
òh
òi
|
Si si je l'ai toujours sur toutes mes pages...

  1. <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//En" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlms="http://www.w3.org/1999/xhtml" xml:lang="fr">
  3. <head>
  4. <title> Site </title>
  5. <meta http.equiv="Content-Type" Content="text/html;charset=iso-8859-1" />
  6. <link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css"/>
  7. </head
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Ok, c'est certainement parce que tu n'as pas du mettre ce qu'il fallait dans le document pour qu'IE8 prenne le parseur d'IE8 :) 

Tu ne dois pas avoir de DOCTYPE par exemple j'imagine ?
Si j'enlève le doctype de mon document, ça ne fonctionne plus en effet.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Commenter cette réponse |
Score
0
òh
òi
|
Merci beaucoup, c'était juste ça et je n'y avais pas pensé...

Pour ce qui est de l'autre problème il reste inchangé même en enlevant le ">", je l'ai testé sous IE 8.
  • Commenter cette réponse |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par Miyen.
  • Commenter cette réponse |
Score
0
òh
òi
|
Salut,

voilà je te l'ai remis...


  1. <div id="menu">
  2. <ul id="menu_deroulant">
  3. <li><h3><a href="page_1.html">Accueil</a></h3></li>
  4. <li>
  5. <h3><a href="page_2.html">Page 2</a></h3>
  6. <ul class="sous_menu_deroulant">
  7. <li><h4><a href="page_2.html#ancre_1">Ancre 1</a></h4></li>
  8. <li><h4><a href="page_2.html#ancre_2">Ancre 2</a></h4></li>
  9. <li><h4><a href="page_2.html#ancre_3">Ancre 3</a></h4></li>
  10. <li><h4><a href="page_2.html#ancre_4">Ancre 4</a></h4></li>
  11. </ul>
  12. </li>
  13. <li>
  14. <h3><a href="page_3.html">Page 3</a></h3>
  15. <ul class="sous_menu_deroulant">
  16. <li><h4><a href="page_3.html#ancre_5">Ancre 5</a></h4></li>
  17. <li><h4><a href="page_3.html#ancre_6">Ancre 6</a></h4></li>
  18. <li><h4><a href="page_3.html#ancre_7">Ancre 7</a></h4></li></p>
  19. </ul>
  20. </li>
  21. <li>
  22. <h3><a href="page_4.html">Page 4</a></h3>
  23. <ul class="sous_menu_deroulant">
  24. <li><h4><a href="page_4.html#ancre_8">Ancre 8</a></h4></li>
  25. <li><h4><a href="page_4.html#ancre_9">Ancre 9</a></h4></li>
  26. </ul>
  27. </li>
  28. <li>
  29. <h3><a href="page_5.html">Page 5</a></h3>
  30. <ul class="sous_menu_deroulant">
  31. <li><h4><a href="page_5.html#ancre_10">Ancre 10</a></h4></li>
  32. </ul>
  33. </li>
  34. <li>
  35. <h3 id="biblio"><a href="page_6.html">Page 6</a></h3>
  36. <ul class="sous_menu_deroulant">
  37. <li><h4><a href="page_6.html#ancre_11">Ancre 11</a></h4></li>
  38. <li><h4><a href="page_6.html#ancre_12">Ancre 12</a></h4></li>
  39. <li><h4><a href="page_6.html#ancre_13">Ancre 13</a></h4></li>
  40. </ul>
  41. </li>
  42. <li><h3 id="contact"><a href="contact.html" title="Contact">Contact</a></h3></li>
  43. </ul>
  44.  
  45. </div>
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Est-ce que tu peux remettre ton code HTML s'il te plait ? Il a été bouzillé.
Et puis si tu pouvais ne pas mettre les numéros de ligne aussi, ça serait bien.

Tu as les balises [code] et [/code] à mettre autour de ton code aussi.

Merci
  • 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