Problème de positionnement bloc div

Bonjour, ça va bientôt faire une journée que je bloc sur un problème de positionnement.

Voici la page en question : http://www.yoshiworld.info/Stockage/Developpement/

L'affichage est correct sous Firefox, mais pas sous IE.

Le but est de placer le bloc rouge à gauche, le bleu aligné à droite, et le blanc en-dessous des 2. Le tout centré sur la page. Regardez avec Firefox pour voir le résultat.

Je suis incapable d'afficher ça correctement sur IE, vous avez une idée?

Merci, je craque......

Des experts du bug t'en dirons plus que moi
Mais, c'est un probleme de marge et de px je crois.
Si tu enleves qq px dans des largeurs de boites, ca devrait rentrer.
Car en fait, ie suppose que ta boite bleu est trop large pour rentrer à droite de la rouge dans le contenaire parent, et du coup, il la mets en dessous.

Tu ne devrais pas spécifer de px comme ca.
a ta place, moi, je chercherais à spécifier une taille uniquement pour la rouge et que la bleu s'entende toute seul sur ce qui lui reste de place
Modifié par nORKy (22 Jun 2006 - 11:41)

En fait si je retire la taille à #banniere (width:780px) ça fonctionne, mais comme je n'indique plus la taille, et bien ma bannière ne peut pas ce centrer, et ça ça m'embête.

Yoshidu62 a écrit :
En fait si je retire la taille à #banniere (width:780px) ça fonctionne, mais comme je n'indique plus la taille, et bien ma bannière ne peut pas ce centrer, et ça ça m'embête.

Non, je ne parle pas du contenaire baniere mais de la boite bleu

Ta boite bleu à t-elle besoin d'une taille fixe ?? si non, enleve lui sa taille. Elle prendra le minimum d'espace en largeur et donc de ton menu.
Par contre, si ton menu s'etends en largeur, elle risque de rebasculer en dessous je crois

nORKy a écrit :
Mais, c'est un probleme de marge et de px je crois.
Si tu enleves qq px dans des largeurs de boites, ca devrait rentrer.

+1

Enlèves quelques px à l'un de tes cadres bleu ou rouge, ou alors rajoutes en quelques uns à ton conteneur principal.

Le problème en enlevant ou ajoutant des pixels, c'est que ma banniere, et le corps en dessous non plus la même taille, ils ne sont donc plus aligné correctement.

Pour info je dois rajouter 3pixels à mon conteneur pour que ça rentre. Comme c'est 3 pixels ne sont pas utiliser, on a l'impression que ma bannière est plus petite que mon corps.

Il te reste donc deux options :

nORKy a écrit :
Ta boite bleu à t-elle besoin d'une taille fixe ?? si non, enleve lui sa taille.

et si tu veux conserver la taille de ton conteneur principal :

Jedi a écrit :
Enlèves quelques px à l'un de tes cadres bleu ou rouge

ce qui aura pour effet de donner à ton ensemble cadre rouge + cadre bleu la même largeur que ton corps.

Donc j'ai enlever la taille de mon block bleu et ça fonctionne, mais maintenant le problème c'est que mon corps n'est pas collé à ma bannière, il est bien positionné en-dessous, bien centré, mais il y a quelques pixels qui séparent mon corps de ma bannière.

Une idée?

Ta bannière, est bien constituée du bloc bleu et du bloc rouge ?!

Si je puis me permettre une question qui ouvrirait la porte à une solution simple et rapide, pourquoi deux blocs ?!

Ne serait il pas plus simple d'avoir une bannière de fond couvrant toute la surface par dessus laquelle tu mettrais une image qui correspondrait à ton bloc bleu ?!

En fait j'ai mis des blocs de couleurs pour faire simple et clair, mais dans mon vrai code, la partie gauche est une image, et la partie droite est un menu, donc deux blocs bien différents.

C'est deux blocs forment ma bannière.

Sous ma bannière j'ai mon corps, et maintenant le problème c'est que mon corps et ma bannière sont séparé par quelques pixels, alors que j'ai bien mis clear:both; et que toutes mes marges internes et externes sont bien à zéro.

Dans ce genre de cas, pour ma part, je définis la bannière qui est l'image de fond (à laquelle j'applique la taille voulue) et par dessus celle-ci j'implémente mon menu.

Un exemple étant toujours plus parlant qu'un long discours, voici un exemple :

XHTML

<div id="head">
<div id="menu">
</div>
</div>

CSS

#head {
width: 750px;
height: 76px;
position: relative;
border: 0;
background-image: url('img/haut.jpg');
background-repeat: no-repeat;
z-index: 100;                         /* Pour que les éventuels liens de mon menu qui seraient amenés à déborder du header soient visible sur le corps */
}

Modifié par Jedi (22 Jun 2006 - 14:19)

Pour reprendre mon problème avec le corps et l'espace avec la bannière, je viens de remarquer que mon bloc qui est bleu (celui de 500px) quand dans celui-ci je met une image qui le rempli (500px de long et 150px de haut), et bien c'est à ce moment là qu'apparait l'espace.

Quand je met seulement un background-color à mes trois blocs, y a pas de problème même sous IE tout es bien positionné, mais dès que je met une image dans mon bloc bleu, boom un décalage avec le corps

[ Edit : j'ai mis à jour le lien, avec le problème de l'image et de l'espace entre le corps et la banniere : http://www.yoshiworld.info/Stockage/Developpement/ ]
Modifié par Yoshidu62 (22 Jun 2006 - 15:20)

Problème résolu, l'espace était du à un espace entre deux balises.

Merci à tous.