Discussion :

[SYL666]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

[masu]

un width sur les li ca me semblerai pas mal:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
* {
margin:0;
padding:0;
}
#header {
	[...]
}
#header .menu {
	list-style-type: none;
	width: 100%;
}
#header .menu li {
float: left;
width: 10%;
}

[IdF-Socrateus]

j'aurais laissé en plus un peu de padding pour pas que le texte des menus soit collé aux bords (padding:1px 3px; ).
et centré horizontalement et verticalement (line-height puis vertical-align)

[SYL666]

hehe! un width sur les <li>... j'aurai du y penser. ca marche mieux maintenant merci!
pour les marges etc, je verrai plus tard.

J'ai tout de meme une autre question :
pourquoi ma liste se trouve visuellement a l'exterieur de mon div header encadre?!?! (elle est legerement en dessous) alors qu'elle est dedans dans le code

pour rappel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="header">
	<h1>TITRE</h1>
	<ul class="menu">
		<li><a href="">News</a></li>
		[...]
	</ul>
</div>

Le TITRE se trouve bien dedans, mais ma liste apparait colle au dessous du cadre... c'est plutot embetant....

[IdF-Socrateus]

il doit rester une marge non nulle quelque part: essaie de mettre margin:0; sur h1 (puisqu'il n'y a déjà plus de marge sur les li)... ou sur ul peut-être

[masu]

le float retire l'element du flux standard de texte.
Pour qu ton menu apparaisse dans ton header il fait rajouter un element en dessous avec clear both.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<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 class="clear">&nbsp;</div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.clear {
  clear:both;
}

[SYL666]

c'etait ca....
maintenant ca marceh pas trop mal!
j'ai plus qu'a regler les problemes de marge et ca sera OK.

Merci!