problème sous IE pour placer un pied de page

**Ziltoid** · 17/10/2007, 22h35

Bonjour.

J'ai utilisé la méthode décrite sur cette page pour que mon degradé soit toujours situé en bas de page.

Sous Firefox ça fonctionne, mais sous IE 6 ça donne ça pour les pages courtes, et ça pour les pages longues.

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:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

ma version :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<!--[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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="fond_bas">
</div>

Voilà j'espère avoir été assez clair. Merci d'avance pour vos réponses.

**blueice** · 17/10/2007, 23h04

Je n'ai pas compris le problème.
Que souhaites-tu faire à la base ?

**Ziltoid** · 17/10/2007, 23h13

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.

Quand ça marche sous Firefox ça donne ça.

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.

EDIT :

Je l'ai mis en ligne pour que vous vous en rendiez mieux compte :

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

, 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).

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é.

**Candygirl** · 18/10/2007, 09h09

Dans ton css on trouve l'indispensable

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
div#page {
	min-height: 100%;
	position: relative;	
}

et la correction pour IE6 dans ton html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<!--[if lte IE 6]>
<style type="text/css">
div#page {
	height: 100%;
}	
</style>
<![endif]-->

Le problème c'est que ton div page n'existe pas dans ton html...

**Ziltoid** · 18/10/2007, 11h35

Ah oui en effet il manquait le <div id=page>... mais au final le rajouter ne change rien.

On me faisait aussi remarquer que si je met "position: absolute;", si on réduit la fenêtre l'image vient recouvrir le reste (ce qui est assez logique, mais à vrai dire je n'y avais pas pensé

).
Et sous Internet Explorer c'est toujours autant l'anarchie...

J'ai testé aussi un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
body {
  margin: 0;
  padding: 0;
  background-color : #c6c6c6;
  background-images : url('bas.jpg') bottom left repeat-x;
  height: 100%;
  }

mais ça ne marche pas non plus (l'image n'apparaît pas).

problème sous IE pour placer un pied de page

Positionnement en CSS

Discussions similaires

Partager

Partager