28173 sujets

CSS et mise en forme, CSS3

Pied de page attaché en bas, problème sous Fire Fox

Salut à tous!

Pour une fois que j'ai un problème avec FF et que tout fonctionne sous IE Smiley eek

Voilà en gros mon problème, j'ai un site à hauteur de page variable et j'ai donc fixé mon footer en bas de fenêtre pour les pages à contenu réduit en utilisant ce code
html, body {
min-height:100%;
height:100%;
margin:0;
padding:0;
font-family:Geneva, Arial, Helvetica, sans-serif;
}

#main_content {
text-align:center;
margin:0 auto;
width:975px;
min-height:100%;
position:relative;
}

* html #main_content {height:100%;}

#content {
width:961px;
float:left;
text-align:left;
}

#footer {
position:absolute;
bottom:0;
left:0;
width:961px;
margin:0 7px 0 7px;
height:21px;
padding: 4px 0 0 0;
text-align:center;
}

#fin {
clear:both;
padding-bottom: 42px;}


et j'ai imbriqué mes éléments dans le main-content. Le footer est contenu dans le content et j'ai une div vide (fin) juste avant le footer pour éviter le débordement.

Mon souci est que le footer est bien attaché en bas de page mais sous FF, les pages a contenu long se déroule sous le footer et ce dernier n'est pas "poussé" par le contenu.

les exemples:
Page a contenu court: http://les-webmasters.com/public/ternois/index.html
page a conenu long: http://les-webmasters.com/public/ternois/axe-de-developpement.html

Si quelqu'un a une idée!

Merci d'avance!
Modifié par zecaraz (21 Jun 2007 - 10:13)
Modérateur
bonjour,

les flottants n'etirent pas leur conteneurs par defaut dans Firefox(et Cie).

Ajoute un overflow:hidden; pour reglé ce probleme a #main_content dans ff et pour IE ajoute un height:auto; .

Si cela ne convient toujours pas a IE , alors la faq est la pour te proposer d'autre pistes a propos des flottants , le but est d'avoir #main_content qui s'etire en englobant tout les flottants.

gc
.
En fait je réedit mon post, ça ne fonctionne toujours pas...

En effet le footer se fixe bien en bas de page et conserve sa position lors de page à contenu long, mais il n'est plus fixé au "bas de la fenêtre" dans les pages a contenu court!

Ca me rend fou Smiley biggol !

Quelqu'un a t il une autre solution à me proposé?
stp..stp..stp..stp
Modifié par zecaraz (20 Jun 2007 - 18:32)
Bonjour,

Juste une question, pourquoi ton footer est positionné en absolute?
Juste une suggestion : le laisser dans le flux et lui conférer la propriété clear: both; cela devrait suffire non?
eh bien non, le laisser dans le flux le placerai bien en fin de mon "content", mais , li doit pouvoir etre placé "en bas de la fenêtre" même si mon contenu n'est pas suffisament long.

Merci quand même!
Modérateur
bonsoir ,

peut tu mettre en lien la page a contenu court qui ne dpose plus le pied en bas de page ?

pour info:

html , et body a fixer a 100% en hauteur.

le conteneur global a fixer a min-height:100%; en hauteur et en position:relative ; le pied a placer en absolu doit etre contenu par ce conteneur pour le prendre en reference .

Si les elements qui etirent en principe le conteneur sont positionné en flottants , il faut penser alors a forcer le conteneur a les englober , .. (display:table; , overflow:hidden / auto , un dernier elemnt dans le flux en clear:both/left/right ou a l'aide du pseudo :after ... voir la faq pour ces soucis si besoin).

IE 6 aura besoin d'un height:100%; pour le conteneur global , a faire preceder d'un height:auto!important; pour les autres navigateurs (IE7 inclu).

le min-height sur html et body est sans effet dans ce cas , il faut se servir d'un autre conteneur pour y mettre le contenu de la page.

GC
zecaraz a écrit :
Je n'ai toujours pas de réponse

La réponse de gcyrillus à propos du dépassement des flottants me semble pourtant très claire.

Si tu n'arrives pas à remédier à ce problème avec les pistes qu'il te donne, c'est que tu dois faire quelque chose de travers. Auquel cas, le plus simple serait que tu nous montre la page en ligne (ou, si elle est en local, la mettre en ligne pour nous la montrer), afin qu'on puisse constater le problème de visu, trouver sa source et tester une solution.
Salut,

Dans le cadre de mes RTT (forcé Smiley cligne ) pour un petit coup de main à un de mes confrères, ça va peut être t'aider?
  <style type="text/css">
  *{margin: 0; padding: 0;}
  
html, body {
height:100%; 
}

#conteneur {
background: lime;
text-align:center;
margin: 0 auto;
width:900px;
min-height:100%;
position: relative;
}

#contenu {
width:400px;
float:right;
background: yellow;
margin-bottom: 50px;
}

#clear{
clear: both;
}

