problème avec menu css horizontal

problème avec menu css horizontal - HTML/CSS - Programmation

Marsh Posté le 08-10-2011 à 12:06:26    

Bonjour,
 
Je suis en train de me faire un menu et voudrais qu'il prenne toute la place en bas de la bannière. J'ai donc crée un première bloc de 1030px qui s'appel "menu-haut", après j'ai mes différentes parties et à la fin j'ai mi un bloc "menu_milieu_fin" et je voudrais qu'il s'adapte pour que le menu à la fin fasse 1030 et qu'il prenne donc tout la largeur. Je ne peux pas lui mettre une largeur fixe car j'ai une traduction en anglais du menu et le texte varie. J'ai testé un width: 100%; mais ça ne marche pas, avez vous une solution? Merci
 
voilà le code html et un exemple du menu : http://blog.henpier.fr/test/
 
 

Code :
  1. <div id="menu-haut">
  3. <ul id="menu">
  4. <li class="menu_gauche"></li>
  5. <li class="menu_menu_milieu"><a href="#" title="#">text1</a></li>
  6. <li class="menu_menu_milieu"><a href="#" title="#">text2</a></li>
  7. <li class="menu_menu_milieu"><a href="#" title="#">text3</a></li>
  8. <li class="menu_menu_milieu"><a href="#" title="#">text4</a></li>
  9. <li class="menu_menu_milieu"><a href="#" title="#">text5</a></li>
  10. <li class="menu_milieu_fin"> </li>
  11. <li class="menu_droite"></li>
  12. </ul>
  13.        
  14. </div>


 
le css
 

Code :
  1. #menu-haut
  2. {
  3. width: 1030px;
  4. }
  6. .menu_gauche
  7. {
  8. float: left ;
  9. width: 14px;
  10. height: 46px;
  11. background : transparent url("../images/menu/menu_gauche.png" );
  12. }
  15. .menu_milieu_fin
  16. {
  17. float: left ;
  18. width: 100%;
  19. height: 46px;
  20. background : transparent url("../images/menu/menu_milieu.png" ) repeat-x;
  21. display: inline-block;
  22. }
  24. .menu_droite
  25. {
  26. float: left ;
  27. width: 20px;
  28. height: 46px;
  29. background : transparent url("../images/menu/menu_droite.png" );
  30. }
  32. #menu
  33. {
  34. list-style: none ;
  35. margin: 0 ;
  36. padding: 0 ;
  37. list-style: 0 ;
  38. }
  40. .menu_menu_milieu
  41. {
  42. float: left ;
  43. height: 46px;
  44. background : transparent url("../images/menu/menu_milieu.png" ) repeat-x;
  45. padding-right: 10px ;
  46. padding-left: 10px ;
  47. }
  49. .menu_menu_milieu  a
  50. {
  51. display: block ;
  52. font: 1em "Trebuchet MS",Arial,sans-serif ;
  53. line-height: 1em ;
  54. padding: 10px 0 ;
  55. color: #fff;
  56. text-align: center ;
  57. }

Reply

Marsh Posté le 08-10-2011 à 12:06:26   

Reply

Sujets relatifs:

Leave a Replay

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