Positionnement du footer

**Darwick** · 12/01/2007, 18h34

http://darwick.hostarea.org/v1/

Voilà le codage avance rapidement, il reste seulement à fixer le footer de la page pour qu'il reste bien au pied de la page.

J'ai essayé plusieurs trucs mais en vain... Que faut-il faire? Je ne comprend pas pourquoi mon div footer ne reste pas en bas de ma page.

Merçi d'avance

**Linaa** · 12/01/2007, 21h19

As-tu essayé avec le style position : fixed ?

**Darwick** · 12/01/2007, 23h26

Aucuns changements

**Candygirl** · 13/01/2007, 11h44

tu aurais pu poursuivre sur le même topic plutôt qu'en rouvrir un:
http://www.developpez.net/forums/sho...d.php?t=260971
d'ailleur pourquoi l'avoir passé en résolu ?

Il faut que tu clarifies un point:

Lorsque tu dis que tu veux ton footer au pied de la page, tu veux dire que:

1) Le footer vient toujours se placer au bas du contenu; si le contenu est plus petit que la hauteur de la fenêtre le footer n'est donc pas au bas de la fenêtre

2) Le footer est au bas de la fenêtre même si le contenu est plus court, mais on ne le vois pas apparaître à moins de scroller lorsque le contenu est plus long que la hauteur de la fenêtre.

3) Le footer est toujours présent au bas de la fenêtre que le contenu soit plus ou moins long que la hauteur de cette dernière et reste fixé à sa position lors du scroll

Pour le permier cas, un simple clear:both sur ton footer devrait faire l'affaire. pour le deuxième, je t'ai donné des indications dans l'autre poste et pour le 3ème la proposition du positionnement fixed de Linaa devrait te convenir (tout en sachant que IE6- ne l'interprète pas).

**Darwick** · 13/01/2007, 22h57

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Darwick Network -The way you want to do business</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1"/>
 
<meta name="Author" content="gcyrillus"/>
<meta name="designer" content="gcyrillus"/>
 
<meta name="Identifier-URL" content="http://darwick.com"/>
<meta name="Publisher" content="Darwick Network"/>
<meta name="Generator" content="notepad"/>
<meta name="Abstract" content="pied de page toujours en bas"/>
<meta name="Category" content="web hosting"/>
<meta name="Robots" content="index,  follow"/>
<style type="text/css">
html {
height: 100%;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
margin: 0;
padding: 0;
height: 100%;
}
#global {
min-height: 100%;
width: 680px;
padding: 0 10px;
margin: 0 auto;
position: relative;
overflow:hidden 
}
#clearfoot {
  height:40px;
  margin:0;
  clear:both;
  border:none;
  background-color:none;
  color:#FFF;
}
#top {
height: 1.5em;
}
#apresmenu {
height: 1.5em;
}
#header {
height: 108px;
background-color: #0289BD;
background-image: url(images/logo.jpg);
background-repeat: no-repeat;
}
#menu1 {
height: 60px;
}
p.minimenu {
float: right;
}
p.gauche {
float: left;
}
#menu { 
width: 680px;
height: 60px;
background-image: url(images/menu.jpg);
 } 
#menu .leftc { width: 21px; height: 60px; float: left; } 
#menu .rightc { width: 23px; height: 60px; float: left; } 
#menu .center { width: 636px; float: left; padding-top: 22px; font-family: Verdana, Tahoma, Sans-Serif; font-size: 11px; } 
#menu .center a:active, #menu .center a:link, #menu .center a:visited { color: #FFFFFF; text-decoration: none; } 
#menu .center a:hover { color: #FFFFFF; text-decoration: underline; } #menu .center span { margin-right: 17px; } 
 
#contenu {
width: 480px;
float: left;
text-align: center;
padding-bottom: 40px;
}
 
#infos {
width: 200px;
float: right;
text-align: center;
border-left: medium solid 1px dotted black;
margin-bottom:50px; /* au minimum la hauteur du footer */
position: absolute;
}
 
#footer {
 position:absolute; bottom:0; left:0; width:100%;
 text-align:center;
 background-color:#0289BD;
 height:40px;
}
p.bienvenue {
width: 400px;
text-align: left;
}
</style>
</head>
<body>
<div id="global">
<div id="top">
<p class="minimenu">
Accueil H&eacute;bergement  Serveurs d&eacute;di&eacute;s VPS Support Contact
</p>
</div>
<div id="header"></div>
<div id="menu1">
<div id="menu">
<div class="leftc"></div>
<div class="center"><span><a href="#">Accueil</a></span><span><a href="#">H&eacute;bergement</a></span>
<span><a href="#">Serveurs d&eacute;di&eacute;s</a></span><span><a href="#">VPS</a></span>
<span><a href="#">Web Design</a></span><span><a href="#">Gestion de sites</a></span><span><a href="#">Support</a></span>
<span><a href="#">Contact</a></span>
</div>
<div class="rightc"></div>
</div>
<div id="apresmenu"></div>
<div id="contenu">
<p class="bienvenue">Bienvenue sur Darwick Network, votre site de référence pour tout vos services web!
Vous pouvez compter sur une équipe dynamique qui saura comment mener à terme vos projets en un moin de temps.</p>
<p class="bienvenue">Bienvenue sur Darwick Network, votre site de référence pour tout vos services web!
Vous pouvez compter sur une équipe dynamique qui saura comment mener à terme vos projets en un moin de temps.</p>
<p class="bienvenue">Bienvenue sur Darwick Network, votre site de référence pour tout vos services web!
Vous pouvez compter sur une équipe dynamique qui saura comment mener à terme vos projets en un moin de temps.</p>
<p class="bienvenue">Bienvenue sur Darwick Network, votre site de référence pour tout vos services web!
Vous pouvez compter sur une équipe dynamique qui saura comment mener à terme vos projets en un moin de temps.</p>
<p class="bienvenue">Bienvenue sur Darwick Network, votre site de référence pour tout vos services web!
Vous pouvez compter sur une équipe dynamique qui saura comment mener à terme vos projets en un moin de temps.</p>
<p class="bienvenue">Bienvenue sur Darwick Network, votre site de référence pour tout vos services web!
Vous pouvez compter sur une équipe dynamique qui saura comment mener à terme vos projets en un moin de temps.</p>
<p class="bienvenue">Bienvenue sur Darwick Network, votre site de référence pour tout vos services web!
Vous pouvez compter sur une équipe dynamique qui saura comment mener à terme vos projets en un moin de temps.</p>
<p class="bienvenue">Bienvenue sur Darwick Network, votre site de référence pour tout vos services web!
Vous pouvez compter sur une équipe dynamique qui saura comment mener à terme vos projets en un moin de temps.</p>
 
 
 
</div>
<div id="infos">
<h5>Support</h5>
<p>Test support</p>
<h5>Uptime / Stats</h5>
<p>Test Uptime</p>
<h5>Testimonial</h5>
<p>Testimonial</p>
 
 
</div>
 
 
</div>
<hr id="clearfoot" />
<div id="footer">dddddd</div>
 
</div>
 
</body>
</html>

Positionnement du footer

Positionnement en CSS

Discussions similaires

Partager

Partager