forcer le footer en bas de l'écran

ml1234 · 05/03/2011, 18h53

Bonjour,
lorsque le body contient un header de 70px, un container variable et un footer de 30px, comment peut-on forcer le footer de 30px à se caler en bas de l'écran quelle que soit la résolution (1680x1050 ou sur mon eeepc 1024x600) ?

le but est d'occuper le container avec un contenu flash de type "fluid" come simpleviewer ou slideshowpro version 1.9.8.7 qui fera l'objet d'une autre discussion

merci
marc

Alex-L · 06/03/2011, 10h13

Si t'as structure est celle là:

Code :

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

1
2
3
4
 
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

La footer sera forcement toujours en bas.

ml1234 · 06/03/2011, 11h40

j'ai simplifié mon code (pas de logo ni menu dans header et image à la place du flash) et mis des couleurs pour identifier les blocs.

Le but serait de caler le footer tout en bas d'un écran quelconque et de centrer l'image de 550px sur l'espace restant entre le header de 70px et le footer de 50px.

merci
marc

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
 
<!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">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Essai</title>
 
<style type="text/css">
<!--
 
 
* {padding:0; margin:0}
 
body  {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #FFFFFF;
	background-color: #0F0;
}
 
 
#header {
	color: #FF3;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	padding: 0.00;
	text-align: center;
	border-top-width: 0px;
	border-right-width: 0px;
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-left-width: 0px;	/*height: 100px;*/
	height: 70px;
	background-color: #CCC;
}
 
 
#header_content {
	width: 98%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 10px;
}
 
 
#gallery {
	text-align: center !important;
	padding: 0.00 !important;
	width: 100% !important;
	background-color: #1D1D1D;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
 
 
 
#flashcontent {
	/*background-color: #d5d3c3;*/
	border: 0px solid #68675f;
	padding: 0;
	width: 550px;
	/*color: inherit;*/
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
 
 
#footer {
	clear:both;
	margin-top:0px;
	font-size:12px;
	color: #000;
	/*text-transform:uppercase;
	letter-spacing:1px;*/
	width: 100%;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	background-color: #0FF;
	height: 50px;
}
 
#footer a {
	text-decoration:none;
	color:#989898;
}
#footer a:hover {
	text-decoration:underline;
	color:#cccccc;
}
 
#footer_content {
	width: 98%;
	text-transform: none;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 10px;
}
 
 
-->
</style>
 
 
</head>
 
<body>
 
<div id="header">
	<div id="header_content">
    	<p>Hallo World</p>
    </div> <!-- header_content -->   
	<div style=" clear:both;"></div>
</div> <!-- ends header -->
 
 
<div id="gallery">
	<div id="flashcontent">
		<img src="D30_8235_1.jpg" width="550" height="367" alt="image" />
	</div> <!-- flashcontent -->
</div> <!-- gallery -->
 
 
<div id="footer">
	<div id="footer_content">
		<p>My Footer</p>
	</div> <!-- footer content -->
</div> <!-- FOOTER -->
 
</body>
</html>

ml1234 · 06/03/2011, 11h45

sans vouloir faire double emploi avec l'autre post relatif au flash, le but ultime est de remplacer la petite image par le flash :
http://www.labrophotography.com/ssp1987/

il est en mode fluid donc remplit l'espace disponible.
c'est un export adobe lightroom avec slideshowpro et il utilise display:table...

marc

NoSmoking · 06/03/2011, 14h00

Bonjour,
une petite proposition, non malhonnête il va de soit...

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[CSS Image center]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
/* init par defaut */
html, body {
  height : 100%;
  margin : 0;
  font-family : Verdana;
  font-size : 1em;
}
#main_page {
  /* force remplissage de la page et repousse le empied*/
  min-height : 100%;
}
#entete_page{
  /* hauteur souhaitee */
  height : 70px;
  /* pour visualiser */
  background-color : #e0fee0;
}
#corps_page{
  /* question d'esthetisme */
  padding : 10px;
  /* hauteur de empied_page */
  padding-bottom : 50px;
}
#corps_page img{
  /* imperatif */
  position : absolute;
  /* centrage horizontal */
  left : 50%;
  /* largeur souhaite */
  width : 550px;
  /* moitie de la largeur */
  margin-left : -275px;
  /* centrage vertical */
  top : 50%;
  /* hauteur souhaitee */
  height : 367px;
  /* moitie de la hauteur moins difference hauteur entete empied */
  /* ((367/2) - (70-50)/2) */
  margin-top : -173px; 
  /* pour visualiser */
  background-color : #e0e0fe;
}
#empied_page{
  /* hauteur souhaitee */
  height : 50px;
  /* egale moins hauteur */
  margin-top : -50px;
  /* pour visualiser */
  background-color : #fee0e0;
}
</style>
</head>
<body>
<div id="main_page">
  <div id="entete_page">
    ENTETE
  </div>
  <div id="corps_page">
    <img src = "image.jpg" alt="IMAGE">
  </div>
