ronus Posté 20 Février 2006 Partager Posté 20 Février 2006 Bonjour tout le monde, Jespè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: <!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: /* 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?? Jespère que quelqu'un me sauvera de ma déprime, même si cela vous parait une question con, merci d'avance!! Ronan. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dan Posté 20 Février 2006 Partager Posté 20 Février 2006 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
ronus Posté 20 Février 2006 Auteur Partager Posté 20 Février 2006 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.... 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! Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dan Posté 20 Février 2006 Partager Posté 20 Février 2006 C'est le clear:left qui va changer cela, pas le text-align 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
drakulls Posté 20 Février 2006 Partager Posté 20 Février 2006 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.... mais si tu analyse correctement ce gabarit tu comprendras deja bcp mieux les bases... Lien vers le commentaire Partager sur d’autres sites More sharing options...
ronus Posté 20 Février 2006 Auteur Partager Posté 20 Février 2006 ben, eu, j'ai bien enlevé le text align, mais avec le clear: left, rien en change...? Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dan Posté 20 Février 2006 Partager Posté 20 Février 2006 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
ronus Posté 20 Février 2006 Auteur Partager Posté 20 Février 2006 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" Lien vers le commentaire Partager sur d’autres sites More sharing options...
drakulls Posté 20 Février 2006 Partager Posté 20 Février 2006 (modifié) 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... 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 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... Modifié 20 Février 2006 par drakulls Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant