28173 sujets

CSS et mise en forme, CSS3

[résolu] Espacement horizontal des li sur menu étirable

Bonjour Bonjour Smiley cligne ,

Sur une page fluide (largeur comprise entre 700px mini et 1000px maxi) j'ai un menu horizontal à base de ul / li en float left.

J'ai cherché une solution à base de % pour espacer au mieux ces li en cas de redimensionnement de la fenêtre (qu'ils prennent le maximum de place s'il y'en a de disponible et qu'ils tiennent dans la plus petite taille...) et je n'arrive pas à faire mieux que cela :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test ul étirable</title>
<style type="text/css">
/* Général */
html {
	font-size: 100%;
}
body {
	font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	font-size: 0.9em;
	margin: 20px 5%;
}
div#conteneur {
	width: 80%;
	max-width: 1000px;
	min-width: 700px;
	margin: auto;
}

/* Menu haut */
div#menu_haut {
	height: 50px;
	background-color: orange;
}

ul#menu {
	margin: 0 auto;
	list-style-type: none;
	width: 700px;
}

ul#menu li {
	float: left;
	text-align: center;
	padding: 2% 0;
}

ul#menu li a {
	width: 130px;
	line-height: 25px;
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: 1.8px;
	color: #fff;
	display: block;
	text-decoration: none;
}

ul#menu li a:hover {
	color: #330000;
}

</style>

<!--[if lt IE 7]>
<style type="text/css">

/* Corection des min-width et max-width */
div#conteneur {
	width:expression(document.body.clientWidth <= 702? "700px" : document.body.clientWidth >= 1002? "1000px" : "auto");
}

</style>
<![endif]-->
</head>
<body>
<div id="conteneur">
	<div id="menu_haut">
		<ul id="menu">
			<li><a href="">Accueil</a></li>
			<li><a href="">Tutos</a></li>
			<li><a href="">Liens</a></li>
			<li><a href="">Forum</a></li>
			<li><a href="">Contact</a></li>
		</ul>
	</div>
</div>
</body>
</html>


Page en ligne à cette adresse.

Si quelqu'un avait une idée à me proposer ça serait cool Smiley langue

Merci et A+
Modifié par Heyoan (04 Jul 2007 - 14:33)
Si tu es sûr d'avoir 5 items dans le menu :
- les quatre premiers li en float:left; width: 20%; ;
- le cinquième li en float: none; width: auto; margin-left: 80%;.
(Théoriquement, on pourrait mettre les cinq en float, mais c'est casse gueule avec IE, qui peut avoir des problèmes pour les arrondis des largeurs en pourcentages).

Bien sûr, mieux vaut mettre à zéro les marges et padding de ul (ou du moins préciser ceux que l'on souhaite avoir, sans oublier d'indiquer à la fois le padding-left et le margin-left). Et surtout, les li ne devront pas avoir de marges, padding, ou border latéraux.

Si le nombre d'éléments est inconnu, un tableau de mise en page en width: 100% fera très bien l'affaire. Smiley cligne
Super Florent ! Ça marche impec ! Smiley biggrin
Et je voulais justement éviter de retomber dans ma vieille addiction aux tableaux de mises en forme Smiley alcoolique

Encore merci Smiley cligne
Sujet clos
Aller à