Discussion :

[jbidou88]

Bonjour,

Je n'arrive pas à placer mon footer en bas de page.Il se place en bas de la fenêtre mais pas de la page. Merci d'avance pour votre aide

CODE HTML :

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
<div id="container">
 
	<div id="header">Header</div>
 
	<div id="content_left">
 
<?php
 
// on se connecte à MySQL
$db = mysql_connect('localhost', 'root', 'root');
 
// on sélectionne la base
mysql_select_db('test',$db);
 
// on crée la requête SQL
$sql = 'SELECT pk_produit,description_produit,fichier_produit,ordre_produit,stocks_produit,stockm_produit,stockl_produit FROM tb_produit';
 
// on envoie la requête
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
 
// on fait une boucle qui va faire un tour pour chaque enregistrement
while($data = mysql_fetch_assoc($req))
    {
    // on affiche les informations de l'enregistrement en cours
	echo '<div id="tshirts">';
		echo '<div id="tshirts_photo">';
		//echo "<a href='#' onclick=\"javascript:ImageMax('Images/tshirts/{$data['fichier_produit']}');\"')>";
		echo '<a rel="lightbox" href="img/tshirts/'.$data['fichier_produit'].'">';
        echo '<img height="260" width="210" src="img/tshirts/'.$data['fichier_produit'].'" />';
		echo '</a>';
		echo '</div>';
	echo '</div>';
    }
 
// on ferme la connexion à mysql
mysql_close();
?> 
 
	</div>
 
	<div id="content_right">
 
		<p></p><h1>Titre 1</h1></p>
 
		<p>Une nouvelle série de t-shirt est en préparation. Reest Company prévoit de sortir sa nouvelle collection pour la nouvelle année 2011. Il reste encore quelques modèles, dépêchez-vous de commander le votre avant la rupture de stock.</p>
 
	</div>
 
</div>
 
<div id="footer">
 
	<div id="f_content">
 
		<div id="f_reest">
 
			<p><h1>Footer</h1></p>
 
			<p>Créée par une bande d’amis d’horizons différents, la marque Reest Company est simplement une vitrine des goûts de chacun de ses membres, nous offrant la possibilité de porter ce qui nous plaît et de la partager avec d’autres jeunes de notre région.</p>
 
		</div>
 
		<div id="f_follow">
 
			<p><h1>Follow us :</h1></p>
 
			<p><img src="img/facebook_logo.png" /> Facebook</p>
			<p><img src="img/youtube_logo.png" /> Facebook</p>
 
		</div>
 
	</div>
 
</div>

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
@charset "utf-8";
/* CSS Document */
 
html, body {
	background-color: #cccc99;
	font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
	font-size:12px;
	color: #ccc;
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
}
 
#container {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width:1000px;
 
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
 
	min-height:100%; /* real browsers */
}
 
#header {
	background-color: navy;
	height: 100px;
}
 
#content_left {
	position: relative;
	background-color: #ff0080;
	float: left;
	width: 774px;
	padding: 3px 3px 3px 3px;
}
 
#content_right {
	position: relative;
	background-color: #804000;
	float: left;
	width: 194px;
	left: 20px;
	padding: 3px 3px 3px 3px;
 
}
 
#footer {
	position: absolute;
	height: 150px;
	width: 100%;
	bottom: 0px; /* stick to bottom */
	background-image: url(../img/footer.png);
}
 
#f_content {
	background-color: #ccff66;
	position:absolute;
	height: 150px;
	width:900px;
	margin: auto;
}
 
#f_reest {
	background-color: #cc66ff;
	position:relative;
	float: left;
	height: 150px;
	width:400px;
}
 
#f_follow {
	background-color: #ffcc66;
	position:relative;
	float: left;
	height: 150px;
	width:400px;
}
 
#tshirts {
	position: relative;
	float: left;
	border: solid 4px #ccc;
	margin: 20px 20px 20px 20px;
}
 
h1 {
	color: #333;
	font-size: 22px;
}
 
a:link, a:visited {
	text-decoration: none;
	color: #ccc;
}
 
a:hover {
	color:#f00088;
}

Merci beaucoup

[goomazio]

Bonjour,

Positionner un calque en "absolute" le positionne par rapport à son premier parent positionné en "relative", si je ne dis pas de bêtise. Dans le code montré, je ne vois pas de parent de "footer" donc j'imagine que footer n'a pas de parent en relative et qu'il se positionne par rapport à l'écran.

Je me demande s'il ne suffirait pas de mettre le footer dans container, pour que footer soit à 0px du bas de container.