28173 sujets

CSS et mise en forme, CSS3

Placer un footer en bas de la page [résolu]

salut tout le monde...

J'aimerais bien placer ma balise div #footer en bas de la page ou elle serra figé...

Merci d'avance pour votre aide!!!
Modifié par ENSA_MAD (27 Oct 2006 - 10:41)
Pourrais-tu nous en dire plus? Dans l'absolu, quelque chose comme ça fonctionnera, mais je doute que ça puisse servir...

#footer {position:absolute; bottom:0;}

Sinon, fait peut-être un petit tour par ici.
Modifié par Benjamin D.C. (06 Oct 2006 - 18:07)
Merci beaucoup...
mais si je place le footer en bas, comment je peux faire pour limiter la zone de contenu par le haut de footer???
Administrateur
ENSA_MAD a écrit :
J'aimerais bien placer ma balise div #footer en bas de la page ou elle serra figé...

Hello et bienvenue Smiley cligne

C'est étonnant, mais ça correspond mot pour mot à l'un des points de l'Incontournable FAQ :
http://forum.alsacreations.com/faq/#item25

Pour rappel, le média Web n'est pas paginé comme le média Print. Les concepts de page, de pied de page, etc. n'existent pas vraiment : sur un document web il n'y a pas de limite verticale; on utilise l'ascenseur.
Il faut parfois se contraindre au média.

Le lien qui t'a été donné vers Pompage est celui qui te permettra, à force de bidouilles, de t'en sortir à peu près.
Merci...

Je travaille actuellement sur une page master qui doit etre divisé en trois partie major:
1- le Header qui contient des barres:linkbar et menubar
2- un esapce Content
3- un footer...

L'espace content doit lui aussi garder un width figé mais en fonction de la résolution et au cas ou le contenu est plus grand que l'espace sépécifié il doit y avoir un scrollbar pour pouvoir défiler le contenu...

pouviez vous m'aider s'il vous plait... Smiley confused

Merci d'avance

Modérateur
bonjour,

ceci peut-etre ? : http://gcyrillus.free.fr/trucs_css/pied-en-bas-V2.html

le principe , un conteneur extensible en position relative, et un pied en position absolute ; bottom:0;


exactement ce que preconise la FAQ !
(contrairement a ce que dit toujours la faq , l'effet est possible sur une page dont le contenu est plus long que la fenêtre )
donner la largeur et la hauteur a la balise en absolute , ainsi que sa position a droite ou gauche , au cas ou un text-align:center est appliqué a l'un des parents (IE est concerné seulement)., prevoir une marge interne au bas du conteneur egal a la hauteur du footer , un padding ou une balise vide (depend de l'effet recherché , page vide 100% de la hauteur ou non ).
Modifié par gcyrillus (06 Oct 2006 - 19:27)
ENSA_MAD a écrit :
Je travaille actuellement sur une page master qui doit etre divisé en trois partie major:
1- le Header qui contient des barres:linkbar et menubar
2- un esapce Content
3- un footer...

L'espace content doit lui aussi garder un width figé mais en fonction de la résolution et au cas ou le contenu est plus grand que l'espace spécifié il doit y avoir un scrollbar pour pouvoir défiler le contenu...

Quel est l'intérêt d'avoir ces deux parties (en-tête et pied de page) toujours visibles en haut et en bas de la fenêtre.

Si c'est juste « parce que c'est plus sympa », alors je te renvoie à la remarque de Raphaël : « Il faut parfois se contraindre au média ».

