[Résolu]Footer indiscipliné avec Opera

Bonjour à tous

Un petit souci: après moultes suées et en lisant ce site et bien d'autres en long en large et en travers, j'ai fini par me faire un petit site tout en CSS. Je le teste sur IE6 et 7, Firefox 1.5 et 2, et Opera9. Le problème justement vient de lui...

J'ai un footer tout simple (un numéro de téléphone, en gros... pas d'image), décrit comme ceci dans ma main.css :

#footer {
	position: absolute;
	width: 690px;
	padding-top: 5px;
	bottom: 0;
	background: none;
	color: #000000;
	text-align: center;
}

#footer h1	{
	text-align: center;
}

Tout se passe bien(à savoir que le footer est en bas de l'écran) avec tous les navigateurs testés tant que le contenu de la page est plus petit que l'écran (je teste en 1024x768 et 1280x768), mais quand la page est plus haute, tous les navigateurs décalent le pied de page vers le bas, sauf Opera qui a decidé de la mettre en bas de l'écran, chevauchant donc ce qu'il y a dessous... Bref il me chauffe!!

Le footer est "contenu" dans le div#global, lui même dans le body. Voici leur description:

html, body {
	height: 100%;
	margin: 0;
	font: 100% Verdana, Geneva, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
	text-align: center;
	background: url(images/fond.gif) no-repeat 0 0;
	}
#global {
	position: relative;
	min-height: 100%;
	width: 710px;
	margin: 0 auto;
	padding: 0 0px;
	background: url(images/fausbord.gif) center repeat-y;
	text-align: left;
	font-size: 70%;
	line-height: 150%;
	}

Pour être franc, je suis confus avec l'utilisation de position (absolute ou relative...) Ce que je crois comprendre, c'est que le footer est en bas de global, dans tous les cas, hors il reste en bas de l'écran...(c-à-d en bas de body? ou html?)

Enfin dernier élément : si dans #global, je remplace min-height par height, alors IE7 se comporte comme opera (mais ni IE6 ni Firefox!!) Là encore je comprends que min-height c'est pour forcer la page à faire la taille de l'écran même si son contenu est plus petit... correct?


Je suis bien certain qu'il doit y avoir une solution, je compte sur vos lumières,

D'avance merci,

JF
Modifié par fxbrg (17 Apr 2007 - 15:13)

Je me réponds tout seul, mais je n'ai toujours pas la solution

J'ai mis un "border" sur mes différentes boites pour voir ce qui se passe. En fait sous opera, c'est le conteneur "Global" qui ne fait "que" la taille de l'écran et non celle de la page. C'est-y pas bizarre? Avec les autres, le conteneur englobe bien toute la page, quelle que soit sa longueur...

A vous lire, merci d'avance!!

JF

Je continue avec mon diagnostic...

Encore avec border, il se trouve que sous Opera (et pas sou sles autres pré cités), le conteneur html body ne fait aussi QUE la taille de l'écran...

Bizarre again,

JF

bonjour,

ce souci , si il est au redimensionement de la page , c'est un vieux bug d'opera , qui traine encore et dont IE7 semble avoir bizarrement herité.

Pour replacer alors le pied dans ce cas (rafraichir le layout sans recharger la page) il te faut alors ajouter une regle sur html (ou body en html) pour provoqué ce "replacement".

html:hover:after {
content:'';
}

regle css qui ne fait rien sauf provoque un recalcul du positionement des element a l'affichage. (peut provoquer des desagrement visuel si la page comporte des objets , comme des "flash") piste a tenter et tester (sinon peut-etre voir pour "compenser" ce "defaut" avec un javascript).

Si ton probleme est autre que lier au redimensionement de la fenêtre , un lien ou le code html/css qui met le bug en evidence devrait permettre de comprendre un peu mieux ton soucis.

gc

<edit> le doctype (avec lequel ou sans) a aussi son importance , les regles css ne seront pas forcement interpréte de la même façon </>
Modifié par gcyrillus (17 Apr 2007 - 14:21)

Je veux pas t'embêter plus que ca: mais tu vas te faire enkikiné par les modérateur si tu met pas [ code ][ /code ] autour des zone de code ^^

sinon pour ton code: tu devrais définir que ton global est la grosse boite de ton site et tu la place en --> absolute
et tout ce qui se trouvent dans ton global se placera en relative par rapport a ton container général ("global" dans ce cas)

de cette manière ton footer se déplacera en fonction des informations contenu dans ton site !
Je vois pas bien comment est ton site ... pourrais-tu nous en montrer un bout ? une maquette ou autre ! C'est possible que ce que je dis sois complètement faut faut que je regardes comment tu disposes tes éléments !
sinon le code en entier !

a bientot
Modifié par Chum (17 Apr 2007 - 14:37)

Merci Chum, je me demandais comment faire pour mettre le code en évidence... Maintenant je sais, je recommencerai pas...

Pour ce qui est de mettre global en absolu, il est en relative pour le centrage horizontal...

Je vais voir ce que dit Gcyrillus et je reviens vous dire

Merci en tout cas,

JF

Pour le centrage tu n'es pas obligé de le mettre en relative pour le centré ^^

#global{
   position:absolute;
   left:50%;
   top:50%;
   height:100px;
   width:300px;
   margin-left:-150px;
   margin-top:-50px;
}

il centre global au centre de ta page en vertical et horizontal !

#global{
   position:absolute;
   left:50%;
   height:100px;
   width:300px;
   margin-left:-150px;
}

La il le centre uniquement en horizontal !



P.S. oublie pas de rééditer ton premier poste pour mettre ton code entre [ CODE][ /CODE] sans les espaces ^^
Modifié par Chum (17 Apr 2007 - 14:38)

Ca y est!!

Gcyrillus, désolé, mais ce n'est pas la solution (parce que pas le problème, c'est systématique, pas seulement au rafraichissement). Merci quand même de toute façon

Chum, entre tes deux posts,
- j'ai modifié le code dans mon premier message,
- inséré une boite supplémentaire dans la première, avec position: absolute, ça marchait...
- et finalement, fait comme tu dis, centrage horizontal seulement.

Et là, super sur Opera, Firefox, IE7, IE6!! Wow, de la balle, comme dirait ma fille

Avant de te remercier, est-ce que les navigateurs/résolutions testés sont suffisants, ou bien devrai-je en installer/configurer d'autres? Conseils bienvenus,

MERCI!!

JF

ps : euh, et une petite dernière pour la route : pour mettre "Résolu", faut que j'édite le titre?