Problème menu horizontal CSS

Problème menu horizontal CSS - HTML/CSS - Programmation

Marsh Posté le 13-09-2009 à 20:40:17    

Bonjour,
Je commence à créer un nouveau site ou j'essaie de me débrouiller tant bien que mal avec les codes (je n'ai appris que par internet).
J'ai un menu à la vertical et je souhaite aussi avoir un menu horizontal en haut (en dessous de ma bannière) et c'est ce qui me pose problème.
En effet après avoir chercher sur internet comment faire j'ai fini par trouver enfin un code css qui marche, cependant le menu est décallé vers le bas et rogné au lieu de rester dans son emplacement.
Voici l'adresse de la page que je crée qui bug :  
http://www.bijouxetnature.com/bijoux_pierres.php
 
Je vous mets une partie des codes des pages, si besoin de + dîtes le moi.
 
La page php "bijoux_pierres.php" : ou j'ai mis le code "php include" pour que je puisse faire une modif du menu sans avoir à changer le menu page par page
 

Code :
  1. <ul id="MenuH">
  2.  <?php include 'menu_horizontal.php'; ?>
  3.                </ul>


______________________________________________________________________________________________________
 
La page du menu : "menu_horizontal.php"

Code :
  1. <li><a href="index.php" onmouseover="img20.src='menu_h_accueil2.jpg' " onmouseout="img20.src='menu_h_accueil.jpg'"><img name="img20" src="menu_h_accueil.jpg" title="Accueil Bijoux et Nature" alt="Accueil"/></a></li>
  2. <li><a href="bijoux_pierres.php" onmouseover="img21.src='menu_h_bijoux_pierres2.jpg' " onmouseout="img21.src='menu_h_bijoux_pierres.jpg'"><br><br><img name="img21" src="menu_h_bijoux_pierres.jpg" title="Bijoux en Pierres" alt="Bijoux en Pierres"/></a></li>
  3. <li><a href="mineraux.php" onmouseover="img22.src='menu_h_mineraux2.jpg' " onmouseout="img22.src='menu_h_mineraux.jpg'"><img name="img22" src="menu_h_mineraux.jpg" title="Minéraux" alt="Minéraux"/></a></li>
  4. <li><a href="cosmetiques_naturels.php" onmouseover="img23.src='menu_h_cosmetiques_naturels2.jpg' " onmouseout="img23.src='menu_h_cosmetiques_naturels.jpg'"><img name="img23" src="menu_h_cosmetiques_naturels.jpg" title="Cosmétiques Naturels" alt="Cosmétiques Naturels"/></a></li>


_______________________________________________________________________________________________________
 
 
La page CSS :

Code :
  1. body {
  2. background-image: url(fond_rouge.jpg);
  3. color: #000000;
  4. font-family: Verdana, Arial, Helvetica, ,sans-serif;
  5. font-size: 15px;
  6. }
  8. #Conteneur {
  9. width: 795px;
  10. margin: 0;
  11. padding: 0;
  12. border: 3px solid #000000;
  13. background-image: url(../fond_rouge_uni.jpg);
  14. margin-left: auto;
  15. margin-right: auto;
  16. }
  18. #Header {
  19. background-image: url(../fond_rouge.jpg);
  20. width: 795px;
  21. height: 108px;
  22. border-bottom: 1px solid #000000;
  23. clear: both;
  24. margin: 0;
  25. padding: 0;
  26. }
  28. #MenuH {
  29. background-image: url(../fond_rouge.jpg);
  30. width: 795px;
  31. height: 71px;
  32. border-bottom: 1px solid #000000;
  33. margin: 0;
  34. padding: 0;
  35. list-style-type: none;
  36. }
  38. #MenuH li {
  39.     margin: 0;
  40.  padding: 0;
  41.  display:-moz-inline-stack;
  42.  display:inline-block;
  43.  zoom:1;
  44.  *display:inline;
  45. }
  47. #ConteneurMenuContenu {
  48. clear: both;
  49. width: 100%;
  50. }
  52. #Menu {
  53. background-image: url(../fond_rouge_uni.jpg);
  54. width: 134px;
  55. float: left;
  56. margin: 0;
  57. padding: 0;
  58. list-style-type: none;
  59. }
  61. #Menu li {
  62.     margin: 0;
  63. }
  65. #Contenu {
  66. background-color: #FFFFFF;
  67. width: 650px;
  68. float: left;
  69. padding: 5px;
  70. border-left: 1px solid #000000;
  71. margin: 0;
  72. min-height: 900px;
  73. _height: 900px;
  74. }
  76. #Footer {
  77. clear: both;
  78. border-top: 1px solid #000000;
  79. background-color: #FFFFFF;
  80. }


 
 
_______________________________________________________________
 
 
 
Que dois-je faire ? si y'a une autre manière qui marche pour le menu horizontal je veux bien.
Merci
 

Reply

Marsh Posté le 13-09-2009 à 20:40:17   

Reply

Marsh Posté le 13-09-2009 à 20:44:08    

Bon en fait en me relisant problème réglé y'avait des <br> dans mon menu qui apparement faisaient tout déconner et là ça s'affiche correctement. Il me faudrait juste espacer les textes du menu un peu

Message cité 1 fois
Message édité par aiyana le 13-09-2009 à 20:46:50
Reply

Marsh Posté le 13-09-2009 à 21:11:56    

aiyana a écrit :

Il me faudrait juste espacer les textes du menu un peu


Code :
  1. body {
  2.     background-image: url(fond_rouge.jpg);
  3.     color: #000000;
  4.     font-family: Verdana, Arial, Helvetica, ,sans-serif;
  5.     font-size: 15px;
  6. }
  7.  
  8. #Conteneur {
  9.     width: 795px;
  10.     margin: 0;
  11.     padding: 0;
  12.     border: 3px solid #000000;
  13.     background-image: url(../fond_rouge_uni.jpg);
  14.     margin-left: auto;
  15.     margin-right: auto;
  16. }
  17.  
  18. #Header {
  19.     background-image: url(../fond_rouge.jpg);
  20.     width: 795px;
  21.     height: 108px;
  22.     border-bottom: 1px solid #000000;
  23.     clear: both;
  24.     margin: 0;
  25.     padding: 0;
  26. }
  27.  
  28. #MenuH {
  29.     background-image: url(../fond_rouge.jpg);
  30.     width: 795px;
  31.     height: 71px;    
  32.     border-bottom: 1px solid #000000;
  33.     margin: 0;
  34.     padding: 0;
  35.     list-style-type: none;
  36. }
  37.  
  38. #MenuH li {
  39.        margin: 0 15px;
  40.      padding: 0;
  41.      float:left;
  42.      zoom:1;
  43. }
  44.  
  45. #ConteneurMenuContenu {
  46.     clear: both;
  47.     width: 100%;
  48. }
  49.  
  50. #Menu {
  51.     background-image: url(../fond_rouge_uni.jpg);
  52.     width: 134px;
  53.     clear:both;
  54.     float: left;
  55.     margin: 0;
  56.     padding: 0;
  57.     list-style-type: none;
  58. }
  59.  
  60. #Menu li {
  61.        margin: 0;
  62. }
  63.  
  64. #Contenu {
  65.     background-color: #FFFFFF;
  66.     width: 650px;
  67.     float: left;
  68.     padding: 5px;
  69.     border-left: 1px solid #000000;
  70.     margin: 0;
  71.     min-height: 900px;
  72.     _height: 900px;
  73. }
  74.  
  75. #Footer {
  76.     clear: both;
  77.     border-top: 1px solid #000000;
  78.     background-color: #FFFFFF;
  79. }
 

Voila... Fais une sauvegarde de ta version quand même... si il y a un truc que tu comprend pas, dis moi...


Message édité par abais le 13-09-2009 à 21:14:26

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 16-09-2009 à 23:51:50    

Merci mais finalement je n'aime pas les espaces car ça ne fait pas "fondu" sur le fond entre les boutons du menu.
J'ai arrangé le menu pour que justement le fond se fonde bien entre les titres (chaque bouton est une image faite sous photoshop et je les ai fais se coller tous).
Sur internet explorer ça marche nickel mais sur fire fox il me met des espaces entre les images (au lieu de les coller) pourquoi ? et du coup le menu ne rentre pas et y'a un bouton décallé en bas.


Message édité par aiyana le 16-09-2009 à 23:58:13
Reply

Marsh Posté le 17-09-2009 à 09:47:08    

Alors efface le "15px" de :

 

MenuH li {
      margin: 0 15px;
      .....

 

Si la largeur de tes boutons additionnée correspond bien à la largeur du menu, ça devrait le faire...


Message édité par abais le 17-09-2009 à 09:47:17

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 17-09-2009 à 19:31:22    

J'ai enlevé les "display" comme tu m'avais noté et mis margin 0 mais j'ia toujours le bug sous firefox...  
Je vais voir pour diminuer la dimension de mes boutons mais bon pourquoi il me met un espace entre les images c'est pas joli

Reply

Marsh Posté le 18-09-2009 à 10:23:51    

Tu a remis "inline-block" en display...
En visitant ton site à l'instant, le seul truc qui manque, c'est le float:left; sur les <li>, et retirer le display:inline-block...

 

On a donc :

Code :
  1. ...
  2. #MenuH li {
  3. float:left;
  4. margin:0;
  5. padding:0;
  6. }
  7. ...



Message édité par abais le 18-09-2009 à 10:24:10

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 19-09-2009 à 17:51:27    

Merci abais, je n'ai pas trop compris pourquoi mais ça marche très bien maintenant :)
(J'avais mal mis à jour effectivement je ne sais pas ce que j'ai foutu.)

Reply

Sujets relatifs:

Leave a Replay

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