28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Probleme de footer

Pour une fois ce n'est pas ie qui me pose probleme mais firefox.

Voir ci dessous mon code, j'essaye de mettre un footer a mes pages, tout marche bien (en suivant vos conseils) mais quand je reduis la fenetre firefox le footer bouge par dessus le contenu, aprés avec l'ascenseur on peux voir le contenu en bas mais on se retrouve avec le footer au millieu, il ne suis pas le redimensionnement de la fenetre.

<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#global {
height: 100%;
width: 750px;
margin:	0 auto;
position: relative;
}
#header{
width:100%;
height:145px;
background-image:url(images/bg_header.gif);
}
#contenu{
width:100%;
height:145px;
}
#footer {
background-image:url(images/bg_footer.gif);
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0;
height: 27px;
}
</style>



<div id="global">
<div id="header">header</div>
<div id="contenu">contenu</div>
<div id="footer">footer</div>
</div>

Modifié par Lepop (08 Sep 2006 - 12:39)
Ton bloc global doit avoir un min-height de 100% au lieu d'un height.

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="Content-Language" content="fr" />

<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}

#global {
min-height: 100%;
width: 750px;
margin:	0 auto;
position: relative;
}

#header{
height:145px;
background-color: blue;
}

#contenu{
background-color: yellow;
height:145px;
}

#footer {
background-color:red;
position: absolute;
bottom: 0;
width: 100%;
height: 27px;
}

</style>

</head>


<body>

<div id="global">
<div id="header">header</div>
<div id="contenu">contenu</div>
<div id="footer">footer</div>
</div>

</body>

</html>


Je t'invite à lire la FAQ, tout s'y trouve, ou presque:

- Appliquer une hauteur de 100% à un élément

- Comment coller un footer (pied de page) en bas de page, quel que soit le contenu ?

- Comment faire une mise en page de 100% de hauteur avec des parties fixes (en-tête, par ex) ? ainsi que cette
mise à jour

- et, car la question se posera, Min-height sur Internet Explorer

Les liens de 456bereastreet sont très intéressants, en tout cas ils m'ont été très utiles.
Sujet clos
Aller à