[RESOLU] 100% Firefox | IE | Safari

Salut, je termine un site, et je me rends compte, par hasard, que j'ai un Bug sous FF, SAFARI & IE ...

Page en ligne:
http://apache.masta.be/ditl/home.html

EN gros, lorsque je redimensionne ma fenêtre, de manière a avoir un ascenseur horizontal, et que je sélectionne cet ascenseur vers la droite, je vois que mon footer et mon header ne prennent pas 100% comme valeur.

J'ai testé les commentaires conditionnels, sans succès...

Sous Safari, pas de stress.

Une idée?
Modifié par FranZz (04 Dec 2008 - 16:53)

Bonjour, Mon post n'intéresse personne ou est ma formulé?

Hello FranZz,
Je m'arrache les cheveux sur ce bug depuis un moment aussi...

Si la largeur de tes éléments dépendent directement de la taille de "body", ceux-ci se retrouvent coupé à la largeur de la fenêtre du navigateur au moment du refresh.
(Je ne sais pas si c'est clair, ce que je dis là...)



Contraindre la largeur du conteneur principal à une taille en em par exemple ne pose plus de soucis lors du zoom, mais, evidemment, n'est pas ce qu'on cherche à faire.

Ton header prend la largeur du body, or, on dirait bien que "body" ne dépasse jamais la taille du navigateur lors du refresh, après un zoom...
...Aucune idée de comment résoudre ça.


Pas de problème sous IE7 en revanche.


Quelqu'un a une idée ?
Modifié par Nigel (02 Dec 2008 - 18:35)

bonsoir,

Oui ,

appliqué un min-width équivalent a la largeur minimale de la page ,
autrement dit celle de #global pour ta page

Ce min-width est aplliqué a body ou #header par exemple , comme il te semblera le plus judicieux.

GC

Si je comprend bien la proposition que tu apporte, il s'agit de contraindre le conteneur principal du site (quelqu'il soit) à une largeur minimale, pour un résultat dépendant de la résolution de l'écran...

Malheureusement, ce n'est pas ce qu'on cherche à faire, en regardant le header du site de FranZz, on remarquera que celui-ci doit prendre systématiquement 100% de la largeur, quelle que soit la résolution, taille de navigateur, etc...
Le bout gauche du header doit toujours toucher le coin gauche de la fenêtre, et le bout droit doit toujours toucher le coin droit du navigateur.

bonjour,

Non , tu n'a pas saisie la logique de la solution que j'apporte , qui d'ailleurs ne met qu'en application l'usage du min-width , la solution n'a rien d'une bidouille , c'est juste l'un des outils/option de mise en forme .

width:100%: est la valeur du viewport (la fenetre de ton navigateur) <edit> En fait il n' y a pas de bug </>.

Lorsque cette fenetre est inferieur a la largeur qu'occupe le contenu , le width:100%; est lui aussi de valeur inférieur. Le min-width empeche donc #header et #footer a se retrecir plus qu'il ne faut .

le width:100%; est d'ailleurs une valeur par défaut des elements de type block , implicite , il n'est donc pas necessaire (sauf si cela resoud un defaut dans IE en conferant le layout).

GC

<edit>Si il est facile d'imposée ce min-width a body , il est peut-etre préferable de l'indiqué aux elements (ici externe a #global) , pour s'assurer que ça passe sans accrochage dans tout les navigateurs , l'heritage d'un min-width par un width , n'est pas logique.</>
Modifié par gcyrillus (03 Dec 2008 - 19:42)

Bien vu, je n'avais pas du tout compris !!
J'avais testé avec un min-width:100% sur le header, puis un min-width plus petit que le contenu du site, et ne voyais d'ailleurs pas bien pourquoi ça aurait changé quoique ce soit.

Mais effectivement, si le min-width est ajusté exactement à la largeur du contenu, les conteneurs dépendants directement de body ne prennent plus la taille de la fenetre du navigateur, mais s'en retrouve poussé obligatoirement par la "largeur du contenu" ...A la manière d'un site web à largeur fixe.


Dans l'exemple précis de FranZz, un min-width de la valeur de #global (1000px), sur #header résoud clairement la problématique.

#header {min-width:1000px;}

Merci infiniement, gcyrillus, je n'avais jamais compris ce comportement - finalement normal - des navigateurs.
C'est pourtant tellement logique une fois qu'on a compris...
Modifié par Nigel (04 Dec 2008 - 16:00)

Nigel a écrit :

C'est pourtant tellement logique une fois qu'on a compris...

:) oui , surtout que je ne suis pas toujours très clair dans mes explications maladroites.
GC

Bon, ben rien à dire, ça fonctionne !!!

M A G N I F I Q U E -----------

Bien vu !

gcyrillus a écrit :

:) oui , surtout que je ne suis pas toujours très clair dans mes explications maladroites.
GC

Je pense que ton explication était très claire, en tout cas aujourd'hui je la vois limpide comme de l'eau pure.
Mais je serais bien incapable de dire pourquoi on ne tilte pas de suite, il y a je pense quelque chose qui nous empêche de comprendre instinctivement le mécanisme.

En l'expliquant croquis à l'appui, exemples concrets, etc, à d'autres compères du Front Office à mes côtés, ils ont tous eu la même réaction, vous savez, le *Tilt*, mais il a eu du mal à venir.
...Très drôle en tout cas !
Modifié par Nigel (05 Dec 2008 - 10:25)