[CSS 2.1] Placer un div en bas de page ou de fenêtre

jd_HotK · 14/11/2011, 00h08

Bonjour,

j'ai commencé à réaliser un joli petit site Web, presque prêt à être mis en ligne. Une chose mineure que j'aimerais ajouter, c'est une signature en bas de page. Rien de plus facile, il suffit de mettre ladite signature juste avant </body>. Sauf que mes pages sont formées de div placées avec le style "position : fixed", si bien que ce que j'ajoute ensuite se retrouve en haut de la page.

Qu'à cela ne tienne, j'ai mis ma signature dans un <div> que je vais aussi placer à coups de style. J'ai donc ma page qui a cette tête :

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
 
<!DOCTYPE html>
<body>
	<div id="divMenu">
		<div class="menu_horizontal">
			<!-- contenu du menu -->
		</div>
	</div>
	<div id="divInformations">
		<div class="informations_horizontal">
			<!-- contenu du menu -->
			<div class="signature">
				<!-- signature -->
			</div>
		</div>
	</div>
</body>

et mon fichier style.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
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
 
.menu_horizontal, .menu_vertical {
	position : fixed;
	top : 0px;
	left : 0px;
	display : block;
	text-align : center;
	font-size : 160%;
	vertical-align : middle;
	background-repeat : no-repeat;
	background-attachment : fixed;
}
 
.informations_horizontal, .informations_vertical {
	padding-left : 0.5em;
	padding-right : 0.5em;
	right : 0px;
	position : fixed;
	bottom : 0px;
	height : auto;
	display : block;
	overflow : auto;
	background-image : url("images/fond_samourai.jpg");
	background-repeat : no-repeat;
	background-attachment : scroll;
}
 
.menu_horizontal {
	background-image : url("images/kanji_horizontal_large_h_128_fond.jpg");
	background-position : center top;
}
 
.menu_horizontal, .tab_menu_horizontal {
	width : 100%;
}
 
.informations_horizontal {
	top : 128px;
	left : 0px;
	background-position : center top;
}
 
.signature {
	position : relative;
	right : 0px;
	bottom : 0px;
	font-family : Times serif;
	font-style : italic;
	font-size : 70%;
	text-align : right;
	padding-right : 0.4em;
	padding-bottom : 0.4em;
}

Avec "position : relative" dans la classe "signature", j'ai bien ma signature en bas de page sur une page dont la hauteur est supérieure à celle de la fenêtre.

Là où le bât blesse, c'est que je voudrais afficher la signature en bas de la fenêtre sur les pages dont la hauteur est inférieure à celle de la fenêtre. "position : static" donne le même résultat que "position : relative", ce qui me paraît normal.

"position : fixed" place bien la signature en bas de la fenêtre, mais si le contenu dépasse le bas de la fenêtre, la signature est superposée. Et "position : absolute" a le même comportement, sauf que la signature est décalée un peu vers la gauche quand la page contient un ascenseur, pour ne pas se superposer avec. Or, le W3C affirme, dans sa sagesse, que "position : absolute" place un élément par rapport à son "containing block". Il me semble que dans ce cas, le "containing block" devrait être ce fichu div dont la classe est "informations_horizontal".

(Et j'ai vérifié à l'aide de "background-color" que même sur une page dont le contenu n'est pas plus haut que la fenêtre, le div de classe "informations_horizontal" descend jusqu'en bas de la fenêtre.)

Ai-je mal compris la notion de "containing block" ? Serait-ce un bug Firefox, ce dont je doute parce que Safari a le même comportement ? En huit mots, pouvez-vous m'aider, s'il vous plaît ?

Emyleen · 14/11/2011, 17h16

Le bloc conteneur d'un bloc en position absolu doit être en position relative. Essaye de mettre position:relative; dans ton .informations_horizontal.
Personnellement je n'utilise pas les position:fixed; je vais aller me renseigner.

jd_HotK · 14/11/2011, 22h03

Merci pour la réponse ! Malheureusement, je viens d'essayer et ce n'est pas ce que je souhaite faire.

En ayant remplacé "position : fixed" par "position : relative" dans le style de ".informations_horizontal, .informations_vertical", j'ai toujours la signature juste après le texte dans les pages dont la hauteur n'excède pas celle de la fenêtre. Quant aux pages plus hautes que la fenêtre, la zone information recouvre le menu quand je descends l'ascenseur vertical.

14/11/2011, 17h16	#2
Emyleen Membre actif Emeline Dabée Webmaster Inscription : mars 2010 Messages : 136 Détails du profil Informations personnelles : Nom : Emeline Dabée Âge : 26 Localisation : France, Aveyron (Midi Pyrénées) Informations professionnelles : Activité : Webmaster Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mars 2010 Messages : 136 Points : 171 Points : 171	Le bloc conteneur d'un bloc en position absolu doit être en position relative. Essaye de mettre position:relative; dans ton .informations_horizontal. Personnellement je n'utilise pas les position:fixed; je vais aller me renseigner.
	00

14/11/2011, 22h03	#3
jd_HotK Invité de passage Jean-David Lanz Développeur informatique Inscription : novembre 2011 Messages : 5 Détails du profil Informations personnelles : Nom : Jean-David Lanz Localisation : France, Haute Savoie (Rhône Alpes) Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : novembre 2011 Messages : 5 Points : 1 Points : 1	Merci pour la réponse ! Malheureusement, je viens d'essayer et ce n'est pas ce que je souhaite faire. En ayant remplacé "position : fixed" par "position : relative" dans le style de ".informations_horizontal, .informations_vertical", j'ai toujours la signature juste après le texte dans les pages dont la hauteur n'excède pas celle de la fenêtre. Quant aux pages plus hautes que la fenêtre, la zone information recouvre le menu quand je descends l'ascenseur vertical.
	00

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