Loupilo Posté 14 Janvier 2004 Posté 14 Janvier 2004 Bonjour, je me suis inscris et je poste car j'ai un [gros] problème. J'ai passé la journée à faire une belle feuille de style, qui marche nickel sous IE, car je teste acec ce navigateur. j'ai esayé d'ouvrir avec mon navigateur, mozilla, et la mauvaise surprise, le menu #cadreprincipal est décalé. je reprends ma feuille de style. je change une ligne et ça marche. test sous IE et cette fois c'est sur ce log que c'est décalé. Je suis desperé..... mon site sera fait (c'est pour ça que j'ai eu recours au css) dans le souci d'accessibilité le plus total et voilà qu'il faudra choisir son navigateur /* * Ce code est la totale propriété de Monde en Détresse, TOUTE REPRODUCTION EST INTERDITE * Il est de plus dans votre intêret d'avoir un site au design original, * pour qu'il ait sa propre identité visuelle, plutôt qu'un design * plagié... */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: rgb(94,112,128); margin-top: 20px; vertical-align: middle; text-align: center; } #boite { width: 780px; vertical-align: middle; \width: 800px; w\idth: 780px; height: 1000px; margin: 0px; margin-left: auto; margin-right: auto; border-top: solid #FFA303 1px; border-bottom: solid #FFA303 1px; border-right: solid #FFA303 1px; border-left: solid #FFA303 1px; padding: 0px; } #header { padding: 5px; margin-bottom: 5px; background-color: rgb(255, 255, 255); background-image: url(images/banniere2.jpg); background-repeat: no-repeat; height: 142px; vertical-align: middle; } #menu { position: relative; top: 177px; left: 0; width: 146px; height: 980px; float: left; background-color: #FFBB03 } #cadreprincipal { position: relative; width: 599px; height: 980px; top: 177px; left: 0px; C'est cette ligne ! Pour mozilla, je remplace 0 par 170 pour que ce ne soit pas décalé ! } .article { color: #000; width: 599px; height: 980px; padding-top: 5px; padding-left: auto; position: relative; background-image: url(images/fond_terre.jpg); background-color: #FFA303; background-repeat: no-repeat; text-align: left; } .menuhorizon { color: #000; padding: 0,5em; margin: 0,5em; position: absolute; left: 140px; top: 143px; } .titre { width: auto; font-weight: bold; color: #A12200; height: 20px; padding-top: 5px; padding-left: auto; border: 1px #000; border-style: none solid none solid; background-color: rgb(252,248,232); background-image: url(images/barre_menu5.gif); background-repeat: repeat-x; text-align: center; } Donc ca m'embete fort, si quelqu'un peut m'aider ce serait super sympa Merci à vous
Beatnykk Posté 14 Janvier 2004 Posté 14 Janvier 2004 bienvenue sur le hub. excuses moi mais est-ce logique de placer ce calque en mode relatif (proportionnel) alors que tu donnes les valeurs en pixels (absolues) ? de plus donner une url de ta page de test nous aiderais à t'aider. ou doit se placer ce #cadreprincipal ? à gauche ? centré ?
Loupilo Posté 14 Janvier 2004 Auteur Posté 14 Janvier 2004 Je vais essayer mais je suis pour l'instant chez free et ils sont out ces d'hebergeurs ! le cadre est au centre et à sa gauche il y a un cadre d emenus. meric à toi
Monique Posté 14 Janvier 2004 Posté 14 Janvier 2004 Bonjour loupilo, bienvenue sur le Hub A défaut de pouvoir mettre une page test en ligne, tu peux coller le code (avec juste un contenu minimum) ici.
Loupilo Posté 14 Janvier 2004 Auteur Posté 14 Janvier 2004 mon hebergeur re marche mais vu toutes les images je vais m'em****** à changer les liens donc je vous joins le code et la capture d'écran qui correspond. Merci à vous <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css" media="all"> _AT_import url(style.css); </style> </head> <body> <div id="boite"> <div id="header"> <div class="menuhorizon"> </div> <div id="menu"> <div class="titre">Menu</div> </div> <div id="cadreprincipal"> <div class="titre">Bienvenue !</div> <div class="article"> Hello !</div> </div> </div> </body> </html> P.S : c'est beau ?
Dan Posté 14 Janvier 2004 Posté 14 Janvier 2004 Salut loupilo, 140 K , c'est un peu lourd pour ceux qui n'ont pas l'ADSL Mais bon, c'est le poids de la copie d'écran et pas celui de ta page... Par contre, tu ne nous dis pas si c'est le rendu sous IE ou mozilla ? Dan
Loupilo Posté 14 Janvier 2004 Auteur Posté 14 Janvier 2004 Image mise à jour en fait, c'est sous mozilla avec la correction de la ligne defectueuse. mais sous mozilla/IE, une fois l'erreur corrigée, le résultat est le même. et sans la ligne corrigée, sur IE/mozilla, le décalage est le même
lapîn Posté 14 Janvier 2004 Posté 14 Janvier 2004 Bonjour #menu { position: relative; top: 177px; left: 0; width: 146px; height: 980px; float: left; background-color: #FFBB03 c'est normal que y ait les 2? je pense que tu devrais enlever "posistion : relative" #cadreprincipal { position: relative; width: 599px; height: 980px; top: 177px; left: 0px; C'est cette ligne ! Pour mozilla, je remplace 0 par 170 pour que ce ne soit pas décalé ! } et ici enlever "position: relative" et mettre float: left à la place. c'est pas mieux? lapin qu'a ptet dit une grosse connerie mais qu'essaie.
Loupilo Posté 15 Janvier 2004 Auteur Posté 15 Janvier 2004 merci mais le cadre principal n'est pas sensé être à gauche, non ? et pour la première idée, je n'en sais rien, je vais tester
Loupilo Posté 16 Janvier 2004 Auteur Posté 16 Janvier 2004 Ca marche ! Il fallait rajouter un "float: right" au cadre principal Maintenant autre pb, j'arrive pas à mettre du texte dans mon menu Pfou.... moi et le css Si qql peut m'aider, ne vous genez pas
Loupilo Posté 16 Janvier 2004 Auteur Posté 16 Janvier 2004 CA MAAARCHE, je sais pas comment, mais ça marche. donc merci à vous
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant