Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1462 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème menu horizontal CSS

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème menu horizontal CSS

n°1923745
aiyana
Posté le 13-09-2009 à 20:40:17  profilanswer
 

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. }
  7. #Conteneur {
  8. width: 795px;
  9. margin: 0;
  10. padding: 0;
  11. border: 3px solid #000000;
  12. background-image: url(../fond_rouge_uni.jpg);
  13. margin-left: auto;
  14. margin-right: auto;
  15. }
  16. #Header {
  17. background-image: url(../fond_rouge.jpg);
  18. width: 795px;
  19. height: 108px;
  20. border-bottom: 1px solid #000000;
  21. clear: both;
  22. margin: 0;
  23. padding: 0;
  24. }
  25. #MenuH {
  26. background-image: url(../fond_rouge.jpg);
  27. width: 795px;
  28. height: 71px;
  29. border-bottom: 1px solid #000000;
  30. margin: 0;
  31. padding: 0;
  32. list-style-type: none;
  33. }
  34. #MenuH li {
  35.     margin: 0;
  36.  padding: 0;
  37.  display:-moz-inline-stack;
  38.  display:inline-block;
  39.  zoom:1;
  40.  *display:inline;
  41. }
  42. #ConteneurMenuContenu {
  43. clear: both;
  44. width: 100%;
  45. }
  46. #Menu {
  47. background-image: url(../fond_rouge_uni.jpg);
  48. width: 134px;
  49. float: left;
  50. margin: 0;
  51. padding: 0;
  52. list-style-type: none;
  53. }
  54. #Menu li {
  55.     margin: 0;
  56. }
  57. #Contenu {
  58. background-color: #FFFFFF;
  59. width: 650px;
  60. float: left;
  61. padding: 5px;
  62. border-left: 1px solid #000000;
  63. margin: 0;
  64. min-height: 900px;
  65. _height: 900px;
  66. }
  67. #Footer {
  68. clear: both;
  69. border-top: 1px solid #000000;
  70. background-color: #FFFFFF;
  71. }


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

mood
Publicité
Posté le 13-09-2009 à 20:40:17  profilanswer
 

n°1923746
aiyana
Posté le 13-09-2009 à 20:44:08  profilanswer
 

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
n°1923754
abais
Posté le 13-09-2009 à 21:11:56  profilanswer
 

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.
n°1924678
aiyana
Posté le 16-09-2009 à 23:51:50  profilanswer
 

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
n°1924717
abais
Posté le 17-09-2009 à 09:47:08  profilanswer
 

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.
n°1924915
aiyana
Posté le 17-09-2009 à 19:31:22  profilanswer
 

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

n°1925004
abais
Posté le 18-09-2009 à 10:23:51  profilanswer
 

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.
n°1925260
aiyana
Posté le 19-09-2009 à 17:51:27  profilanswer
 

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.)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème menu horizontal CSS

 

Sujets relatifs
Probleme d'upload fichiers div ajax(c urgent)AS 3.0, problème d'agrandissement
Problème navigation sur un hébérgeur de site web htmlProblème de code PHP
Problème affichage htmlProblème import mysql win depuis linux
Problème avec la fonction SCardTransmitProbleme de poistionement site et apparence
[Résolu] problème de CSS sur un menu 
Plus de sujets relatifs à : Problème menu horizontal CSS


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR