Menu horizontal en CSS et liste
Bonjour,
Dans un soucis de modernisation de ma page web, j'essaie de retire un a un mes tableau, en les remplacant par du CSS.
Malheureusement, j'ai des problemes avec mon menu principal :
Ce menu doit prendre la totalite d'un div en longueur, chose qui etait facile avec <table>, mais avec <ul>, j ai plus de mal.
squelette : c'est un block entete contenant le titre, et juste en dessous le menu.
voici ma nouvelle maquette :
XHTML:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div id="header">
<h1>TITRE</h1>
<ul class="menu">
<li><a href="">News</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Research Programmes</a></li>
<li><a href="">Publications</a></li>
<li><a href="">Archives</a></li>
<li><a href="">Team</a></li>
<li><a href="">Library</a></li>
<li><a href="">Links</a></li>
<li><a href="">Keep informed</a></li>
<li><a href="">Search</a></li>
</ul>
</div> |
CSS:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| #header {
margin: 1% 2% 1% 2%;
width: 96%;
z-index: 10;
visibility: visible;
border-top: 1px solid #990000;
border-left: 3px solid #990000;
border-right: 2px solid #990000;
border-bottom: 3px solid #990000;
}
#header .menu {
list-style-type: none;
width: 100%;
}
#header .menu li { float: left;} |
Dans cet etat la, la liste ne s'etend pas sur toute la longueur. le top serait que les differents menus s'agrandissent tous petit a petit quand on agrandi la page, un truc 100% flotant quoi.... mais bon... ben j ai bidouille pas mal, mais ca donne rien.
Auriez vous une idee?
Merci!
