18081 sujets

Questions générales et questions de débutants

Menu 100% de hauteur

Bonjour,

Je réitère ma question à propos d'un menu sur toute la hauteur...

Voici mon code (plus bas), dans lequel j'affiche un header de width=100%, puis en dessous j'affiche un menu sur la gauche auquel j'aimerais donner une height 100%...
Le problème est que le menu dépasse en bas du navigateur de la hauteur du header.

Je suis sûr que d'autres ont déjà réussi à résoudre ce problème mais malgré les tutoriaux, je ne trouve rien de concluant.
Alors, please, si quelqu'un a une vraie idée ou solution !

<html>

<head>
	<style>
		html, body {
			font-family: arial;
			margin: 0;
			padding: 0;
			height: 100%;
			width: 100%;
		}

		#header {
			background-color: #FF8000;
			height: 40px;
			line-height: 40px;
			color: #FF0000;
			font-weight: bold;
			text-indent: 210px;
		}

		#menu {
			width: 200px;
			height: 100%;
			background-color:#FFFF00;
			text-indent: 10px;
		}
	</style>
</head>

<body>

<div id="header">
	Bienvenue sur mon site !
</div>

<div id="menu">
	<div>Accueil</div>
	<div>Administration</div>
	<div>Contact</div>
	<div>&copy; Copyright</div>
</div>

</body>
</html>


Merci encore d'avance Smiley biggrin
Bonjour,

Si je comprends bien ton menu ne doit pas faire 100% mais 100% - 40px, ce qui n'est pas faisable directement (à ma connaissance). Une petite capture d'écran ou (mieux) un lien permettrait de mieux t'aider.

Voici quelques pistes cependant :
- un lien vers la faq qui t'indique comment faire des hauteurs 100%.
- un tuto pour faire une mise en page par colonnes
Modifié par Jihel (03 Jan 2006 - 10:16)
Bon, plus sérieusement que le lien précédent : http://forum.alsacreations.com/topic.php?fid=14&tid=7267&s=fig%E9 (particulièrement l'intervention de jcm, qui contient cet excellente et redoutable remarque :

jpv a écrit :
L'inventaire de Laurent Denis ne mentionne pas certaines autres éventualités, notamment celle de vouloir enfermer le contenu dans un cadre strict et bien maîtrisé afin de montrer implicitement à l'internaute / client que l'on est clean et "propre sur soi" (aspect strict) et que l'on maîtrise....


Ainsi que celle de l'ami jpv, non moins redoutable :

a écrit :
Historiquement on subis encore la dictature du design plaquette héritée des années 2000 où le propos d'un site n'était que de mettre en ligne la plaquette de l'entreprise.
C'était l'époque des sites centrés en 760x450, facile à réaliser, facile à vendre, facile à comprendre et sur lequel on greffait les animations flash en splash screen comme "plus produit".


heigth:100% est une merveilleuse démonstration d'incompréhension de ce qu'est le couple HTML CSS.
Modifié par Laurent Denis (03 Jan 2006 - 10:39)
Salut, concernant ton exemple, je mettrais le "header" en position:absolute avec une largeur de 100%, et pour que ton menu vienne à la bonne hauteur un padding-top sur "Accueil".
C'est à dire : 
<html>
<head>
<style>
html, body {
	font-family: arial;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;

}
#header {
	background-color: #FF8000;
	height: 40px;
	color: #FF0000;
	font-weight: bold;
	text-indent: 210px;
	position: absolute;
	width: 100%;
	line-height: 40px;
}
#menu {
	width: 200px;
	height: 100%;
	background-color:#FFFF00;
	text-indent: 10px;
}
#accueil {
	padding-top :45px;
}
	</style>
</head>
<body>
<div id="header">
	Bienvenue sur mon site !</div>
<div id="menu">
	<div id="accueil">Accueil</div>
	<div>Administration</div>
	<div>Contact</div>
	<div>&copy; Copyright</div>
</div>
</body>
</html>

Ce qui donne CECI
Alain
J'ajouterai juste qu'il vaut mieux éviter les successions de div inutiles. Dans le cas d'un menu, on peut (il faut ?) utiliser des listes pour respecter le sens des balises Smiley cligne
Sujet clos
Aller à