Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2529 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  (résolu) Positionnement de footer

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

(résolu) Positionnement de footer

n°1940862
Fred999
Rabat-joie
Posté le 15-11-2009 à 14:16:37  profilanswer
 

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
mood
Publicité
Posté le 15-11-2009 à 14:16:37  profilanswer
 

n°1940864
Fred999
Rabat-joie
Posté le 15-11-2009 à 14:35:53  profilanswer
 

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

n°1942386
poulouf
Posté le 19-11-2009 à 16:03:00  profilanswer
 

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
n°1942729
Fred999
Rabat-joie
Posté le 20-11-2009 à 11:20:05  profilanswer
 

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.

n°1943570
poulouf
Posté le 23-11-2009 à 15:55:26  profilanswer
 

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
n°1943600
stealth35
Posté le 23-11-2009 à 16:30:11  profilanswer
 

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

n°1943630
poulouf
Posté le 23-11-2009 à 16:56:14  profilanswer
 

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
n°1943647
stealth35
Posté le 23-11-2009 à 17:07:36  profilanswer
 

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

n°1943657
poulouf
Posté le 23-11-2009 à 17:13:23  profilanswer
 

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

Aller à :
Ajouter une réponse
  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é dynamiquementExecution 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


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR