28220 sujets

CSS et mise en forme, CSS3

Problème avec pied de page (footer) et IE

Bonjour,

J'ai passé ma journée à essayer de faire marcher le pied de page (ci-après footer) sous IE, mais il me fait toujours un pied de nez. [ok la sortie n'est pas loin Smiley rolleyes ].

J'ai adopté la technique trouvée dans la FAQ :
http://pompage.net/pompe/pieds/
La version "Associer le contenu à la fenêtre du navigateur".

Voici le code que j'ai pour le footer: 
/*Pour que le body occupe tout l'espace, nécessaire pour le footer*/
html, body {
	height: 100%;
}

/*Rien de spécial*/
body {
	margin: 0;
	padding: 0;
	font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
/*Création du pied de page, un bloc en position absolue dans le conteneur relatif*/
#footer {
	position: absolute;
	bottom: 0; /*coller en bas du conteneur*/
	padding: 10px;
	background-color: #6c5dff;
	width: 650px;
}

Jusqu'ici ça marche plutôt bien, même si IE ne reconnait pas min-height, faisant que le footer chevauche mon menu principal. Sous Firefox aucun problème.

Maintenant si je centre la page avec 
#calibrage {
	position: relative;
	left: 50%;
	width: 986px;
	margin-left: -493px;
	min-height: 130%; /*pour que le footer ne recoupe pas le menu*/
	background-color:  #000;
	
}


IE ne colle plus le footer.. et je ne sais plus quoi faire.. Smiley bawling

Vous pouvez trouver le html et le css de ma page "débug" ici :
html : http://www.pyromaniaks.net/test/footer.html
css: http://www.pyromaniaks.net/test/footer.css

Une idée du pourquoi ? Je n'ai pas regardé du côté des "hacks" car j'aimerais si possible les éviter !

Merci infiniment Smiley smile !
Salut.
J'ai jeté un oeil rapie à ta css : apparemment tu utilises des positions absolues pour tout le monde, avec hauteur et largeur des blocs renseignées... alors positionnes ton footer comme tout le monde, en absolu comme n'importe quel autre bloc ...non ? Je crois bien que ton min-height n'est pas utile du coup... et hop là une css toute simple Smiley lol
Salut !
Merci pour ta réponse Smiley smile
Le footer est en absolu Smiley ohwell
Il faudrait peut être que je centre la page d'une autre manière, pourtant je la trouve bien cette technique Smiley decu
Modifié par Eucalyptus (31 Jul 2005 - 20:26)
Pardon, je voulais dire comme les autres, par rapport au haut de la fenêtre et non le bord bas de ton conteneur...
Je n'ai peut être pas bien formulé ma question.

Je ne comprends pas pourquoi IE ne colle plus le footer en bas de la page lorsque je la centre avec : 
 #calibrage {
	position: relative;
	left: 50%;
	width: 986px;
	margin-left: -493px;
	min-height: 110%; /*pour que le footer ne recoupe pas le menu*/
	/*background-color:  #000; DEBOGAGE */
	}

ça n'a pas de sens...

Le lien que j'avais donné dans mon premier post renvoie à la maquette du sîte où l'on peut voir chaque div, la place qu'il occupe etc.. pour y voir plus clair. Cependant il semblerait que je n'y arrive pas tout seul Smiley ohwell
Un petit coup de main ou une suggestion seraient grandement appréciés Smiley smile
Eucalyptus a écrit :
Oui, mais si le contenu dépasse la page ça va poser problème non ?

Tu as attribué des hauteurs fixes à l'ensemble de tes blocs... j'ai du mal à comprendre ce qui te pose problème du coup.

Et pour IE, il me semble bien qu'il n'interprête pas le min-height... Smiley ohwell
Justement, tous les blocs n'ont pas une hauteur fixe, si c'était le cas je n'aurais aucun problème avec le footer. Le conteneur s'élargit au fur et à mesure que l'on ajoute du contenu, et mon souhait aurait été que le footer reste en bas de la page, sauf si le contenu dépasse le cadre de la fenêtre auquel cas il se placerait en dessous du contenu. La solution que j'ai implémentée marche sous Firefox sans aucun problème. Elle marche sous IE tant que je ne centre pas la page ! C'est ça que je n'arrive pas à comprendre..
Il y'a des threads sur le forum qui traitent du sujet, mais je n'y ai pas trouvé de solution à mon problème Smiley bawling

Merci quand même pour tes suggestions Smiley smile Je finirais probablement par trouver une solution !
Bah d'après ce que je vois, tous les éléments de ta page importants pour la mise en page ont une hauteur précisée : bloc header, bloc partner, blocs menu et bloc events... J'insiste un chouillat donc... en supprimant l'approche avec tes min-height et en utilisant ces blocs simplement positionnés en absolu, ça devrait le faire.
Pour le centrage en largeur, moi j'utilse ça et ça fonctionne bien (merci Alsa, ça provient d'un tuto) :

body {position:relative; width:760px; margin-left:auto; margin-right:auto; text-align:center; }

Le coup du texte-align center est là pour IE qui se comporte parfois cafouillant sur les margin en auto. Ca oblige à remettre un text-align:left dans les blocs de la page mais vraiment, je n'utilise plus d'autre méthode Smiley cligne
Sujet clos
Aller à