Encore un bug d'affichage sur IE.

Bonjour à tous !

Je me permets, alors que complètement désemparé, de solliciter votre aide. En effet, je commences un projet Web, et à peine avancé, Internet Explorer veut déjà me mettre des bâtons dans les roues. Comme à mon habitude, je développe sous FF, et je testes ensuite sous les autres navigateurs au fur et à mesure de mon avancement. Et là, premier test, et bim IE m'affiche n'importe quoi ! ( Comme si je ne m'y attendais pas ... )

Je vous propose de regarder --> ici <-- la page en question. ( Commencez par utiliser FF ou Google Chrome, pour voir ce à quoi elle devrait ressembler. )
( Dsl, hébergeur un peu lent, et freeze à certains moments ^^ )

Vous remarquerez que j'ai refait toute la page selon un modèle ( tutoriel ) trouvé sur ce site même. Je pensais qu'il me corrigerais mon problème, mais non, je n'ai pas trouvé ce qui n'allait pas.

J'explique donc le soucis :
Le principe de la mise en page effectuée est de s'adapter aux petites résolutions : la div "global" se réduit automatiquement à 950px de large Minimum, et s'agrandit à un maximum de 1250px de large, selon la taille de l'explorateur de l'utilisateur.

La div global est en position absolute, de même que sa soeur, globalLeft, qui elle ne sert qu'à déployer sur la gauche, le reste de l'image de fond.

Dans cette div global, on a donc, une div "header", une div "center", et une "footer", tous trois en position absolute.

Dans la div "center", on trouveras donc la div "content", en absolute également, avec un margin-right:294px, qui équivaut à la largeur du menu de droite, et donc la div appelée "sidebar".

Voilà donc la construction générale de la page. Seulement, j'ai l'impression que je cherches mon erreur au mauvais endroit. je ne sais donc pas pourquoi sous IE, la div Global passe par dessus la div globalLeft. Je ne sais pas pourquoi elle ne s'aligne pas à droite de la fenêtre comme sous les autres explorateurs. Je suis perdu, je sèches, et j'espère pouvoir trouver ici, une fois de plus, réponse à mon soucis ^^

Merci d'avance infiniment !!

Ah... Et je précise que la différence d'affichage entre les deux explorateurs ne sera visible que sur des écran à résolution supérieur à 1024x780.

Bonjour,

Ton problème est plus 'grave' qu'il n'y parait.

As tu essayé de réduire ta fenêtre de navigateur a 500px de largeur par exemple ?

Ta mise en page ne nécessite pas un positionnement en absolu, c'est de là que viennent tout tes problémes.
Base toi sur une mise en forme classique a l'aide des flottants.
IE6 ne prendra pas en compte tes min/max width/height et aura quelques petits defaut de marge sur les flottants facilement gerable si un soucis apparait.

Bon courage,

GC

Ah, et encore une petite précision ( non, non ce post n'est pas un monologue ^^ )

Si je précise width:1250px au lieu de width:auto pour la div "global", l'affichage est correct ... Enfin presque ... Je veux justement utiliser les propriétés max-width et min-width pour faire varier la largeur de mon site entre 950 et 1250px. ( j'en ai marre des sites à 950px de large, quand on voit les résolutions d'écran d'aujourd'hui ... ). Donc si je met width:1250px, la largeur de la div global ne variera pas. Ça n'est donc pas ce que je veux.

Je précise que j'ai testé avec IE8, qui normalement reconnait les propriétés min-width et max-width.
Pour la compatibilité avec IE6, j'espère que ce tutoriel m'aidera. ( Et euuuh, au passage, si Javascript est désactivé, la méthode expliquée dans ce tutoriel ne fonctionnera pas ?? )

Merci d'avance !

Hello Gc

Merci pour ta réponse !
Si on réduit la fenêtre du navigateur à 500px, soit donc à une valeur inférieure à 950px, le site ne tiendras effectivement pas dans la page. J'ai fait ce choix parce que le site aura beaucoup de contenu. Et tout faire tenir sur un cadre inférieur à 950px sera tout bonnement impossible. Il y'aura donc une scrollbar horizontale pour les utilisateurs d'écrans datant de Mathusalem.

J'ai effectivement beaucoup de div en position absolute. Ca n'est d'ailleurs pas dans mon habitude de les utiliser. Mais après plusieurs essais, j'ai du me tourner vers eux.
Pour ce qui est de l'utilisation des Floats, j'ai tenté, et ça n'a pas fonctionné.
En fait, l'image de Background est coupée en deux. Il y'a la bannière en haut ( avec marqué sc2downloads ) et l'image à gauche. La bannière du haut doit être alignée à gauche de la div global, ( d'autant plus que que la div global doit être alignée à droite de l'écran ! ), et l'image de fond de gauche est alignée à droite de la div globalLeft, sachant que cette même div globalLeft doit être alignée contre global ( je ne sais pas si je me fais bien comprendre )

Que me proposes-tu ? Il faudrait que mes div global et globalLeft soi en position relative avec float left et float right ? Qu'est-ce qui pose problème exactement dans l'utilisation de ces positions absolute ?

merci beaucoup !

(Pour IE6 le tuto est bon , juste qu'il faut passer le min-width et max-width sur deux elements differents pour eviter de voir IE6 mouliner et planter.)

Applique donc un min-width:950px a body par exemple. et un max-width:1250px; a ton conteneur global.

Met global en float:right; et applique un

body:after {content:'';display:block;clear:both;height:0;}

Ensuite , dans globale positionne tes elements en flottants .

Quand tu as fait ceci , reprend la distribution des fonds et au besoin ajoute un conteneur pour reproduire la technique dites des 'colonnes factices' , si ton conteneur globale ne suffit pas.

GC

Je ne connais pas cette méthode de body:after ^^
Quoi qu'il en soit, ça ne fonctionne pas

Rien à faire, la div global ne veut pas s'aligner à droite de l'écran. Enfin si, elle va s'aligner à droite, mais au lieu de garder pour largeur maximale 1250px, elle va s'élargir jusqu'à attendre le bord droit de la page. Du coup, j'ai un conteneur global bien trop large.

Je vais réaliser rapidement un petit schéma simplifié de ce que je comptes faire, et refaire une page, en utilisant les flottants, et en supprimant tous les autres éléments gênants ( headers, footers etc. ) pour essayer de comprendre ce qui ne fonctionne pas.
Je post ça dans 10 minutes ^^

Petit schéma rapide donc :
http://www.tom-portfolio.fr/sc2/schema.jpg

Je pensais donc mettre à la div globalLeft comme attribut position:absolute et un margin-right:1250px. En effet, cette div ne contient qu'une image de fond qui va combler le vide de la page. Ca ne pose donc pas de problème si elle sort de la page dans les résolutions inférieures ( par exemple, pour les cas n°1 et 2. )

Pour la div global, je pensais la mettre en position static, avec float right. Malheureusement, sous IE, cette div, ayant pour propriété max-width:1250px, prend dans les 3 cas l'intégralité de la largeur de la page.

- Sous IE, ne peut-on pas poser une div, alignée à droite, qui ne ferais pas la totalité de largeur de la page ?
- Ou alors, devrais-je peut être rajouter un autre conteneur ?
Par exemple :

<div id="conteneur">
  <div id="globalLeft"></div>
  <div id="global"></div>
</div>

Mon problème initial vient bel et bel de là, puisque je n'arrives même pas à réaliser sous forme d'html/css le schéma que j'ai dessiné.

Au secours ! lol

bonjour,

(Pour la methode :after{clear:both;} il s'agit d'une des possibilité permettant a un conteneur de s'etirer si il contient des flottants . )

Le corps de ta page , c'est 2 colonnes , mise en forme classique a l'aide de flottants :ou le menu , ou le contenu ou les deux , le plus simple et solide est 1 flottant en taille fixe (menu) + 1 dans le flux (contenu).

L'entete : tu peut recourir au positionement en absolu pour placé le menu rapide et la recherche, c'est aussi plus simple et solide comme ça.

Le pied : positionement fixed c'est aussi efficace et ça se degrade naturellement dans IE6.

Reste ensuite a faire glisser l'ensemble a droite au dela des 1250px de largeur d'ecran. float semble s'imposer de lui même.

exemple : http://gcyrillus.free.fr/essai/i2.html Ce n'est pas forcement la meilleure solution, mais ça reprend la piste initialement proposée.

Remarque l'usage du h1 manquant pour l'image de gauche.

Cordialement , GC

Pwaaa, alors là, un grand merci !!

Je revenais pour poster mon avancement : 2ème essai.
J'ai donc tout refait en suivant ton conseil, et en utilisant les float. Seulement, j'ai encore un problème avec ma div sidebar qui passe en dessous de content si on réduit la fenêtre. Apparemment, ceci ne t'a pas posé de problèmes ^^

En tout cas, je te remercie infiniment de l'effort fourni ! c'est vraiment beaucoup de cheveux que tu viens de me sauver là :-p

Je vais décortiquer ton code, le comparer au mien, voir ce que j'ai fait d'incorrect.

Je te tiens au courant ! Et encore merci énormément !!!

Alors, en même temps que je lis ton code, des remarques, ou mêmes des questions me viennent en tête. Il est clair que je ne suis pas venu ici pour avoir une réponse toute faite, mais, chanceux que je suis et grâce à toi, je l'ai eu. Je ne vais tout de même pas en rester là, car le but de la manoeuvre est tout de même de comprendre la méthode.
Donc, mes petites remarques sur ce que j'ai pu voir :

- Le coup du h1, avec un Background-image et un text-indent de -999px : Vraiment très astucieux ! J'avais déjà lu cette méthode sur Alsa justement, mais jamais je ne penses à l'utiliser ! Merci bien ^^

- Le form : Je ne pensais même pas pouvoir attribuer une position absolute à une balise form ^^. Après tout, pourquoi pas, c'est un élément de type bloc ? c'est bien ça ? J'ai tendance à trop utiliser les div, et à souvent oublier l'utilisation des autres balises, ou bien à systématiquement les intégrer dans une div ^^ Il va falloir que je m'améliore sur ce point :-p

- Par contre, ça, je ne comprends pas :
Dans l'ordre, tu as mis, <div id="nav"> ... </div>, puis <div id="content">...</div>
Ce sont là deux div en position static. Ce que je ne comprends donc pas, c'est pourquoi a-t-il fallu mettre la div "nav" (en float right) AVANT la div "content" ? La logique ne voudrait-elle pas qu'on place une div censée apparaitre à gauche, en premier, et la div censée apparaitre à droite, en dessous de cette dernière ?
( ps : oui, j'ai des lacunes avec les notions de flux etc ... )

- Pour le footer en position fixed, qui "se degrade naturellement dans IE6" : Cela veut dire que l'utilisation d'une position:fixed va poser problème sous IE6 ?

Voilà, je crois que j'ai à peu près fait le tour de mes quelques remarques. Je crois que je ne peux à ce stade qu'encore te remercier de l'aide fournie !
Modifié par 28ToM47 (20 Oct 2010 - 13:34)

re,

J'ai repasser nav devant le contenu , car celle-ci est en float et de largeur fixe. situation la plus simple et solide pour mettre 2 conteneur cote a cote lorsque le second est de largeur fluide. Ton quickMenu aide a sauter cette portion a ceux qui le desirent.

nav et content sont deux portions différentes . le contenu spécifique de la page et la navigation commune a toutes les pages parfois incluse dans le header et de fait devant le contenu ... en fait pas de règles précises, les liens rapide en amont facilite la navigation dans la page pour les visiteurs qui en auraient besoin.

Position fixed ne passe pas dans IE , ton footer restera dans le flux en fin de contenu.

form est effectivement un élément qui se comporte en type block dans le flux. Le positionnement absolu fait en partie abstraction de display . Extrait du flux , les éléments n'ont plus de taille ni d'interaction avec les éléments resté dans le flux. Un élément de type inline peut-être positionné en absolu et être dimensionné.

Bon apprentissage et bonne découvertes

GC