Positionnement footer [CSS]

kikou732 · 20/01/2012, 19h47

Bonsoir j'ai un petit problème .

Dans mon design , je veux rajouter un footer (pied de page ).
Or je n'y arrive pas , ou tout du moins ça apparait ou il ne faut pas.

Mon 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Devenez célèbre</title>
    </head>
 
		<body>
<div id="conteneur">
 
<header id="banniere">
<div id="banniere1">
<div id="total">
<div id="selec1">
<img src="1.png" />
</div>
<div id="selec2">
<img src="2.png" />
</div>
<div id="selec3">
<img src="3.png" />
</div>
<div id="selec4">
<img src="4.png" />
</div>
</div>
<img src="membres/poliboolold.jpg" alt="Banniere" id="go" />
</div>
 
 
<div id="fixe">
<ul id="menu">
<li>
			<a href="www.google.fr">Accueil</a>
</li>
<li>
                        <a href="#">Espace Connexion</a>
</li>
<li>
                        <a href="membres/membres_inscription.php">Inscription</a>
</li>
<li>
                        <a href="#">Forum</a>
</li>
<li>
                        <a href="#">Aide</a>
</li>
<li>
                        <a href="#">+</a>
</li>
 
</ul>
 
</div>
</header>
 
 
<div class="contenu">
<div class="floatContenu">
<div class="corps">
<p>Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam, eius uxorem, Constantius ad se tandem desideratam venire multis fictisque blanditiis hortabatur. quae licet ambigeret metuens saepe cruentum, spe tamen quod eum lenire poterit ut germanum profecta, cum Bithyniam introisset, in statione quae Caenos Gallicanos appellatur, absumpta est vi febrium repentina. cuius post obitum maritus contemplans cecidisse fiduciam qua se fultum existimabat, anxia cogitatione, quid moliretur haerebat.
 
Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.
</p>
</div>
 
<div class="photo">
<p>TTTTTT</p>
</div>
 
<div class="lien">
<p>Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam, eius uxorem, Constantius ad se tandem desideratam venire multis fictisque blanditiis hortabatur. quae licet ambigeret metuens saepe cruentum, spe tamen quod eum lenire poterit ut germanum profecta, cum Bithyniam introisset, in statione quae Caenos Gallicanos appellatur, absumpta est vi febrium repentina. cuius post obitum maritus contemplans cecidisse fiduciam qua se fultum existimabat, anxia cogitatione, quid moliretur haerebat.
 
Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae</p>
</div>
 
<div class="pub">e vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</p>
</div>
 
<div class="footer">
<p> HHHH </p>
</div>
 
 
 
 
</div>
 
 
</body>
</html>

Vous voyez le footer contient le petit texte "HHHH" .

Regardez sur mon site et vous verrez ou est le footer.

