Css Zen Garden et Internet Explorer [Résolu]

Bonjour à tous,

Je me pose quelques questions sur un des sites qui a été choisi dernièrement par le projet Css Zen Garden.

En fait, pour la petite histoire, je suis en train de travailler sur un projet de site pour un animateur/chroniqueur télé (spécialisé dans le divertissement).

Je dois donc trouver quelque chose d'original et d'accrocheur pour l'interface du site. J'ai envie de lui faire une interface en forme d'ancienne télé (menu de navigation sur les boutons, contenu à l'intérieur de l'écran avec possibilité de scroller pour voir l'entièreté de ce contenu.

Ce qui fais que j'ai été voir un des derniers sites reprenant le même genre de système de ce que je veux faire et qui est affiché via le Css Zen Garden, le voici : cliquez ici

Donc, je suis allé le voir avec Firefox, aucun problème, sur IE 7, Opera et Netscape non plus d'ailleurs, par contre avec IE 6 et antérieurs là, ça coince, je vous ai fais des screenshots pour que vous puissiez constater par vous-mêmes.

Avec FF :



Avec IE 6 :



Avec IE 5 :



Donc, voilà, je m'inquiète un peu de voir ce résultat qui pourrait foutre en l'air toute mon interface sur IE 6 et antérieurs.

Par conséquent, la question que je veux vous poser est : est-ce que vous connaissez d'autres sites avec le même genre de présentation et avec lesquels il n'y a aucun bug d'affichage comme dans l'exemple cité ci-dessus ?

Merci d'avance pour votre aide

PS : Je précise que ce n'est pas pour faire du bête copier/coller avec le code mais bien de l'examiner et de comprendre comment il est réalisé.
Modifié par touvert (14 Jun 2007 - 17:55)

touvert a écrit :
par contre avec IE 6 et antérieurs là, ça coince

Ça coince avec IE5, effectivement. Le rendu d'IE6, par contre, m'a l'air très correct, non ? C'est même beaucoup plus ergonomique (car beaucoup moins de place de perdu) que le rendu sous Firefox & co.

En tout cas, c'est une démonstration technique sympathique (quand l'image de fond qui simule un écran de cinéma ne fait pas ramer le navigateur horriblement... ce qui est le cas chez moi avec tous les navigateurs, sauf Konqueror qui désactive l'animation du GIF...). Mais les défauts ergonomiques sont trop flagrants pour que ça puisse être utilisé pour un vrai site...

Ah oui : et il est préférable, quand on a la main sur le HTML, d'utiliser des commentaires conditionnels pour cibler les vieilles versions d'IE.

En passant :
http://web.covertprestige.info/test/21-mise-en-page-position-fixed-3.html
http://web.covertprestige.info/test/21-mise-en-page-position-fixed-5.html

Florent V. a écrit :
Le rendu d'IE6, par contre, m'a l'air très correct, non ? C'est même beaucoup plus ergonomique (car beaucoup moins de place de perdu) que le rendu sous Firefox & co.

Bonsoir Florent et merci de te pencher sur ce sujet ,

en fait, oui, ça fonctionne bien avec IE 6 mais dans mon cas précis, c'est un peu plus embêtant parce que ça impliquerait que le bord inférieur de la fameuse télé soit envoyé tout au fond de la page.

Admettons par exemple que le conteneur reprenant les textes, images et compagnie ferait 5000 pixels de haut, eh bien à ce moment là, sur IE 6, le bord inférieur de ma télé se retrouverait bien loin juste en dessous des 5000 pixels du conteneur de texte, ce qui ferait complètement tout disloquer (ça donne pour l'exemple du cinéma de Css Zen Garden une salle obscure avec un écran de plusieurs mètres de hauteur lol).

Alors que sur FF, tout s'afficherait bien puisque le bord inférieur resterait au dessus du conteneur de texte.

Donc, par conséquent, je crois qu'il va falloir que je passe par un conteneur de texte en overflow, ça sera moins beau à cause des barres de scroll mais à mon avis, c'est le seul moyen d'obtenir ce que je veux.

Merci quand même pour le coup de main

touvert a écrit :
Donc, par conséquent, je crois qu'il va falloir que je passe par un conteneur de texte en overflow, ça sera moins beau à cause des barres de scroll mais à mon avis, c'est le seul moyen d'obtenir ce que je veux.

Tu as jeté un oeil à mes exemples ?

Le fait qu'une partie des en-tête et pied de page disparaissent avec le rendu dans IE6 n'est pas une obligation, mais bien un choix de mis en page (ou la conséquence d'un choix de mise en page).

Avec le positionnement fixe et des commentaires conditionnels, tu devrais arriver à faire quelque chose de correct.

Florent V. a écrit :
Tu as jeté un oeil à mes exemples ?

Oui, j'ai regardé en vitesse pour le rendu graphique dans IE 6, malheureusement, je n'avais pas le temps de les examiner en profondeur à ce moment.

a écrit :
Avec le positionnement fixe et des commentaires conditionnels, tu devrais arriver à faire quelque chose de correct.

Ok, je vais regarder à ça alors

<edit>Merci pour les informations qui ont été données. En réexaminant la situation, j'ai décidé de faire un site plus classique certes, mais qui avantage plus l'utilisateur final dans le sens où la solution à laquelle je voulais arriver diminuait l'espace utile de mes textes. Cepdendant, je mets tout de même le sujet comme étant résolu puisque Florent a apporté une solution précise au problème. </edit>
Modifié par touvert (14 Jun 2007 - 17:54)