Version complète: sur le forum Webmaster Hub : Pb mise en page IE6/Firefox...
Webmaster Hub > Création et exploitation de Sites Internet > Les fondations d'un site > Le Webdesign
ronus
Bonjour tout le monde,
J’espère que vous allez pouvoir m'évité de me jetez par la fenêtre (avec mon PC, il l'a bien mérité!)

Je tente de concevoir un site assez simple (html+css), surtout pour des pros du wouaib comme vous, mais je ne m'en sors pas avec les différences de mise en page entre les différents browsers...

Si vous avez une solution générale pour éviter ce problème récurrent, je suis preneur!

Sinon, voici l'exemple de ce qui me perturbe profondément (j'ai essayé de simplifié au minimum, il y a une image, pas très important, et je pense beaucoup de code inutile!):

html:
CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
_AT_import "styles.css";

</style>

</head>

<body>
<div id="tout">
<div id="header">
<div id="titre">TITRE</div>

<div id="logo">
LOGO
</div>
</div>

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

<div id="content">CONTENT</div>

<div id="footer">
<div id="pub">PUB</div>
<div id="copy">COPY </div>

</div>

</body>
</html>



et le CSS:
CODE


/* CSS Document */

ccWeb/styles.css

html { margin: 0px; }

* {margin:0; padding:0}



body {
margin: 0px ;
padding: 0px 0px 0px 0px;
font: 12px Century Gothic;
text-align: center;
text-decoration: none;
}

#tout {
margin: 0px auto;
min-width: 900px;
width: 900px;
}
#header {
height: 35px;
width: 900px;
background: #ffffff;
}

#logo {
text-align: right;
width: 900px;
height: 112px;
}


#menu { margin: 0px auto;
height: 25px;
width: 900px;
background: url('images/site/menu.gif') no-repeat;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}


#footer {
clear: both;
position: relative;
}




DONC, mon problème existentiel:
Sous IE6 "menu" se place sous "header" en laissant la place de "logo" et "titre" (qui sont en gros 2 images)
Sous FireFox "menu" se place...je ne sais pas trop ou? Mais il ne tien apparemment pas compte des éléments antérieur...

Comment puis-je faire pour placer tous ça au même endroit dans ces 2 navigateurs??
J’espère que quelqu'un me sauvera de ma déprime, même si cela vous parait une question con, merci d'avance!!

Ronan.
Dan
Sans avoir de lien pour valider le code et le positionnement, je te dirais de mettre un clear:left à ta <div> #menu.
Cela devrait la forcer à gauche... sous le header (si tu enlèves le text-align:center du body).

Par contre, tu es certain de ce "text-align:center" dans le <body> ?
Tu veux tout centrer sur ta page ?

Dan
ronus
eu, voici un lien pour voir le résultat

je suis "bien sur pas sur" de mon "text-align:center" dans le body, mais je voulai me concentrer sur le positionnement vertical, donc jai tout, tou centré ce que je pouvai.... blink.gif

quand a tout forcer a gauche? cela va t'il changer l'interprétation du positionement vertical?
j'essai! merci pour le feedback à la vitesse de la lumiere!
Dan
C'est le clear:left qui va changer cela, pas le text-align wink.gif

Avec un clear:left, tu signales que ce bloc doit être "libre à gauche", c'est à dire qu'il doit être le premier élément sur cette ligne.
drakulls
bon...

déja il te manque un </div> en bas de page...

ensuite tu ne positionne rien..
ni en relative, ni en absolute.
à ce moment tu pourras jouer avec tes float.

vu le gabarit que tu veux avoir, je te propose de partir de celui-ci :
gabarit alsacreation

lis le correctement et tu n'aura plus qu'a inserer dans le header ta div logo en relative par rapport au header...

c'est peut etre un peu confus.... biggrin.gif

mais si tu analyse correctement ce gabarit tu comprendras deja bcp mieux les bases...
ronus
ben, eu, j'ai bien enlevé le text align,

mais avec le clear: left, rien en change...?
Dan
En regardant le lien, je vois bien le menu où il est supposé se trouver, non ?

Mais il est vrai qu'il te manque une </div> tout en bas, bien vu drakulls :up:
ronus
ben si tu l'ouvre avec firefox ou IE, il n'est pas au meme endroi...

je partait du meme exemple mais sur un site ricain, merci pour le lien en french et le </div>

maintenant, il est vrai qu'il vau ptete mieu que je reprenne le "chemin de l'ecole" avec ça pluto que de vous assasiné de question...

et je ne positionne rien, parceque quoi que je positionne, il y a toujours le meme décalage que celui de l'exemple...

"comprend po"
"comprend po"
drakulls
CITATION
maintenant, il est vrai qu'il vau ptete mieu que je reprenne le "chemin de l'ecole" avec ça pluto que de vous assasiné de question...


biggrin.gif ce n'est pas ce que je voulais dire rassures toi... mais c'est je crois le meileur moyen de comprendre ton erreur . Mais je suis tjrs ravi de pouvoir aider biggrin.gif

je dois avouer d'ailleurs qu'en copiant collant ton code c'est pas facile de trouver l'erreur....

et recommencer plus clairement est a mon avis la meilleur solution.
positionne systematiquement tes div.

voili voilou...
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.