[debutant] placer un bas de page [Fait]

**caballero** · 12/11/2008, 16h14

Bonjour,

je fais du développement Web depuis peu et j'ai quelques soucis. J'essaie de faire en sorte que ma page contiennent 3 blocs différents : entête / contenu / pied de page.

Je voudrai avoir une entête et un pied de page dont la hauteur serait fixe.

Par contre je veux bien évidemment que mon entête soit tout en haut et mon pied de page tout en bas de ma page.

J'ai fait plusieurs tentatives, voici l'une d'elle.

HTML :

Code :

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

1
2
3
4
5
6
7
8
 
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" height="100%">
  <div id="allpage">
    <div id="entete">    ZZZZZZZZ  </div>
    <div id="contenu" > YYYYYYYYY</div>
    <div id="piedpage" >xxxxxxxxxxx </div>
  </div>
</body>

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
16
17
18
19
 
div#contenu {
	width:100%;
	height:auto;
}
 
div#entete {
	width:100%;
	height:30px;
}
 
div#piedpage {
	width:100%;
	height:200px;
}
div#allpage {
	width:100%;
       min-height: 100%;
}

Qu'est-ce qu'il me manque ? Pourquoi l'information ça ne marche pas ? J'essaie vraiment essayer de trouver des solutions qui fonctionne mais pour l'instant c'est sans succès...

**devyan** · 12/11/2008, 16h42

Il manque le positionnement...

Tu verras, ils sont très bien faits...

**c_s_s** · 12/11/2008, 16h47

Bonjour,

Avec un height:auto, la hauteur de ton bloc #contenu s'adapte à ton contenu.

Pour avoir une entête toujours en haut et un pied de page toujours en bas, j'opterais pour l'utilisation de positions absolues.

Par exemple :

Code css :

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
html, body {
	margin:0;
	padding:0;
	height:100%;
}
.entete {
	background:#d7d7d7;
	position:absolute;
	top:0;
	height:100px;
	width:100%;
}
.contenu {	
	height:100%;
}
.contenu_marges {
	padding:100px 0 80px;
}
.piedpage {
	background:#f2f2f2;
	position:absolute;
	bottom:0;
	height:80px;
	width:100%;
}

Code html :

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

1
2
3
4
5
<div class="entete">entete</div>
<div class="contenu">
	<div class="contenu_marges">corps</div>
</div>
<div class="piedpage">pied</div>

**GihefBey** · 12/11/2008, 21h09

Bonjour,

Il faudrait tester la solution de c_s_s avec un contenu plus important.

Il existe des solutions un peu plus complexes.
N'ayant pas trouvé de solution dans ce site, je ne resiste pas à te donner un lien externe vers un site, qui a déjà une longue vie, d'une espèce de génie des CSS, Stuart Nicholls : CSSplay.
Dans la partie layouts tu trouveras des gabarits à usage privé qui font ça.
N'hésite pas à lire les “Back to BASICS”.

Ah oui, c'est en anglais.

-

**c_s_s** · 13/11/2008, 10h18

Envoyé par GihefBey

Il faudrait tester la solution de c_s_s avec un contenu plus important.

Très bonne remarque à laquelle je n'avais pas pensé en proposant ma solution.
Effectivement, avec un contenu plus long ça pose problème.
Et en plus ça déconne sour IE.

J'ai tout faux.

[debutant] placer un bas de page [Fait]

Positionnement en CSS

Discussions similaires

Partager

Partager