Un footer qui ne veut pas footer comme je le souha

[xpatval]

Bonjour,

Testant un site sous différents navigateurs, je me retrouve confronté avec un souci avec netscape, firefox, opera.

Ma page est divisée en différents <div>

le conteneur principal:

#cont {

position: absolute;

width: 100%;

}

le header:

#head {

background-image: url('commun/head_1.gif');

background-repeat: no-repeat;

background-position: left;

height: 100px;

le gauche:

#left {

position: absolute;

left:0;

width: 150px;

le droit:

#right {

position: absolute;

right:0;

width: 150px;

}

le centre:

#cent {

height: 400px;

margin-left: 150px;

margin-right: 150px;

background-color: #000066;

}

et le footer:

#foot {

height: 50px;

}

Sous IE6, le footer est repoussé vers le bas, lors le <div> central s'agrandit.

Pas sous les autres navigateurs.

Y-a-t-il une solution ?

xpatval

[ams51]

est ce que tu as une adresse pour qu'on puisse visualiser le problème...

Je n'ai pas bien compris

[xpatval]

Non, pas encore, le site est en local.

En fait, si dans le <div> central (id="cent", dont la hauteur est définie à 400px), je colle un texte de 10000 lignes, sous IE6, le footer s'affichera à la suite des 10000 lignes écrites dans le <div>

Mais sous les autres navigateurs, il s'affichera juste en dessous la hauteur définie du <div> central. Autrement dit, j'aurais mon footer d'affiché à la 100ème ligne (sur les 10000)

Est-ce plus compréhensible ?

xpatval

[ams51]

c'est un problème que l'on rencontre souvent

Vas voir sur alsacreations : http://www.alsacreations.com/articles/modeles/

Tu auras certainement une solution

[xpatval]

Le site que je teste est basé sur les css d'un modèle d'alsacréation

La seule modif (hormis les couleurs, padding...) est que le <div> central à une hauteur "fixe" de 400px.

xpatval

[kiara]

le <div> central à une hauteur "fixe" de 400px.

en remplacant 400px par 100% ca devrait etre ok, ton centre s'adaptera au contenu et le footer s'affichera dès la fin du centre.

[ams51]

j'utilise cette architecture :

#site {

background-color: #EEEEEE;

}

#entete {

margin: 0px;

height: 95px;

}

#gauche {

width: 160px;

float: left;

padding: 5px;

}

#droite {

width: 170px;

float: right;

padding: 5px;

}

#contenu {

padding: 10px;

margin-left: 165px;

margin-right: 175px;

height: 100%;

}

#pied {

clear: both;

margin: 3em 0 0 0;

padding: 4em 0 0 0;

}

<div id="site">

<div id="entete"></div>

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

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

<div id="contenu"></div>

<div id="pied"></div>

</div>

[xpatval]

en remplacant 400px par 100% ca devrait etre ok

Et bien, non. Là, le pied de page (sous netscape, mozilla firefox, opera) se retrouve juste en dessous du header !!!

La seule page où il se place là où je le souhaite est celle ou le <div> central est défini avec une background-image de 400 px de hauteur !.

Dans les autres pages, malgré les textes (<p>), il se retrouve tout en haut du <div> central !

Perplexe suis-je

xpatval

[petit-ourson]

En utilisant un min-height:400px et height:auto pour les navigateur qui supporte le min-height et juste un width:400px pour les autres ?

Ca fonctionne pas ?

[xpatval]

Le min-weight résout le problème pour netscape, opera, mozilla firefox.

Mais en créé pour IE6. (le pied de page ne se positionne pas à 400px s'il n'y a qu'une ligne de texte dans le <div> central, mais remonte au maximum).

Je ne comprends pas trop pourquoi mettre un height:auto, si un min-height est renseigné.

De plus, différencier en fonction des navigateurs se fait de quelle manière ? JS ?

xpatval

[petit-ourson]

Tu ajoutes un height:auto pour ne pas prendre en compte le height:400px qui lui sera reséervé à IE.

Comment faire :

div#contenu {
padding: 10px;
margin-left: 165px;
margin-right: 175px;
height: 400px;
min-height: 400px;
}

html > body div#contenu {
 height:400px;
}

ou encore :

....

div#contenu {
padding: 10px;
margin-left: 165px;
margin-right: 175px;
min-height: 400px;
}

...

  <!--[if IE]>
	<style>
  div#contenu {
 	 height: 400px;
  }
	</style>
	<!--[end if]-->

[xpatval]

Heu...la bêtise et l'ignorance étant humaine, je place cela où ?

html > body div#contenu {
height:400px;
}

Dans la feuille de style ?

Et...

<!--[if IE]>
<style>
 div#contenu {
  height: 400px;
 }
</style>
<!--[end if]-->

Dans le head de la page ?

De plus, tu me donnes en exemple div#contenu. D'accord, mais comme je code de la sorte: <div id="cent"> je suppose que je dois mettre #cent à la place de div#contenu ?

xpatval

[petit-ourson]

oui le premier dans ta feuille de style l'autre dans ton entête.

Effectivement contenu c'etait le nom de mon id, pas le tient ;o)

[xpatval]

Bizarrement, ce que je place dans la feuille de style ne fonctionne pas.

Mais c'est ok pour la deuxième solution...

Merci,

xpatval