#footer {
position:absolute;
background: red;
bottom:0px;
left:0;
width:900px;
height:50px;
}

</style>
</head>
<body>
<div id="conteneur">
	<div id="contenu">
	...
	</div>
	<div id="footer">
	...
	</div>
	<div id="clear">
	</div>
</div>
</body>
Merci beaucoup pour toutes vos réponses.

Pour le moment j'ai toujours un dépacement sous le footer du contenu long avec FF http://les-webmasters.com/public/ternois/axe-de-developpement.html mais tout est correct sous IE6 et IE7 ainsi que les pages a contenu court: http://les-webmasters.com/public/ternois/index.html

Voici le style que j'ai utilisé

html, body {
background:url(img/bg.jpg) repeat-x #ebf6f5;
height:100%;
margin:0;
padding:0;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
color:#676767; 
}

#main_content {
text-align:center;
margin:0 auto;
width:975px;
min-height:100%;
position:relative;
}

* html #main_content {height:100%;}


#content {
width:961px;
float:left;
text-align:left;
overflow:hidden;
}


#footer {
position:absolute;
color:#FFFFFF;
bottom:0;
left:0;
background:#006e81;
width:961px;
margin:0 7px 0 7px;
height:21px;
padding: 4px 0 0 0;
text-align:center;
}

#fin {
clear:both;
padding-bottom: 42px;}


et pour le html

<div id="main_content">
<div id="content">
<div id="footer"></div>  	
<div id="fin"></div>
	
</div>


quand j'utilise overflow:auto sur #main_content mon contenu "pousse" bien le footer en bas de page sur FF, mais les pages a contenu court n'ont plus les footer fixé en bas, et c'est unvrai bordel sous IE6...

quand j'applique overflow:auto sur #content seulement, c'est l'inverse, le contenu ne pousse plus le footer en bas de page sous FF mais il est bien "attaché" sur les pages a contenu court.

et lorsque j'applique overflow:auto sur les deux, je me retrouve dans la première situation.

Je pense que je devrais cherché une solution dans ce sens...

gcyrillus> J'ai bien reprise point par point tes indications, mais il y a un problème avec IE6 lorsque j'applique

#main_content {
text-align:center;
margin:0 auto;
background:url(img/bg_main_content.jpg) repeat-y;
width:975px;
min-height:100%;
position:relative;
height:auto!important;
}

* html #main_content {height:100%;}


ghost> ta solution fonctionne très bien mais pas sur IE6, manque juste un petit * html #main_content {height:100%;} interprété seulement par IE6. Etonnement ça me semble être le même structure que j'utilise et pourtant ça ne fonctionne toujours pas.

Je continue mes recherches et à reprendre vos indications!
Merci encore!
Modifié par zecaraz (22 Jun 2007 - 11:51)
Re,

Oui excuse en fait pour ie6, je préfère passer par un commentaire conditionnel c'est plus propre et plus facile pour la maintenance.
aucun problème et merci d'usé d'un peu de ton RTT pour résoudre les problèmes des travailleurs du vendredi matin Smiley cligne
Bon, c'est bien un problème de dépassement de flottants : en l'occurrence, c'est div#content qui est flottant et qui sort de div#main_content.

Le positionnement sur div#content m'a l'air superflu.
#content {
/*float:left; */   /* On vire */
padding-top:135px; /* On rajoute */
text-align:left;
width:961px;
}

Théoriquement le padding-top n'est pas nécessaire, d'ailleurs on pourrait très bien le remplacer par un clear: both par exemple, s'il n'y avait pas les deux petits blocs flottants qui servent à dessiner des bordures (un peu tarabiscoté comme construction, d'ailleurs). Mais surtout : normalement le padding-top ne devrait pas être nécessaire car le titre du bloc div#content ne devrait pas être une image de fond mais un vrai contenu HTML, repoussé par les flottants.

On a :
<h1 class="tit_axe_dev">Présentation générale : Les axes de développements </h1>

On devrait avoir :
<h1 class="tit_axe_dev"><img src="..." alt="Présentation générale : Les axes de développements" /></h1>

Une solution plus accessible et, en l'occurence, moins problématique pour la mise en page. Smiley biggol
ghost a écrit :
en fait pour ie6, je préfère passer par un commentaire conditionnel c'est plus propre et plus facile pour la maintenance.

C'est surtout plus fiable à moyen terme. Smiley smile
Florent V.> Je comprends mon erreur quant au positionnement en float du content et l'ajout du padding.
Mais cette solution pose des problèmes sur IE6 et IE7 et là je ne comprends pas d'où vient le problème.

Je peux quand même ajouter des hacks IE et faire tourner la machine mais j'aurai aimé comprendre le souci..

En tout cas merci florent!
zecaraz a écrit :
Je peux quand même ajouter des hacks IE

Des commentaires conditionnels, de préférence. Voir la FAQ du forum à ce sujet (1. hacks CSS et 2.commentaires conditionnels).
Sujet clos
Aller à