Div en pied de page

**kaygee** · 25/01/2007, 18h26

Salut, j'ai un ptit souci, je n'arrive pas obligé mon div a prendre la totalité de ma page, et obligé un div a rester en pied de page.

Pourriez-vous m'aider?

voici mon css et mon fichier htm

en gros, je souhaiterai que le div pied de page, reste toujours dans le fond de ma page, et que le div contenu soit de taille variable, mais restant tjr accolé au pied de page afin d'éviter un vide en bas de page lorsque je n'ai pas beaucoup de contenu.

Merci

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<body>
<div id="global">
<div id="entete"></div>
<div id="menu">
	<div id="menuhaut"></div>
	<div id="menubas"></div>
</div>
<div id="contenu">test</div>
<div id="piedpage"></div>
</div>
</body>

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
54
55
56
57
 
body {
	margin-left:0;
	margin-top:0;
}
 
div#global {
	margin-left: auto;
	margin-right: auto;
	padding-top:10px;
	padding-left:17px;
	width: 816px;
	height:800px;
	background-image:url(../img/background.jpg);
}
 
div#entete {
	width:800px;
	height:251px;
	background-image:url(../img/header.jpg)
}
 
div#piedpage {
	width:800px;
	height:50px;
	background-color:#00CC00;
	clear:both;
}
 
div#menu {
	float:left;
	width:100px;
	height:400px;
	background-color:#ffffff;
}
 
div#menuhaut {
	width:257px;
	height:20px;
	background-image:url(../img/back-menu.jpg);
	background-color:#66cc33;
}
 
div#menubas {
	width: 257px;
	height:50px;
	background-image:url(../img/back-menu_down.jpg);
	background-repeat:no-repeat;
}
 
div#contenu {
	float:left;
	margin-left:157px;
	width:543px;
	height:400px;
	background-color:#ffffff;	
}

**Mystic'Angel** · 26/01/2007, 11h50

Salut!

Je peux peut etre t'aider mais j'aimerais savoir comment sont positionnés tes div?
Car en fait, j'utilise pas les même commandes que toi dans la page CSS pour placer mes div et je ne peux en déduire leur positionnement...

**Orgied** · 26/01/2007, 12h30

heu y a un gros problème avec tes css.

ton div menu est en float left pour une largeur de 100px MAIS il contient des éléments ayant une largeur de 157px DONC ton menu fait 157px de large en fin de compte

en fait plus je lis tes css, plus je remarque que tu as fait des fautes de clalcul pour chacune des largeurs de tes zones.

**kaygee** · 27/01/2007, 19h08

Salut,

pour menu j'ai bien essayer de lui donner la taille exacte, mais alors mon div contenu se positionne sur menuhaut et menu bas.

Pour etre exact en fait, il y a le logo en tete, le menu sur la gauche, le contenu sur le reste a droite et le pied de page en dessou

merci

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<body>
<div id="global">  // Ce div permet de centrer l'ensemble sur la page
<div id="entete"></div> // Celui ci contient le logo d'entete, il est positionné tout en haut et sur toute la largeur du site
<div id="menu"> // menu se trouve sur la gauche et il contient le menu haut et le menu bas
	<div id="menuhaut"></div>
	<div id="menubas"></div>
</div>
<div id="contenu">test</div> // contenu se trouve sur la droite de menu
<div id="piedpage"></div> // pied de page se trouve évidement dans le fond de la page
</div>
</body>

**trotters213** · 29/01/2007, 16h28

c'est pas un truc dans ce style que tu cherches :

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
* {
margin:0;
padding:0;
border:1px solid #000;
}
 
div#global {
margin:0 auto;
padding:10px 0 0 17px;
width: 816px;
height:800px;
background-image:url(../img/background.jpg);
}
 
div#entete {
width:800px;
height:251px;
background-image:url(../img/header.jpg)
}
 
div#piedpage {
width:800px;
height:50px;
background-color:#0c0;
clear:both;
}
 
div#menu {
float:left;
width:257px;
height:400px;
background-color:#fff;
}
 
div#menuhaut {
height:20px;
background-image:url(../img/back-menu.jpg);
background-color:#6c3;
}
 
div#menubas {
height:50px;
background-image:url(../img/back-menu_down.jpg);
background-repeat:no-repeat;
}
 
div#contenu {
float:left;
width:541px;
height:400px;
background-color:#fff;
}

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-en">
<head>
<style type="text/css">
/*le CSS*/
</style>
</head>
<body>
<div id="global">
   <div id="entete">entete</div>
   <div id="menu">menu
      <div id="menuhaut">menuhaut</div>
      <div id="menubas">menubas</div>
   </div>
   <div id="contenu">contenu</div>
   <div id="piedpage">piedpage</div>
</div>
</body>
</html>

PS : pour supprimer les bordures, supprime border:1px solid #000; en haut du CSS.

**kaygee** · 29/01/2007, 17h13

c'est pratiquement ca, mais le pied de page, ne se trouve pas dans le fond de ma page

QUel est l'attirbut pour l'obliger a rester dans le fond de ma page???

j'ai essayer vertival-align=bottom mais rien

Div en pied de page

CSS

Vue hybride

Discussions similaires

Partager

Partager