Position du footer [Résolu]

Darwick · 09/01/2007, 02h14

Bonjour à tous, je suis présentement à l'étape du codage d'un site qui offrira des services aux internautes, j'ai faite une maquette du site et je suis maintenant au footer... Mais que vois-je? À chaque essai sur chacun des tutoriaux que j'ai trouvé sur internet, mon footer ne s'affiche pas correctement, c'est à dire la largeur de mon ID global et le bas de la page (bottom: o; )....

Je suis au désespoir alors je laisse ici mes sources pour que quelqu'un m'explique comment faire et quoi corriger, ceci est très important à mes yeux parce que c'est la première fois que je code au notepad sans l'aide d'un éditeur qui détruit le W3C.

P.S. Il se peut que le code contienne des parties inutiles, mais je ne sais pas lesquelles enlever, je n'ose pas pour ne rien dérangé.

Alors allons-y:

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
 
<!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="darwik.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;
}
#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;
height: 100%;
float: left;
text-align: center;
position: absolute;
padding-bottom: 50px;
}
 
#infos {
width: 200px;
float: right;
text-align: center;
border-left: medium solid 1px dotted black;
}
 
#footer {
 
        margin:auto;
 
        text-align:center;
 
        margin-top:-50px;
	background-color:#F87A00;
        height:50px;
}
p.bienvenue {
width: 400px;
}
</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>
</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 id="footer"></div>
 
</div>
 
</body>
</html>

Merçi d'avance!

Peut-êtreUneRéponse · 09/01/2007, 10h07

Pourquoi n'utilises tu pas des layout robustes et valides aux yeux des standards que proposent certains sites web:

Je suis sûr que tu y trouvera ton bonheur et ton pb de pied de page ne sera qu'un vieux souvenir

.

Candygirl · 09/01/2007, 17h48

Il y a plusieurs chose. La première est que tu as une ouverture de div de plus que de fermeture, vraisemblablement menu1 ou menu.

Ensuite, si tu donnes un min-height de 100% au global, j'imagine que c'est pour positionner ton footer en bas? Tu dois donc lui donner un position absolute et un width de 100% si tu veux qu'il prenne la largeur. De même le margin-top de -50 ne sert à rien ?:

Code :

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

1
2
3
4
5
6
#footer {
 position:absolute; bottom:0; left:0; width:100%;
 text-align:center;
 background-color:#F87A00;
 height:50px;
}

Pourquoi mettre ton corps en absolute ? ça t'empêchera de gérer le problème du chevauchement avec le footer, donc à virer. De même le height 100% ne sert à rien puisque le #global n'a pas de height renseigné:

Code :

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

1
2
3
4
5
6
#contenu {
width: 480px;
float: left;
text-align: center;
padding-bottom: 50px;
}

ton #infos devrait aussi avoir 50px au bottom au cas où le corps est moins long afin qu'il ne rentre pas dans le footer:

Code :

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

1
2
3
4
5
6
7
#infos {
width: 200px;
float: right;
text-align: center;
border-left: medium solid 1px dotted black;
margin-bottom:50px; /* au minimum la hauteur du footer */
}

Maintenant tout le problème réside à faire descendre ton #global au bas des flottants... le overflow:hidden sur le #global serait une option simple si FF ne buguait pas sur ce coup-là

Du moins il me semble bien qu'avec l'overflow, il ne tient pas compte du min-height, ce qui ne me semble pas très logique et que opera et ie7 interprètent d'ailleurs différement. Bref, il faudrait que tu regardes un peu parmis les différente manières de créer un contexte de formatage lesquelles seraient les plus appropriées.

Autrement, une solution radicale et qui de dispense de mettre les margin de 50 au pied de tes éléments mais qui implique un ajout dans le html serait d'ajouter avant ton footer, par exemple, un hr de hauteur 50 avec un clear:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 <hr id="clearfoot" />
 
#clearfoot {
  height:50px;
  margin:0;
  clear:both;
  border:none;
  background-color:none;
  color:#FFF;
}

Darwick · 09/01/2007, 17h55

Merci beaucoup je vais essayer, je vais vous dire ensuite si cela fonctionne

Voici un screen de ce que j'optiens en faisant la modification de code...
Puis-je avoir quelques détails du comment je pourrais mettre le footer de largeur égale au header?

Je réupload le code html:

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
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
 
<!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;
}
#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;
}
#infos { 
bottom:0;
width: 200px;
float: right;
text-align: center;
border-left: medium solid 1px dotted black;
}
#clearfoot {
height: 50px;
margin: 0;
clear: both;
border: none;
background-color: none;
color: #FFF;
}
 
#footer { 
position:absolute;
bottom:0;
left:0;
width: 100%;
text-align:center;
background-color: #0289BD;
height:50px; 
}
 
p.bienvenue {
width: 400px;
}
</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>
<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>
</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"></div>
</div>
 
</body>
</html>

Merci de votre aide!

blueice · 09/01/2007, 18h50

Suffit de mettre un width 680px au lieu de 100%

Candygirl · 09/01/2007, 19h20

Si ton footer prend toute la largeur et non la taille du global c'est signe qu'il y a une erreur dans ton code; ton div global doit être fermé avant le footer, ce qui va tout faire foirer...

Par exemple ce </div> là m'a l'air mal placé:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<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"></div>
</div>

Vire-le et ça devrait aller mieux

perso je trouve plus intéressant de garder un width de 100% (quand c'est possible) plutôt que de donner une taille en pixel, ainsi, si tu décides de changer la largeur de ton global, le footer suit avec; pas besoin de changer partout.

09/01/2007, 10h07	#2
Peut-êtreUneRéponse Membre chevronné Guillaume VENTRE z/OS Technical Leader Inscription : décembre 2006 Messages : 514 Détails du profil Informations personnelles : Nom : Guillaume VENTRE Localisation : France, Paris (Île de France) Informations professionnelles : Activité : z/OS Technical Leader Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : décembre 2006 Messages : 514 Points : 617 Points : 617	Pourquoi n'utilises tu pas des layout robustes et valides aux yeux des standards que proposent certains sites web: Layout gala: 40 CSS layout CSS tinderbox Mollio CSS creator: Page layout generator Je suis sûr que tu y trouvera ton bonheur et ton pb de pied de page ne sera qu'un vieux souvenir . __________________ ★★ Documentation Mainframe par Guillaume Ventre ★★
	00

09/01/2007, 18h50	#5
blueice Modérateur Inscription : mars 2003 Messages : 3 422 Détails du profil Informations personnelles : Âge : 37 Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur) Informations forums : Inscription : mars 2003 Messages : 3 422 Points : 4 110 Points : 4 110	Suffit de mettre un width 680px au lieu de 100% __________________ -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_SIGNATURE -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- Dans la mesure du possible, essayez de montrer votre problème en situation réelle en nous donnant une url, que l'on puisse tester. Pensez également à cocher Aucun problème ne doit être résolu en MP (Message Privé) le forum est là pour ça. Dimension Internet - Carnet Web Imprimerie Nice
	00

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