position de footer en bas !

**temperature** · 16/04/2008, 09h22

Bonjour, j'ai mon site de la manière suivante :

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
<div id="bloc">
       <div id="bandeau"></div>
       <div id="menu"></div>
       <div id="contenu"></div>
       <div id="footer"></div>
</div>
 
#bloc {
	position:absolute;
    left:50%; 
	margin-left:-392px;
	width:784px; }
 
#session {
	text-align:center;
	height:70px;
	width:50%;
	float:right; }
 
#contenu {
	clear:both;
	background-color:white; 
	width:784px;}
 
#menu {
	float:left;
	width:40%;
	height:70px;}
 
#footer { 
	width:784px;
	height:5em;}

Mais pour le moment mon pied de page reste desuite apres ma partie contenu donc si celle ci contient peu de données, mon footer se retrouve en plein milieu

.
Comment faire svp, merci d'avance.

**SpaceFrog** · 16/04/2008, 09h23

avec un position : absolute et bottom:0 ?

**temperature** · 16/04/2008, 09h38

toujours pas il reste en bas vers environ 600 px !

**SpaceFrog** · 16/04/2008, 10h00

heu avec :

Code :

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

1
2
3
4
5
6
 
#footer { 
	width:784px;
	height:5em;
        position:absolute;
        bottom:0;}

ton footer reste au milieu de l'écran ???

**temperature** · 16/04/2008, 10h01

oui je te dis vers environ 600px ...

**SpaceFrog** · 16/04/2008, 10h11

Code :

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

1
2
3
4
5
6
#footer { 
	width:784px;
	height:5em;
        position:absolute;
        bottom:0;
        border:solid 2px red;}

et là il est toujours pas en bas ???

A mon avis il l'est mais c'est la hauteur de 5em qui te le masquait ...

**temperature** · 16/04/2008, 10h20

çà ne me le masque pas je le vois toujours le pied de page mais il se positionne toujours directement à la suite de mon div contenu !

**SpaceFrog** · 16/04/2008, 10h40

et tu vas me dire que le bas du footer ne touche pas le bas de ta page ???

**temperature** · 16/04/2008, 10h44

contenucontenucontenucontenu
contenucontenucontenu
contenucontenucontenu
FOOTER

contenucontenucontenu
contenucontenucontenu
contenucontenucontenu
contenucontenucontenu
contenucontenucontenu
contenucontenucontenu
contenucontenucontenu
FOOTER

voila ce que çà me fait sur deux pages différentes, donc dans le premier cas le contenu est court donc le footer se retrouve vers le milieu.

Merci de ta patience FROG

**SpaceFrog** · 16/04/2008, 11h14

ben si tu ne mets pas de hauteur à ton bloc ...

Code :

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

height:100%

sinon voilà ce que donne le positonnement quand le div est dasn la page et pas dans un conteneur:

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
 
<style type='text/css'>
#footer { 
	width:784px;
	height:5em;
        position:absolute;
        bottom:0;
        border:solid 2px red;}
</style>
 
</head>
 
<body>
<div id='footer'> truc machin </div>
</body>
 
</html>

**temperature** · 16/04/2008, 11h21

cela ne change rien ce que tu me dis çà fais juste en sorte que cela soit juste en dessous du bloc mais moi j'aimerai que cela reste plus bas.
Je vais devoir faire des sauts de lignes :-(

**Halleck** · 16/04/2008, 11h35

Tu as sorti ton footer de ton bloc ou réellement défini une hauteur à 100% pour ce bloc ?

Fais un couper-coller exacte du code ci-dessus, ça ne peut que marcher ...

**temperature** · 16/04/2008, 11h38

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
<div id="bloc">
 
	<div id="bandeau">
		<img src="img/bandeau.jpg" alt="Vk">
	</div>
 
	<div id="session">
	<?php
		include("inc/connexion.php");	
	?>
	</div>
 
	<?php
	if ($_SESSION['iduser']!=1)
	{ ?>
		<div id="menu">
		<?php
			include("inc/menu.php");	
		?>
		</div>
	  <?php
	}
	else
	{ ?>
		<div id="menu">
		<?php
			include("inc/menu_admin.php");	
		?>
		</div>
	<?php } ?>
 
	<div id="contenu">
	<?php
		/*if ($expire=="oui") 
		{ 
			echo $message;
		}*/
		if($_GET['page']!='')
		{
			include("inc/".$_GET['page'].".php");
		}
		else
		{
			include("inc/accueil.htm");
		}
	?>
	</div>
	<div id="footer">
		<?php include("inc/footer.php"); ?>
	</div>
</div>

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
#bloc { 
	position:absolute;
    left:50%; 
	margin-left:-392px;
	width:784px; }
 
#session {
	text-align:center;
	height:70px;
	width:50%;
	float:right; }
#menu {
	float:left;
	width:40%;
	height:70px;}
 
#contenu { height:100%;
	min-height: 100%;
	clear:both;
	background-color:white; 
	width:784px;}
 
#footer { 
	width:784px;
	height:3em;
    border:solid 2px red;}

**SpaceFrog** · 16/04/2008, 11h43

Code :

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

1
2
3
4
5
#bloc { 
	position:absolute;
    left:50%; 
	margin-left:-392px;
	width:784px; }

et la hauteur 100% elle est ou ????

**temperature** · 16/04/2008, 11h51

quand je la met maintenant le footer est perdu

**SpaceFrog** · 16/04/2008, 11h52

mets aussi

Code :

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

body, html {height:100%}

**temperature** · 16/04/2008, 11h55

le footer ne revient toujours pas

dsl

**Erwan31** · 16/04/2008, 12h54

Bonjour,
c'est normal que ton footer n'aille pas en bas de page, puisque le bottom:0 se réfère au bloc conteneur #bloc dont la hauteur dépendait de son contenu et non d'une hauteur définie.

D'autre part éviter le centrage via positionnement absolue quand le centrage vertical n'est pas nécessaire, cela peut poser certain problème d'accessibilité.
Utiliser de préférence les marges latérales auto.

Donc la question est de savoir si tu souhaites retrouver le footer en bas de la zone de visualisation du navigateur ou que la hauteur du conteneur #bloc fasse un minimum de hauteur quelque soit la surface prise par le contenu?

**temperature** · 16/04/2008, 12h57

ben que le le footer se retrouve toujours juste en dessous du bloc contenu mais si le contenu est trop court il faudrait que le footer soit au moins a 600px par exemple

**SpaceFrog** · 16/04/2008, 12h59

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
 
<style type='text/css'>
 body, html {height:100%;}
 
 #bloc {
	position:absolute;
    left:50%; 
    margin-left:-392px;
	width:784px;
	height:100%;	
	border:solid 2px green; }
 
#session {
	text-align:center;
	height:70px;
	width:50%;
	float:right; }
 
#contenu {
	clear:both;
	background-color:white; 
	width:784px;
		border:solid 2 px red;}
 
#menu {
	float:left;
	width:40%;
	height:70px;
		border:solid 2px red;}
 
#footer { 
	position:absolute;
	width:784px;
	height:5em;
	border:solid 2px red;
	bottom:0;}
</style>
<title>Nouvelle page 2</title>
</head>
 
<div id="bloc">
       <div id="bandeau">Bandeau</div>
       <div id="menu">menu</div>
       <div id="contenu">Contenu</div>
       <div id="footer">Footer</div>
</div>
 
 
</html>

position de footer en bas !

Positionnement en CSS

Discussions similaires

Partager

Partager