(résolu) Positionnement de footer

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : (résolu) Positionnement de footer

Fred999

Rabat-joie

Salut les jeunes,

Un classique du genre, malgré un paquet de recherches sur les sites je ne trouve pas pourquoi...

Je souhaite donc effectuer un design à base de DIV. Tout se passe là :

Sur IE, ça marche ; sur Firefox, le footer est situé au-dessus (dans le sens du z-index : il devrait être situé horizontalement en-dessous, comme sous IE) du main (avec firebug on le voit bien) ... sans que je ne comprenne pourquoi.

(gauche/centre/droite sont contenus dans main)

Autre souci (mais ça j'ai pas commencé à chercher) : le main (et les cadres gauche/centre/droite qui sont dedans) ne prend pas toute la page.

Si vous avez une idée... merci d'avance.

Voici le code :
style.css

body {
background: #DDEEAA;
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align:center;
}

#conteneur {
background-color: #FFFFFF;
margin: 10px auto;
border: 1px solid;
width: 970px;
}

#haut {
height: 100px;
width: auto;
display: block;
background: #FFFF00;
border: 1px solid;
margin: 2px;
padding: 0;
}

#navbar{
height: 50px;
width: auto;
display: block;
background: #FFFF00;
border: 1px solid;
margin: 2px;
padding: 0;
}

#main {
width:970px;
height: auto;
display:block;
}

#gauche{
width:200px;
height: auto;
float:left;
background: #FFFF00;
border: 1px solid;
}
#centre{
width:560px;
height: auto;
float:left;
background: #FFFF00;
border: 1px solid;
}
#droite{
width:200px;
height: auto;
float:right;
background: #FFFF00;
border: 1px solid;
}

#footer{
height: 50px;
width: auto;
bottom: 0;
background: #FFFF00;
border: 1px solid;
margin: 2px;
padding: 0;
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
@import url("script/style.css" );
</style>
</head>

<body>

<div id="conteneur">

<div id="haut">
test haut
</div>

<div id="navbar">
test navbar
</div>

<div id="main">

<div id="gauche">
test gauche
</div>

<div id="centre">
test centre
</div>

<div id="droite">
test droite
</div>

</div>

</body>
</html>

Message édité par Fred999 le 16-11-2009 à 15:24:02

Publicité

Fred999

Rabat-joie

En cherchant encore, j'ai fini par trouver... j'le poste pour que ça serve

Il faut rajouter "clear: both;" dans le footer.

Thx à moi-même p

Message cité 1 fois

poulouf

Fred999 a écrit :

En cherchant encore, j'ai fini par trouver... j'le poste pour que ça serve

Il faut rajouter "clear: both;" dans le footer.

Thx à moi-même p

Bonjour,
j'ai beau essayer avec ce code je n'arrive à avoir un affichage ok,
j'ai bien le problème de zone centrale qui ne prends pas toute la page...

pour ma part j'ai une autre page qui ne fonctionne pas non plus (même problème):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page de test</title>
<style>
html,body
{
height:100%;
}
div
{
border:1px solid red;
}
.wrapper
{
border:1px solid black;
min-height: 100%;
height: auto !important;
height: 100%;
}
.header
{
height:148px;
}
.content
{
border:1px solid blue;
}
.footer
{
clear:both;
height:37px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
header
</div>
<div class="content">
contenu
</div>
</div>
<div class="footer">
Footer
</div>
</body>
</html>

Le code de ton premier poste est-il bien le bon?
Je ne comprends pas comment definir la taille de cette zone centrale,
le seul paramètre ayant un effet étant de fixer une taille en pixel...

Message édité par poulouf le 19-11-2009 à 16:04:13

---------------
Mon flick r

Fred999

Rabat-joie

Hum oui, en tout cas à l'heure où je l'ai fait

Je vais reposter, ça a un peu évolué depuis :

Le CSS :

html {
font-size:100%;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
}
body {
background:#C0C0C0 none repeat scroll 0 0;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
height:90%;
margin:0;
padding:10px;
text-align:center;
}
#conteneur {
background-color:#C0C0C0;
margin:auto;
overflow:hidden;
width:975px;
}
}
#haut {
background:transparent url(../img/banniere.png) repeat scroll 0 0;
display:block;
height:100px;
margin:5px 5px 0;
padding:0;
width:auto;
}
#navbar {
background:#EDFBFF none repeat scroll 0 0;
border:1px solid;
font-size:14px;
font-weight:bold;
height:25px;
margin:0 5px 5px;
padding:0;
width:auto;
}
#main {
background:transparent url(../img/fond_conteneur.png) repeat-y scroll 0 0;
overflow:hidden;
width:100%;
}
#gauche {
border:1px solid;
float:left;
font-size:12px;
height:auto;
margin:0 5px;
min-height:100px;
text-align:left;
width:195px;
}
#centre {
border:1px solid;
float:left;
height:auto;
margin:0;
min-height:500px;
padding:0;
text-align:left;
width:559px;
}
#droite {
border:1px solid;
float:right;
height:auto;
margin:0 5px;
min-height:100px;
width:195px;
}
#footer {
background:#EDFBFF none repeat scroll 0 0;
border:1px solid;
clear:both;
height:95px;
margin:5px;
padding:0;
width:auto;
}

Les cadres sont organisés selon :

