Définition de largeur des onglets d'un menu linéaire

Bonjour.

J'en appelle à vous car je n'arrive pas à définir une largeur fixe pour les "onglets" d'un menu, malgré la valeur width: 150px;

#navig {
	margin: 0 0 30px 15px;
	padding: 0;
	list-style: none;
}

#navig li {
	display: inline;
	width: 150px; /* Aucun effet */ 
}

#navig li a {
	padding: 5px 20px;
	margin: 0;
	background: #DF3B3F;
	color: #FFFFFF;
	border: 1px solid #CCCCCC;
	text-decoration: none;
}

Merci de votre aide.

Salut,

Il me semble que les balise de type inline déclaré en display ne peuvent avoir de dimension width et height contrairement à block.
Pour afficher une liste de façon horizontal avec des dimensions, il faut les rendre flottant, c'est à dire utiliser un float:left; et un display:block; à la place de display: inline;

Eh bien ça fonctionne.

#navig li {
	float: left;
}

#navig li a {
	display: block;
	padding: 5px 5px;
	margin: 0 5px 0 0;
	width: 150px;
	background: #DF3B3F;
	color: #FFFFFF;
	border: 1px solid #CCCCCC;
	text-align: center;
	text-decoration: none;
}

Par contre, il y a une chose que je ne m'explique pas. Dans :

#navig {
	margin: 20px 0 70px 15px;
	padding: 0;
	list-style: none;
}

Je dois fortement augmenter le margin-bottom (ici, 70 pixels) pour "décoller" ce qui se trouve en dessous du menu (en l’occurrence, un titre) alors qu'avant la modification, 30 pixels donnaient l'espacement voulu. Et idem pour le margin-top : 20 pixels au lieu de 0 pour que le menu ne soit pas collé sur le header.
Modifié par Nerva (29 Mar 2011 - 12:00)

Et si tu ajoutes un #navig ul avec un margin et/ou padding à zéro, ça ne va pas diminuer cette valeur?

Bonjour,

Ne manquerait-il pas un clear: .... dans ton code qui suit le menu, étant donné que tu as utilisé un float:left ??

Cordialement
Modifié par lddsoft (29 Mar 2011 - 18:10)

Tryan
Non, cet ajout ne change absolument rien.

Iddsoft
J'ai placé un clear: both; sur l'élément #content situé en dessous de #navig ; aucun changement.

<div id="page">
	<div id="header"><h1>Titre</h1></div>
		<ul id="navig"> 
			<li><a href="page1.html">Menu 1</a></li>
			<li><a href="page2.html">menu 2</a></li>
			<li><a href="page2.html">Menu 3</a></li>
		</ul> 
	<div id="content">
		<p>Bla bla...</p>
	</div>
	<div id="footer">
		<p>Bas de page</p>
	</div>
</div>