Bonjour,
Voilà, je vous explique en gros la structure de mon site. J'ai un bloc "tête" (un bandeau en haut du site), un bloc "gauche" (contenant un menu) et un bloc "droit" (pour le contenu proprement dit), et enfin un bloc "pied" (vous vous en doutez, une bande tout en bas de la page).
Alors, en gros pour réaliser cette structure, j'ai décidé de mettre le bloc "gauche" en float: left de taille fixe, disons 20em. Le bloc "droit" lui a simplement une marge gauche de 21em. Le "pied" est en both: clear. A priori, c'est super simple, mais j'en ai bavé pour que les blocs "gauche" et "droit" s'affichent bel et bien côte à côte (sur IE et sur Firefox). Y avait toujours bien une connerie qui faisait que le bloc "droit" s'affichait en dessous du bloc gauche ... Du genre, si mon bloc droit contenait un ul ayant la propriété width: 100%, le bloc droit glissait illico en bas de la page (donc pas à côté du bloc gauche quoi) sous IE (me souviens plus pour Firefox)... Le genre de soucis totalement incompréhensibles auquels on a droit lorsqu'on utilise des positionnements CSS, mais passons.
Venons enfin à mon problème. J'ai donc un bloc droit où je peux mettre le contenu que je veux ... Ouais. Bon, imaginons maintenant que le contenu de ce bloc droit se résume uniquement à une belle grande image, disons 750 pixels de largeur (on se fiche de la longueur). Je suis en 1024, la fenêtre de mon browser est maximisée, sa largeur est suffisante pour afficher toute la largeur de ma page web, ok. Et si je réduis la largeur de ma fenêtre maintenant, qu'est-ce qui se passe? Sous Firefox, tout va bien, dès que la largeur de la fenêtre devient insuffisante pour tout voir, y a une gentille scrollbar horizontale qui s'affiche, et les deux blocs gauche et droit restent bien sagement côte à côte. Mais sous IE ... Oooooooooh, qu'est-ce que je m'aperçois-je? Juste au moment où la largeur de la fenêtre devient trop petite, cet espèce d'abruti de la pire espèce (sorry mais y a pas d'autres mots) fait glisser l'entierté du bloc droit en dessous du bloc gauche... Clap clap clap, merci IE! C'est d'autant plus inutile que faire glisser le bloc droit en dessous ne diminue en rien la largeur totale de la page (puisque le bloc droit à une marge gauche de 21em, vous me suivez toujours?).
Là certains d'entre vous me diront "pas grave suffit de visiter ton site avec un browser maximisé". Bon déjà, c'est pas top du tout, mais en plus, ça fonctionne que pour les résolutions suffisamment élevées. Et oui, avec une résolution de 800*600, même un browser maximisé ne peut afficher toute la largeur de ma page. Résultat, le bloc droit glisse en bas du bloc gauche, et le site devient pour ainsi dire inutilisable.
Que faire? Avez vous quelques conseils à me donner? Peut-être est-ce l'architecture même de mon site qui ne convient? Je ne sais vraiment plus quoi essayé. Notez que j'ai essayé de mettre mon bloc droit en float: left ou en float: right, mais ça n'a strictement rien changé. J'ai aussi essayé de mettre le bloc gauche en positionnement absolu plutôt que flottant ... toujours aucunes améliorations
Merci.
Modifié par twkjp (05 Feb 2006 - 06:37)
Voilà, je vous explique en gros la structure de mon site. J'ai un bloc "tête" (un bandeau en haut du site), un bloc "gauche" (contenant un menu) et un bloc "droit" (pour le contenu proprement dit), et enfin un bloc "pied" (vous vous en doutez, une bande tout en bas de la page).
Alors, en gros pour réaliser cette structure, j'ai décidé de mettre le bloc "gauche" en float: left de taille fixe, disons 20em. Le bloc "droit" lui a simplement une marge gauche de 21em. Le "pied" est en both: clear. A priori, c'est super simple, mais j'en ai bavé pour que les blocs "gauche" et "droit" s'affichent bel et bien côte à côte (sur IE et sur Firefox). Y avait toujours bien une connerie qui faisait que le bloc "droit" s'affichait en dessous du bloc gauche ... Du genre, si mon bloc droit contenait un ul ayant la propriété width: 100%, le bloc droit glissait illico en bas de la page (donc pas à côté du bloc gauche quoi) sous IE (me souviens plus pour Firefox)... Le genre de soucis totalement incompréhensibles auquels on a droit lorsqu'on utilise des positionnements CSS, mais passons.
Venons enfin à mon problème. J'ai donc un bloc droit où je peux mettre le contenu que je veux ... Ouais. Bon, imaginons maintenant que le contenu de ce bloc droit se résume uniquement à une belle grande image, disons 750 pixels de largeur (on se fiche de la longueur). Je suis en 1024, la fenêtre de mon browser est maximisée, sa largeur est suffisante pour afficher toute la largeur de ma page web, ok. Et si je réduis la largeur de ma fenêtre maintenant, qu'est-ce qui se passe? Sous Firefox, tout va bien, dès que la largeur de la fenêtre devient insuffisante pour tout voir, y a une gentille scrollbar horizontale qui s'affiche, et les deux blocs gauche et droit restent bien sagement côte à côte. Mais sous IE ... Oooooooooh, qu'est-ce que je m'aperçois-je? Juste au moment où la largeur de la fenêtre devient trop petite, cet espèce d'abruti de la pire espèce (sorry mais y a pas d'autres mots) fait glisser l'entierté du bloc droit en dessous du bloc gauche... Clap clap clap, merci IE! C'est d'autant plus inutile que faire glisser le bloc droit en dessous ne diminue en rien la largeur totale de la page (puisque le bloc droit à une marge gauche de 21em, vous me suivez toujours?).
Là certains d'entre vous me diront "pas grave suffit de visiter ton site avec un browser maximisé". Bon déjà, c'est pas top du tout, mais en plus, ça fonctionne que pour les résolutions suffisamment élevées. Et oui, avec une résolution de 800*600, même un browser maximisé ne peut afficher toute la largeur de ma page. Résultat, le bloc droit glisse en bas du bloc gauche, et le site devient pour ainsi dire inutilisable.
Que faire? Avez vous quelques conseils à me donner? Peut-être est-ce l'architecture même de mon site qui ne convient? Je ne sais vraiment plus quoi essayé. Notez que j'ai essayé de mettre mon bloc droit en float: left ou en float: right, mais ça n'a strictement rien changé. J'ai aussi essayé de mettre le bloc gauche en positionnement absolu plutôt que flottant ... toujours aucunes améliorations
Merci.
Modifié par twkjp (05 Feb 2006 - 06:37)