Par contre, si cela répond à un besoin très spécifique, par exemple pour avoir toujours à l'écran un certain nombre d'outils, pour une application web : on utilisera dans ce cas des frames (qui, contrairement aux rumeurs, n'ont pas été bannies des pratiques de développement web : certains usages des frames restent tout à fait pertinents).
Salut...
Merci gcyrillus pour la solution que vous m'avez proposé et certes c'est mieux que j'imaginais...
Mais j'ai essayé d'étendre le contenu sur un WIDTH de 100% dans IE et aussi Firefox ...
J'ai pu réalisé ça avec firefox mais IE me rend vraiment dingue Smiley langue ...
C'est vraiment urgent...
Merci d'avance
Modifié par ENSA_MAD (27 Oct 2006 - 01:21)
Modérateur
bonsoir,

sur lequel des 2 liens avez vous pris les bases ?
Avez vous une page en lien ou code a proposé qui montre votre soucis ?

++
voici le code de ma page ((basé entièrement sur votre solution)):
a écrit :
<html>
<head>
<style type="text/css">
html, body {
height:100%;
margin:0;padding:0;
}

body
{
font-family:arial;
color: #808080;
font-size: 12px;
background:url(../fond.png) #666;
background-repeat:repeat-y;
}
#global {
background:#333;
background-repeat: repeat-y;
position: relative;
height: 100%;
max-height:100%;
margin:0 auto;
width:100%;
}
#header
{
background:#444;
background-repeat:no-repeat;
height:90px;
width:100%;
color: #FFA800;
margin:0;
line-height: 2em;
text-align:center;
}
#contenu
{
text-align:left;
left: 200px;
padding: 15px;
padding-bottom:2em;
position:absolute;
top:90px;
bottom:30px;
overflow:auto;
right :0;
}
#footer
{
background:url(../images/footer.jpg) #444;
background-repeat:no-repeat;
height:30px;
position: absolute;
bottom: 0px;
left:0;
width:100%;
text-align: right;
padding-right: 20px;
line-height:30px;
}

</style>
<!-- zone css pour IE6 et inferieur --><!--[if lte IE 6]>
<style type="text/css">
#header {
position:absolute;
left:0;
top:0;
}
#contenu {
padding-right:0;
top:0;
padding-top:90px;
padding-bottom:30px;
height:100%;
right:0;
background-color:transparent;
/* couleur de fond reporté sur #global */
padding-left:0px;
padding-right:0px;
}

#contenu div {
height:100%;
overflow-y:scroll;
background-color:#333333;
padding-left:10px;
padding-right:10px;

}

</style>
<![endif]-->




</head>
<body><div id="global">
<div id="header">Test</div>
<div id="contenu">test test test test test testtest test test test test </div>
<div id="footer"> bas de page</div>
</div>
</body>
</html>

et comme d'habitude ça marche avec firefox mais pas vec IE, le contenu s'affiche sur le header!!!
Modifié par ENSA_MAD (27 Oct 2006 - 02:29)
Modérateur
rebonsoir,

il manquait tout simplement le div dans #contenu , necessaire pour IE et un overflow:hidden pour body et html , pour cacher les barre de scroll en trop.
<html>
<head>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
                             overflow:hidden;
}

body
{
font-family:arial;
color: #808080;
font-size: 12px;
background:url(../fond.png) #666;
background-repeat:repeat-y;
}
#global {
background:#333;
background-repeat: repeat-y;
position: relative;
height: 100%;
max-height:100%;
margin:0 auto;
width:100%;
}
#header
{
background:#444;
background-repeat:no-repeat;
height:90px;
width:100%;
color: #FFA800;
margin:0;
line-height: 2em;
text-align:center;
}
#contenu
{
text-align:left;
left: 200px;
padding: 15px;
padding-bottom:2em;
position:absolute;
top:90px;
bottom:30px;
overflow:auto;
right :0;
}
#footer
{
background:url(../images/footer.jpg) #444;
background-repeat:no-repeat;
height:30px;
position: absolute;
bottom: 0px;
left:0;
width:100%;
text-align: right;
padding-right: 20px;
line-height:30px;
}

</style>
<!-- zone css pour IE6 et inferieur --><!--[if lte IE 6]>
<style type="text/css">
#global {
	height:100%;
	position:absolute;
	background-color:#555;
}


#header {
	position:absolute;
	left:0;
	top:0;
}

#menu {
	text-align:left;

}


#contenu {
	padding-right:0;
	top:0;
	padding-top:90px;
	padding-bottom:30px;
	height:100%;
	right:0;
	background-color:transparent;
/* couleur de fond  reporté sur #global */	
	
	padding-left:0px;
	padding-right:0px;
}

#contenu div {
	height:100%;
	overflow-y:scroll;
	background-color:#333333;
	padding-left:10px;
	padding-right:10px;

}
	
#footer {
	width:100%;
}

</style>
<![endif]-->




</head>
<body>
<div id="global">
<div id="header">Test</div>

<div id="contenu">
    <div>
             test test test test testtest test test test test testtest 
    </div>
</div>
<div id="footer"> bas de page</div>

</div>
</body>
</html>


bonsoir Smiley smile
Sujet clos
Aller à