Geckozone

Bonjour,

Je suis en train de créer une page temporaire toute simple pour annoncer un site à venir. Toute simple, mais j'ai une idée assez précise de la présentation que je souhaite lui donner, et je rencontre quelques problèmes pour y parvenir...

La page en construction se trouve ici :
http://www.s427.ch/divers/gp05/gp-temp.htm
(Le texte est volontairement naze, c'est juste pour remplir...)
La feuille de style utilisée est ici :
http://www.s427.ch/divers/gp05/gp-temp.css

J'ai comparé le résultat sur les trois navigateurs que j'ai chez moi. Voici les screenshots respectifs des résultats (je ne mets que la partie qui m'intéresse, le centre de la page) :

Firefox 1

Internet Explorer 6

Opera 7.5



D'abord je ne comprends pas pourquoi, avec Firefox et Opera (mais pas IE), le texte déborde du cadre, sur la droite. Quelle est la logique de cet affichage ? Comment faire pour y remédier ?

Ensuite j'aimerais savoir s'il est possible de faire en sorte que le bloc avec bordure blanche soit centré horizontalement et verticalement sur la page.

Et ce sera tout pour l'instant.

Merci d'avance pour vos commentaires.

Severian427 a écrit :D'abord je ne comprends pas pourquoi, avec Firefox et Opera (mais pas IE), le texte déborde du cadre, sur la droite.

Probablement parce que tu as créé ce code en te basant sur IE. Forcément ça marche bien pour lui.
Pour les autres je ne sais pas exactement ce qui cause la différence. Peut-être un bug d'IE...

Cela dit, si je souligne les éléments bloc (avec WebDeveloper par exemple), je vois que le bord droit du bloc existe et est masqué par quelque chose (quoi ?)

Pour centrer, il y a un tutoriel sur Alsacréations : http://alsacreations.com/articles/centrer/

calimo a écrit :Probablement parce que tu as créé ce code en te basant sur IE. Forcément ça marche bien pour lui.

Pas particulièrement, non... J'ai créé ce code "à la main" en le testant au fur et à mesure sur les trois navigateurs mentionnés. Je ne fais que constater : ça déborde à droite sur Firefox et Opera, pas sur IE6... Ce n'est pas intentionnel...

Je sais qu'Internet Explorer n'est pas très au point du côté des standards web. D'ailleurs l'image de fond du bloc central, plus foncée, est correctement positionnée dans Opera et Firefox, mais pas dans IE. Mais ça c'est un problème que je comprends. En revanche, le résultat qui figure sur me screenshots, je ne comprends pas...

J'ai fait des tas de tests pour modifier les résultats, je n'ai obtenu que des résultats encore plus vilains, et je n'arrive pas à comprendre ce qui cloche dans ma logique...

calimo a écrit :Pour les autres je ne sais pas exactement ce qui cause la différence. Peut-être un bug d'IE...

Ben admettons que c'est un bug d'IE, moi ça m'est égal. La question est plutôt de comprendre le résultat de l'affichage dans Firefox et Opera. Il me semble que je ne fais que déclarer un bloc positionné en fonction des bords de la fenêtre (top et right), avec une bordure et une image de fond. Pourquoi n'est-il pas affiché entièrement... ?

calimo a écrit :Cela dit, si je souligne les éléments bloc (avec WebDeveloper par exemple), je vois que le bord droit du bloc existe et est masqué par quelque chose (quoi ?)

En reprenant la page dans Firefox et en essayant de modifier la taille de la fenêtre (la largeur, principalement), je constate que lorsque la fenêtre est en dessous d'une certaine taille, l'affichage est correct. Lorsque la largeur passe au dessus d'une certaine limite, le "masque" blanc fait son apparition et recouvre la partie droite du bloc... (chez moi je suis en 1280x1024)

Si je mets le texte en noir, je constate qu'il est entièrement lisible. Seule l'image de fond du bloc, et sa bordure, sont masquées...

calimo a écrit :Pour centrer, il y a un tutoriel sur Alsacréations : http://alsacreations.com/articles/centrer/

Merci beaucoup !

Utilise plutôt « top » et « left » au lieu de « top » et « right ».

PsyDk a écrit :Utilise plutôt « top » et « left » au lieu de « top » et « right ».

Le problème se reporte à gauche...

Severian427 a écrit :

PsyDk a écrit :Utilise plutôt « top » et « left » au lieu de « top » et « right ».

Le problème se reporte à gauche...

Non, après ça c'est normal, c'est ton image de fond (la sombre) qui n'est pas assez grande. Ajoute « background-color: #b0b0b0; » dans le style de #main-bloc.

PsyDk a écrit :Non, après ça c'est normal, c'est ton image de fond (la sombre) qui n'est pas assez grande. Ajoute « background-color: #b0b0b0; » dans le style de #main-bloc.

Arrrrgh ! Suis-je bête !! Le problème était aussi simple que ça. En fait ce n'était même pas un problème... Merci beaucoup.