28173 sujets

CSS et mise en forme, CSS3

Problème sous IE pour placer un pied de page

Bonjour.

J'ai utilisé la méthode décrite sur cette page :
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html pour que mon degradé soit toujours situé en bas de page.

Comme décrit sur le site, je veux que mon pied de page :

* soit poussé par le contenu lorsque le contenu est plus long que la hauteur de l'écran,
* mais il doit s'afficher tout en bas de l'écran lorsque le contenu est plus court.

A la base, avec un simple <div> en bas de page avec mon image en propriété "background" ça marche pour les pages longues, mais pour les pages courtes, l'image s'arrête avant le bas de l'écran.

Sous Firefox ça fonctionne, mais sous IE 6 ça donne ça pour les pages courtes : http://img90.imageshack.us/my.php?image=pagecourtels5.jpg , et ça pour les pages longues : http://img250.imageshack.us/my.php?image=pagelonguezk1.jpg . Smiley ohwell

A noter que si je mets "html" dans le CSS comme indiqué dans le site ça fait sous Firefox le même bug que sous IE :

version proposée par le site:
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}


ma version :
body {
  margin: 0px;
  background-color: #c6c6c6;
  padding: 0;
  height: 100%;
}


Je n'ai pas repris tous les éléments du site (j'avais juste besoin du code pour le pied de page). Pour le reste du code que j'ai donc placé :

CSS :
div#page {
	margin: 0 auto;
	min-height: 100%;
	position: relative;
	width: 100%;
	
}
div.fond_bas
{
        background: url('bas.jpg') repeat-x;
	padding-bottom: 73px;
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;		
}
div#piedpage {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
}


Juste avant le </head> dans mon fichier PHP :
<!--[if lte IE 6]>
<style type="text/css">
div#page {
	height: 100%;
}	
</style>
<![endif]-->


Et enfin un <div id="page"> placé juste après le <body> qui se referme vers la fin de la page juste après mon : 
<div class="fond_bas">
</div>


Voilà j'espère avoir été assez clair. Merci d'avance pour vos réponses. Smiley smile
Modifié par Ziltoid (17 Oct 2007 - 23:29)
Tes liens ne s'affichent pas correctemment, corriges-les s'il te plait Smiley cligne
Une page en ligne vaut mieux qu'une image, si cela permet de visualiser rapidemment le problème que tu rencontres, une page en ligne permet parfois de mieux comprendre où se situe l'erreur Smiley cligne
Modérateur
a écrit :
A noter que si je mets "html" dans le CSS comme indiqué dans le site ça fait sous Firefox le même bug que sous IE :


?? est tu certains d'avoir bien mis le#piedpage dans l'element #page en position:relative;

L'element faisant office de marche pied pour le pied de page , ne doit pas etre positionné en absolue. Il doit resté dans le flux c'est lui qui empechera le contenu dans le flux de venir s'afficher dans la zone du pied. div.fond-bas sert-il a ça ?

Une page en ligne ou le code suffisant et 'complet' (doctype, html , css) a mettre le bug en evidence est toujours un plus pour se faire aidé
GC
Voilà je l'ai mis en ligne :

http://s149858687.onlinehome.fr/testmeet1/index.php

La page longue c'est la page d'index (en faites je viens de me rendre compte qu'elle déconne aussi sous Firefox Smiley sweatdrop , logiquement l'image de dégradé devrait se placer après le cadre), et pour tester une page courte c'est le lien "Amis".
Par défaut, juste en mettant mon background en bas de page, sur la page courte l'image se terminait avant la fin de l'écran, tandis que là ça marche (du moins sous Firefox).

div.fond_bas est l'équivalent du div#piedpage (c'est juste que j'utilisais déjà div.fond_bas auparavant dans mon code pour placer l'image en bas de page).

En faites quand je mets le "div.fond_bas" en "position: relative;" la page longue fonctionne (l'image est placé tout en bas) mais ça ne marche plus sur la page courte (la page se terminant avant le bas de l'écran, par extension l'image s'arrête aussi avant le bas de l'écran).
http://s149858687.onlinehome.fr/testmeet1/index2.php

Et si je mets le "div.fond_bas" en "position: absolute;" c'est sur la page courte que ça fonctionne (l'image est bien placé en bas de l'écran), mais c'est sur la page longue que ça ne marche plus (l'image est placé en bas de l'écran, mais la page étant plus grande que l'écran, l'image coupe donc la page en plein milieu).
http://s149858687.onlinehome.fr/testmeet1/index.php

Vu que la méthode du site ne marche pas chez moi, à la limite je pourrais faire que le paramètre "position" du "div.fond_bas" change suivant le contenu à afficher. Mais sous Internet Explorer dans les 2 cas ça déconne, donc je ne suis pas plus avancé. Smiley decu
Modifié par Ziltoid (18 Oct 2007 - 00:50)
Ziltoid a écrit :
En faites quand je mets le "div.fond_bas" en "position: relative;" la page longue fonctionne (l'image est placé tout en bas) mais ça ne marche plus sur la page courte (la page se terminant avant le bas de l'écran, par extension l'image s'arrête aussi avant le bas de l'écran).
Et si je mets le "div.fond_bas" en "position: absolute;" c'est sur la page courte que ça fonctionne (l'image est bien placé en bas de l'écran), mais c'est sur la page longue que ça ne marche plus (l'image est placé en bas de l'écran, mais la page étant plus grande que l'écran, l'image coupe donc la page en plein milieu).

Il me semble que la structure des pages n'est pas non plus la même...
gcyrillus a écrit :
?? est tu certains d'avoir bien mis le#piedpage dans l'element #page

Cela ne semble pas être le cas sur "ta page longue" alors que "ta page courte", elle, comprend bien un conteneur 
<div id="page">
c'est peut-être à ce niveau que tu résoudras tes soucis de mise en page...

Je regarderai plus en détail demain, je file au dodo Smiley cligne
Sujet clos
Aller à