Problème de mise en page

deathness · 24/11/2010, 10h54

Bonjour à tous!

Je souhaiterai avoir une page qui aurait un entete prenant toute la largeur, avec en dessous un menu a gauche et un corps a droite, et tout en bas un pied de page prenant toute la largeur.

L'entête doit avoir une hauteur de 100px, comme le pied de page.
Le menu a une largeur de 200px, et doit prendre toute la hauteur restante. Le corps doit prendre toute la largeur restante ainsi que la hauteur.

Voici une capture d'écran de ce que je veux:
http://www.hostingpics.net/viewer.php? [...] titledjpg.jpg

Malheureusement le code suivant sous firefox ne m'affiche pas la bonne hauteur pour mon corps et le menu, ceux-ci sont tout raplapla...

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
18
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body style="height: 100%; ">
 
	<div id="entete" style="height: 100px; background-color: gray;">...</div>
 
	<div id="centre" style="width: 100%;  height:70%;">
		<div id="navigation" style="background: aqua; width: 200px;	float: left; height: 100%">...</div>
		<div id="contenu" style="background: yellow; margin-left: 200px; height: 100%">...</div>
	</div>
	<div id="pied" style="height: 100px; background-color:red;" >...</div>
 
</body>
</html>

Le seul moyen pour que j'ai quelque chose c'est de mettre <body style="height: 500px; "> par exemple. Sauf que je ne connais pas la taille initiale de la page et donc c'est très réducteur pour moi de faire ainsi!
Et de toute façon je préfèrerai trouver un moyen pour que le corps et le menu prenne automatiquement toute la place (et donc me passer du 70%).

Merci d'avance a tous ceux qui viendront m'aider!

ornitho13 · 24/11/2010, 16h44

Salut,

Afin de bien mettre en place ton layout, il convient de changer un peu ta structure.

Voici un exemple (en reprenant ta base)

Code html :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
	body, html{
		height: 100%;
		margin:0;
		position:relative;
	}
	.container{
		min-height:100%;
		position:relative;
		margin-bottom:-100px;
		background: yellow;
	}
	#entete{
		height:100px; 
		background-color: gray;
	}
	#centre{
		width: 100%;
		height:100%;
		min-height:100%;
 
	}
	#navigation{
		background: aqua;
		width: 200px;
		float: left;
		margin:0;
		top:100px;
		bottom:100px;
		position:absolute;
		left:0;
 
	}
	#contenu{
		background: yellow;
		margin:0;
		margin-left: 200px;
	}
	#pied{
		height: 100px;
		background-color:red;
		position:absolute;
		width:100%;
	}
</style>
</head>
<body>
	<div class="container">
		<div id="entete">...</div>
 
		<div id="centre">
			<div id="navigation">...</div>
			<div id="contenu">...</div>
		</div>
	</div>
	<div id="pied">...</div>
 
</body>
</html>

J'ai testé pour FF, chrome, IE7 et 8 et cela fonctionne.

Evite également de mettre du style directement dans les balises HTML. Utilise plutôt une feuille de style ou alors place le css dans le <head> comme je l'ai fait. Tu t'y retrouveras plus facilement quand tu voudras mettre a jour tes css

++

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email