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 :
- <div id="menu-haut">
- <ul id="menu">
- <li class="menu_gauche"></li>
- <li class="menu_menu_milieu"><a href="#" title="#">text1</a></li>
- <li class="menu_menu_milieu"><a href="#" title="#">text2</a></li>
- <li class="menu_menu_milieu"><a href="#" title="#">text3</a></li>
- <li class="menu_menu_milieu"><a href="#" title="#">text4</a></li>
- <li class="menu_menu_milieu"><a href="#" title="#">text5</a></li>
- <li class="menu_milieu_fin"> </li>
- <li class="menu_droite"></li>
- </ul>
-
- </div>
|
le css
Code :
- #menu-haut
- {
- width: 1030px;
- }
- .menu_gauche
- {
- float: left ;
- width: 14px;
- height: 46px;
- background : transparent url("../images/menu/menu_gauche.png" );
- }
- .menu_milieu_fin
- {
- float: left ;
- width: 100%;
- height: 46px;
- background : transparent url("../images/menu/menu_milieu.png" ) repeat-x;
- display: inline-block;
- }
- .menu_droite
- {
- float: left ;
- width: 20px;
- height: 46px;
- background : transparent url("../images/menu/menu_droite.png" );
- }
- #menu
- {
- list-style: none ;
- margin: 0 ;
- padding: 0 ;
- list-style: 0 ;
- }
- .menu_menu_milieu
- {
- float: left ;
- height: 46px;
- background : transparent url("../images/menu/menu_milieu.png" ) repeat-x;
- padding-right: 10px ;
- padding-left: 10px ;
- }
- .menu_menu_milieu a
- {
- display: block ;
- font: 1em "Trebuchet MS",Arial,sans-serif ;
- line-height: 1em ;
- padding: 10px 0 ;
- color: #fff;
- text-align: center ;
- }
|