J'ai simplifié au max, ça devrait suffire pour comprendre.

poulouf

Moué...
Non plus,
en même temps je n'ai pas de solution a mettre en face,
je me suis (aussi) résolu a fixer une min-height sachant que ça n'est pas
reconnu sous ie 6...

J'ai d'autres sujets plus important a traiter avant,
si je trouve une solution qui marche partout je la posterai, merci quand même.
A+

---------------
Mon flick r

stealth35

y'a moyen de feinter pour que le min-height passe sous ie6

Code :

#content{
height:600px;
}
 
html > body #content {
height : auto;
min-height : 600px;
overflow : hidden;
}

la 2eme parti n'est pas reconnu pas ie6 mais par tout les autre navigateur

poulouf

Bonjour Stealth35,
le problème est que IE6 va du coup avoir une taille fixe a 600px de haut,
ce qui est bien pour les "petits" contenus mais problématique si
beaucoup de texte. j'aurai au mieu un ascenceur sur le coté...
ou bien je manque quelque chose?

J'ai modifié un peu le code du haut :

html {
font-size:100%;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
}
body {
background:#C0C0C0 none repeat scroll 0 0;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
height:90%;
margin:0;
padding:10px;
text-align:center;
}
#conteneur {
background-color:#C0C0C0;
height:100%;
}
#haut {
background:transparent url(../img/banniere.png) repeat scroll 0 0;
display:block;

margin:5px 5px 0;
padding:0;
width:auto;
}
#navbar {
background:#EDFBFF none repeat scroll 0 0;
border:1px solid;
font-size:14px;
font-weight:bold;
height:25px;
margin:0 5px 5px;
padding:0;
width:auto;
}
#main {
/*background:transparent url(../img/fond_conteneur.png) repeat-y scroll 0 0; */
height:100%;
}
#gauche {
border:1px solid;
float:left;
font-size:12px;
height:100%;
min-height:100%;
width:195px;
}
#centre {
border:1px solid;
overflow:auto;
height:100%;
background-color:#ffffff;
text-align:left;
}
#droite {
border:1px solid;
float:right;
height:100%;
margin:0 5px;
min-height:100%;
width:195px;
}
#footer {
background:#EDFBFF none repeat scroll 0 0;
border:1px solid;
clear:both;
height:95px;
margin:5px;
padding:0;
width:auto;
}

et en html

le footer n'et plus dans le conteneur et se positionne en dessous en l'occurence en bas de page...Problème la page est légèrement plus
grande que la fenètre et du coup j'ai le scroll sur le coté...
Ceci dit je n'ai plus de height en dur sur le contenu...

a améliorer donc

EDIT:petite coquille dans le code

Message cité 1 fois
Message édité par poulouf le 23-11-2009 à 16:58:34

---------------
Mon flick r

stealth35

poulouf a écrit :

c'est justement la feinte d'ie6, c'est que si le contenu est plus grand, le block se resize, ducoup ca fait comme un min-height

poulouf

ok, je prendrai l'option pour le cas ou,

sinon j'ai modifié encore un,

*
{
margin:0;
padding:0;
}
html {
font-size:100%;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
}
body {
height:90%;
margin:0;
text-align:center;
}
#conteneur {
background-color:#C0C0C0;
height:99%;
}
#haut {
background:transparent url(../img/banniere.png) repeat scroll 0 0;
display:block;
width:auto;
}
#navbar {
background:#EDFBFF none repeat scroll 0 0;
border:1px solid;
font-size:14px;
font-weight:bold;
height:25px;
padding:0;
width:auto;
}
#main {
/*background:transparent url(../img/fond_conteneur.png) repeat-y scroll 0 0; */
height:100%;
}
#gauche {
border:1px solid;
float:left;
font-size:12px;
height:100%;
min-height:100%;
width:195px;
}
#centre {
border:1px solid;
overflow:auto;
height:100%;
background-color:#ffffff;
text-align:left;
}
#droite {
border:1px solid;
float:right;
height:100%;
min-height:100%;
width:195px;
}
#footer {
background:#EDFBFF none repeat scroll 0 0;
border:1px solid;
clear:both;
height:35px;
padding:0;
width:auto;
}

pour le même code html,
c'est un peu reculer pour mieux sauter dans la mesure ou l'on a une grande résolution (supérieur en hauteur a 1024) l'écart entre le bas de page et le footer s'agrandit...

on voit aussi que le conteneur ne rempli pas toute sa zone...
C'est quand même la misère ces css...(et surtout ces navigateurs...)

---------------
Mon flick r

FORUM HardWare.fr

Programmation

HTML/CSS

(résolu) Positionnement de footer

Sujets relatifs
[résolu][PHP/XML] lecture de fichier XML en PHP	[RESOLU] [AS2] Chemin
[C] [resolu] lecture matrice alloué dynamiquement	Execution javascript et condition unique [resolu]
[Ruby] exécution d'une commande 'echo' avec ruby [résolu]	[RESOLU] - Script de copie de dossier en BAT vers plusieurs [...]
[RESOLU] Remplacer une date si < date du jour	[Résolu]Union?
[RESOLU]Requête SQL: Afficher Gratuit/Payant en une seule fois	[RESOLU] INSERT Mysql foireux
Plus de sujets relatifs à : (résolu) Positionnement de footer

Page générée en 0.053 secondes