Maintenant le code 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
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
@font-face {
    font-family: 'FontleroyBrownRegular';
    src: url('FontleroyBrown-webfont.eot');
    src: url('FontleroyBrown-webfont.eot?#iefix') format('embedded-opentype'),
         url('FontleroyBrown-webfont.woff') format('woff'),
         url('FontleroyBrown-webfont.ttf') format('truetype'),
         url('FontleroyBrown-webfont.svg#FontleroyBrownRegular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
 
 
body
{
background: url("tissu013.jpg ");
 
}
 
#go{ padding-left: 50px; }
#conteneur{
	display:block;
	position:relative;
	width: 1200px;
	min-height: 700px;
	margin:auto;
}
 
 
 
#banniere
{
display: block;
position: relative;
background: url("84wRWO.png");
border: 2px blue inset;
opacity: 0.8;
width: 1000px;
margin: 20px auto;
height: 160px;
border-radius: 6px;
}
#banniere1
{
display: block;
}
 
#total
{
display: block;
position: relative;
padding : -100 px ;
 
}
 
#selec1
{
position: absolute;
top: 0px;
}
#selec2
{
position: absolute;
top: 40px;
}
#selec3
{
position: absolute;
top: 80px;
}
#selec4
{
position: absolute;
top: 120px;
}
#fixe
{
display: block;
 
 
}
 
.contenu
{
display: block;
position: relative;
width: 1000px;
min-height: 400px;
owerflow: hidden;
clear: both;
margin: 20px auto;
}
 
.floatContenu
{
position: relative;
width: 100%:
/*float: left;*/
}
 
.corps
{
	display: block;
	position: relative;
	border: 1px solid black;
	float: left;
	margin-right: 20px;
	background: url("lady_gaga.jpeg");
	margin: 20px auto;
        width: 750px;
	padding: 5px;
	/*min-height: 400px;*/
        font-size: 1.4em;
        font-family: 'FontleroyBrownRegular', Arial, serif;
        border-radius: 6px;
 
 
 
 
 
}
 
.photo
{
	display: block;
	position: relative;
	width: 210px;
	border: 1px solid black;
	overflow: auto;
	/*min-height: 400px;*/
	background: url("lady_gaga.jpeg");
	min-width: 160px;
	margin-right: 10px;
        margin-top: 20px;
	float: right;
           font-size: 1.4em;
        font-family: 'FontleroyBrownRegular', Arial, serif;
        border-radius: 6px;
 
}
 
.lien
{
	display: block;
	position: relative;
	border: 1px solid black;
	float: left;
	margin-right: 20px;
	background: url("katty.jpeg");
	margin: 20px auto;
        width: 750px;
	padding: 5px;
	/*min-height: 400px;*/
           font-size: 1.4em;
        font-family: 'FontleroyBrownRegular', Arial, serif;
        border-radius: 6px;
 
 
 
}
 
.pub
{
	display: block;
	position: relative;
	width: 210px;
	border: 1px solid black;
	overflow: auto;
	/*min-height: 400px;*/
	background: url("katty.jpeg");
	min-width: 160px;
	margin-right: 10px;
        margin-top: 20px;
	float: right;
           font-size: 1.4em;
        font-family: 'FontleroyBrownRegular', Arial, serif;
        border-radius: 6px;
 
}
 
#menu, #menu ul /* Liste */     
{
 
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#menu /* Ensemble du menu */
{
	background-attachment: scroll;
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
        z-index: 9999;
}
 
 
 
: #fff; /* ... et au contraire, le fond en blanc */
}
 
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}
#partenaires
{
float:right;
height:200px;
width:200px;
border : 2px ridge blue;
margin-top: 100px;
}
 
#texte
{
width:400px;
border : 2px ridge blue;
margin: 20px auto;
}
#header
{
margin: 20px auto;
text-align: center;
}
/*
#photo
{
margin: 20px auto;
height: 300px;
width: 300px;
border: 2px ridge blue;
}*/
#menu2
{
background-attachment: fixed;
width:100%;
height:22px;
background-color: rgb(91,187,234);
}

Ma question Comment faire pour que le footer soit en bas de la page ?
Merci d'avance

vodiem · 20/01/2012, 22h57

salut kikou732,

Code CSS :

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

.footer {clear:both}

miss_socrates · 28/01/2012, 23h49

Outre la solution tout à fait judicieuse de Vodiem, deux remarques pour le site: je trouve la police fort petite et certains caratères ne s'affichent pas correctement, le site n'est pas encodé en UTF-8 ; la balise meta ne me semble pas correctement écrite.

28/01/2012, 23h49	#3
miss_socrates Membre habitué Inscription : mai 2011 Messages : 112 Détails du profil Informations personnelles : Sexe : Localisation : Belgique Informations professionnelles : Secteur : Enseignement Informations forums : Inscription : mai 2011 Messages : 112 Points : 134 Points : 134	Footer Outre la solution tout à fait judicieuse de Vodiem, deux remarques pour le site: je trouve la police fort petite et certains caratères ne s'affichent pas correctement, le site n'est pas encodé en UTF-8 ; la balise meta ne me semble pas correctement écrite.
	00

20/01/2012, 22h57	#2
vodiem Expert Confirmé Diem VO Vivre Inscription : avril 2006 Messages : 2 644 Détails du profil Informations personnelles : Nom : Diem VO Âge : 40 Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Vivre Secteur : Conseil Informations forums : Inscription : avril 2006 Messages : 2 644 Points : 3 895 Points : 3 895	salut kikou732, Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part .footer {clear:both}
	00

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