Comment obtenir #footer tjs au + bas de la page?

Kreestal · 17 Novembre 2005

Bonsoir à toutes et à tous

Je suis en train de travailler sur un site conçu d'après ce modèle.

Seulement je veux rajouter un footer qui fasse toute la largeur de la fenêtre et qui se trouve toujours au plus bas de la page, quelle que soit la résolution d'écran. J'ai donc modifié la CSS de base comme suit:

Voici ma CSS:

<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com/ */
body {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color:#000000;
}
#conteneur {
position: absolute;
width: 100%;
background:#000000 url("images/menu.jpg") no-repeat;
}
#centre {
margin-left: 235px;
height: 100%;
background:#000000 url("images/conteneur.jpg") no-repeat;
overflow: auto;
}
#gauche {
position: absolute;
left:0;
width: 235px;
}
#menu {
position:fixed;
left:10px;
top: 5%;
width:200px;
height:60px;
color: #FFFFFF;
}
#pied {
height: 15px;
background-color: #FFFFFF;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0;
color: #FFFFFF;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
.conteneur {
margin-left: 200px;
padding-top: 50px;
padding-right: 10px;
padding-bottom: 30px;

color: #FFFFFF;
}
.pied {
font-size: 0.7em;
color: #DE7B5D;
text-align: left;
margin: 0;
padding:1px;
}
p {margin: 0 0 0 0;}
</style>

Voici ce que j'obtiens:

La div #pied (en blanc) ne se met pas automatiquement en bas de la page en 1280x1024 (c'est à dire, je voudrais qu'elle se mette automatiquement au-dessus de la barre d'état!). Je voudrais qu'elle se trouve systématiquement au plus bas de la page affichée, quitte à "forcer" la div #centre à s'allonger même sans texte. (=même sans texte suffisant qui "pousserait" la div #centre jusqu'à #pied)

Petite précision:

- pour les grandes résolutions: En obtenant une telle div #pied, on est bien d'accord que non seulement cela "obligera" la div #centre à s'agrandir, mais aussi la div #gauche!

- pour les petites à moyennes résolutions: En obtenant cette div #pied, si le contenu de la div #centre est plus long que l'écran, j'imagine qu'on obtiendra un scroll sur la div #centre. [Phiou, c'est pas gagné mon affaire ]

Dites-moi si je suis claire :blush:

D'avance merci pour votre précieuse aide!

paul22 · 21 Novembre 2005

bonjour !

Pour faire simple !

mais je ne suis pas pro

ton div #menu je ne sais trop ce que tu veux en faire je ne l'ai donc pas mis !!

<html>
<!-- Date de création: 21/11/2005 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com/ */
body {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color:#FFCC99;
}
#conteneur {
width: 100%;
height: 100%;
background:#FFFFFF;
}
#gauche {
background:#FF0000; 
position:  absolute;
left:0;
width: 235px;
height: 80%;
}
#centre {
margin-left: 236px;
height: 80%;
width: auto;
background:#CCFF33; 
overflow: auto;
}
#pied {
background:#CCFF33;
width: 100%;
height: 20%;
background-color: #FF9933;
}


</style>
</head>
<body>

<div id="conteneur">
<div id="gauche">mmmmmmmmmm
</div>
<div id="centre">
llllllllllllllll
</div>
<div id="pied">
mmm
</div>
</div>
</body>
</html>

Paul

Kreestal · 24 Novembre 2005

bonjour !

Pour faire simple !

mais je ne suis pas pro

ton div #menu je ne sais trop ce que tu veux en faire je ne l'ai donc pas mis !!

<html>
<!-- Date de création: 21/11/2005 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com/ */
body {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color:#FFCC99;
}
#conteneur {
width: 100%;
height: 100%;
background:#FFFFFF;
}
#gauche {
background:#FF0000; 
position:  absolute;
left:0;
width: 235px;
height: 80%;
}
#centre {
margin-left: 236px;
height: 80%;
width: auto;
background:#CCFF33; 
overflow: auto;
}
#pied {
background:#CCFF33;
width: 100%;
height: 20%;
background-color: #FF9933;
}
</style>
</head>
<body>

<div id="conteneur">
<div id="gauche">mmmmmmmmmm
</div>
<div id="centre">
llllllllllllllll
</div>
<div id="pied">
mmm
</div>
</div>
</body>
</html>

Paul

<{POST_SNAPBACK}>

Bonjour paul22!

Merci pour ta réponse! [Mon sujet a eu un de ces succès, ça fait peur ]

En fait, entre temps, j'ai réussi à régler mon problème, grâce à une âme charitable. Donc voici la solution:

<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com/ */
body {
font-family: Trebuchet MS, Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color:#000000;
height: 100%;
}
html

{height: 100%;

}
#conteneur {
position: relative;
width: 100%;
height: 100%;
background:#000000 url("images/menu.jpg") no-repeat;
}
#centre {
margin-left: 235px;
height: 100%;
background:#000000 url("images/conteneur.jpg") no-repeat;
overflow: auto;
}
#gauche {
position: absolute;
left:0;
width: 235px;
}

#pied {
position:absolute;
height: 18px;
background:url("images/footer.gif") repeat;
bottom:0;
width: 100%;
}

p {margin: 0 0 0 0;}
</style>

Edit: je ne peux plus éditer mon premier message? :huh: J'aurais voulu inscrire "[Résolu]" dans le titre... :whistling:

Modifié 24 Novembre 2005 par Kreestal

rgwarrior · 27 Novembre 2005

effectivement, ça serait bien de dire que c'est resolu, parce que je t'ai trouvé aussi la solution (j'ai donc cherché pour rien)...

ps: position: absolute;

bottom: 20px; /* faut pas que ce soit trop coller non plus */

v4np13 · 27 Novembre 2005

tu peux aussi utiliser ceci:

#pied{
width: 100%;
height: 20px;
clear: both;
}

Connexion

Comment obtenir #footer tjs au + bas de la page?

Sujets conseillés

Kreestal

Lien vers le commentaire

Partager sur d’autres sites

paul22

Lien vers le commentaire

Partager sur d’autres sites

Kreestal

Lien vers le commentaire

Partager sur d’autres sites

rgwarrior

Lien vers le commentaire

Partager sur d’autres sites

v4np13

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité