(résolu) Positionnement de footer

Positionnement de footer (résolu) - HTML/CSS - Programmation

Marsh Posté le 15-11-2009 à 14:16:37    

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>

 

 <div id="footer">  
   test bas
  </div>
 
 
 
 </div>

 

</body>
</html>


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

Marsh Posté le 15-11-2009 à 14:16:37   

Reply

Marsh Posté le 15-11-2009 à 14:35:53    

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 :op

Message cité 1 fois
Reply

Marsh Posté le 19-11-2009 à 16:03:00    

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 :op

 

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
Reply

Marsh Posté le 20-11-2009 à 11:20:05    

Hum oui, en tout cas à l'heure où je l'ai fait :D
 
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 :

<body>
  <div id="conteneur">
    <div id="haut"></div>
    <div id="navbar"></div>
    <div id="main">
      <div id="gauche"></div>
      <div id="centre"></div>
      <div id="droite"></div>
    </div>
    <div id="footer">
    </div>
  </div>
</body>


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

Reply

Marsh Posté le 23-11-2009 à 15:55:26    

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
Reply

Marsh Posté le 23-11-2009 à 16:30:11    

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

Code :
  1. #content{
  2. height:600px;
  3. }
  4.  
  5. html > body #content {
  6. height : auto;
  7. min-height : 600px;
  8. overflow : hidden;
  9. }


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

Reply

Marsh Posté le 23-11-2009 à 16:56:14    

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


<body>
  <div id="conteneur">
    <div id="haut"></div>
    <div id="navbar"></div>
    <div id="main">
      <div id="gauche"></div>
      <div id="droite"></div>
      <div id="centre"></div>
    </div>
  </div>
  <div id="footer">
  </div>
</body>

 

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
Reply

Marsh Posté le 23-11-2009 à 17:07:36    

poulouf a écrit :

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?


 
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

Reply

Marsh Posté le 23-11-2009 à 17:13:23    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed