Imbrication de divs et padding [Résolu]

renaud26 · 28/11/2011, 11h18

Bonjour à tous,

Par exemple cette configuration de div's en position relative :

Code :

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

1
2
3
4
5
6
 
<div id = "conteneur" style="width:250px;height:250px;padding:5px">
      <div id="header"></div>
      <div id="corps"></div>
      <div id="footer" style="height:20px;width:100%"></div>
</div>

Je voudrais que le le div "footer" soit systématiquement "plaqué" en bas du div "conteneur" quels que soient les contenus des div's "header" et "corps". Quand je dis "plaqué", j'entends à 5px du bas puisque j'ai donné 5 de padding au "conteneur".
Évidemment, là, si je mets un padding-top au "footer" il sera calculé à partir du "corps"...et moi je veux que ce soit calculé par rapport à "conteneur"...

Merci de vos conseils.

franck31 · 28/11/2011, 13h00

si tu fais comme cela:

Code :

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

1
2
3
4
5
6
7
8
 
<div id = "conteneur" style="width:250px;height:250px;padding:5px">
   <div id="page">
      <div id="header"></div>
      <div id="corps"></div>
   </div>
      <div id="footer"></div>
</div>

css

Code :

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

1
2
3
4
5
6
7
8
9
 
#footer {
	position:relative; bottom:5px;height:20px;width:100%;
	clear: both;
}
 
#page {
	height:100%;
}

ça devrait fonctionner

renaud26 · 28/11/2011, 14h11

Bonjour, merci de m'avoir répondu.
Je teste ça et je reviens.

jreaux62 · 28/11/2011, 15h37

Bonjour,

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Menu avec textes verticaux</title>
	<style type="text/css">
	#conteneur 	{ position:relative; background:grey; width:250px; height:250px; padding:5px; }
	#header 	{ position:relative; background:yellow; }
	#corps 		{ position:relative; background:green; }
	#footer 	{ position:absolute; background:red; bottom:5px; height:20px; width:250px; }
	</style>
</head>
<body>
 
<div id="conteneur">
      <div id="header">...header...</div>
      <div id="corps">...corps...</div>
      <div id="footer">...footer...</div>
</div>
 
</body>
</html>

renaud26 · 28/11/2011, 15h43

Bonjour,

Ca fonctionne impec, je vous remercie beaucoup.
Bonne soirée.

28/11/2011, 14h11	#3
renaud26 Membre confirmé Inscription : mars 2003 Messages : 1 043 Détails du profil Informations personnelles : Âge : 48 Localisation : France, Puy de Dôme (Auvergne) Informations forums : Inscription : mars 2003 Messages : 1 043 Points : 285 Points : 285	Bonjour, merci de m'avoir répondu. Je teste ça et je reviens.
	00

28/11/2011, 15h43	#5
renaud26 Membre confirmé Inscription : mars 2003 Messages : 1 043 Détails du profil Informations personnelles : Âge : 48 Localisation : France, Puy de Dôme (Auvergne) Informations forums : Inscription : mars 2003 Messages : 1 043 Points : 285 Points : 285	Bonjour, Ca fonctionne impec, je vous remercie beaucoup. Bonne soirée.
	00

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