</div>
<div id="empied_page">
  EMPIED
</div>
</body>
</html>

cela devrait répondre à ton besoin, mais sûrement à aménager.

ml1234 · 06/03/2011, 16h25

merci beaucoup pour ton aide.
j'ai presque tout compris :-)
q1. coprs page : padding:10px et padding-bottom=50px
cela se voit où vu que tout est centré ?
q2. empied : margin-top;:-50px car propulsé hors de la page et il faut le faire revenir dedans ?
q3. ton système meilleur que margin auto ?
q4. corps page, top=50%. si mon écran fait 1000px de haut, 50%=500px ou (1000-70-50)/2=440 ?

et concernant le flash fluid-liquid, s'il n'y a pas de footer, comment indiquer que la place disponible s'étend depuis le header jusqu'au bas de l'écran ?
dans l'export slideshowpro pour lightroom cela semble indiqué par le position:fixed avec top:0px (dans mon cas 70px ?) et display:table et display:table-cell.
tu peux regarder le code (afficher source) sur :
http://www.labrophotography.com/ssp1987/
je n'arrive pas à convertir ces trois lignes pour mon header

merci
marc

NoSmoking · 07/03/2011, 23h12

Citation:

Envoyé par ml1234

q1. coprs page : padding:10px et padding-bottom=50px
cela se voit où vu que tout est centré ?

- le padding est pour que l'éventuel texte ne colle pas aux bord, dans ton cas cela n'est pas nécessaire
- le padding-bottom est la pour laisser la place au footer

Citation:

q2. empied : margin-top;:-50px car propulsé hors de la page et il faut le faire revenir dedans ?

tout juste

Citation:

q3. ton système meilleur que margin auto ?

pas la même façon de voir les choses.

Citation:

q4. corps page, top=50%. si mon écran fait 1000px de haut, 50%=500px ou (1000-70-50)/2=440 ?

- on place l'élément à 50% de la hauteur de la fenêtre puis on décale vers le haut de la moitié de la hauteur de l'élément

05/03/2011, 18h53	#1
ml1234 Membre à l'essai Inscription : mai 2009 Messages : 121 Détails du profil Informations forums : Inscription : mai 2009 Messages : 121 Points : 24 Points : 24	forcer le footer en bas de l'écran Bonjour, lorsque le body contient un header de 70px, un container variable et un footer de 30px, comment peut-on forcer le footer de 30px à se caler en bas de l'écran quelle que soit la résolution (1680x1050 ou sur mon eeepc 1024x600) ? le but est d'occuper le container avec un contenu flash de type "fluid" come simpleviewer ou slideshowpro version 1.9.8.7 qui fera l'objet d'une autre discussion merci marc
	00

06/03/2011, 11h45	#4
ml1234 Membre à l'essai Inscription : mai 2009 Messages : 121 Détails du profil Informations forums : Inscription : mai 2009 Messages : 121 Points : 24 Points : 24	sans vouloir faire double emploi avec l'autre post relatif au flash, le but ultime est de remplacer la petite image par le flash : http://www.labrophotography.com/ssp1987/ il est en mode fluid donc remplit l'espace disponible. c'est un export adobe lightroom avec slideshowpro et il utilise display:table... marc
	00

06/03/2011, 16h25	#6
ml1234 Membre à l'essai Inscription : mai 2009 Messages : 121 Détails du profil Informations forums : Inscription : mai 2009 Messages : 121 Points : 24 Points : 24	merci beaucoup pour ton aide. j'ai presque tout compris :-) q1. coprs page : padding:10px et padding-bottom=50px cela se voit où vu que tout est centré ? q2. empied : margin-top;:-50px car propulsé hors de la page et il faut le faire revenir dedans ? q3. ton système meilleur que margin auto ? q4. corps page, top=50%. si mon écran fait 1000px de haut, 50%=500px ou (1000-70-50)/2=440 ? et concernant le flash fluid-liquid, s'il n'y a pas de footer, comment indiquer que la place disponible s'étend depuis le header jusqu'au bas de l'écran ? dans l'export slideshowpro pour lightroom cela semble indiqué par le position:fixed avec top:0px (dans mon cas 70px ?) et display:table et display:table-cell. tu peux regarder le code (afficher source) sur : http://www.labrophotography.com/ssp1987/ je n'arrive pas à convertir ces trois lignes pour mon header merci marc
	00

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