Partage
  • Partager sur Facebook
  • Partager sur Twitter

Decalage IE/Firefox

    19 décembre 2005 à 19:06:11

    Salut tout le monde.
    Bon mon problème risque de vous parraitre assez courant.

    Bon alors voila jai crée un ptit design de site....
    Seulement il est pa compatible IE, Firefox.

    Voici le site

    Comme vous pouvez le voir, le corps est "décalé" vers la droite.

    Voici le code XHTML


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
    <? include('xxxx/config.php') ?>
           <title>Bienvenue chez moi !</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <meta http-equiv="Content-language" content="fr-FR" />
    <meta name="keywords" content="<? Echo $keywords ?>" />
    <meta name="description" content="<? Echo $description ?>
    " />
    <meta name="robots" content="index,follow,all" />
    <link type="text/css" rel="stylesheet" href="admin-cfg/style1.css" media="screen" />
    </head>
    <body>

    <div id="conteneur">

    <div id="header"></div>
    <div id="menu"></div>
    <div id="contenu"></div>
    <div id="footer"></div>

    </div>

    </body>
    </html>


    Et voici le CSS




    body
    {
         background-image: url("http://renardclement.info/site/images/fond.jpg");
         margin: auto;
             width: 100%;
    }
     
    #conteneur
    {

       width: 798px;
       margin: auto;
    }

    #header
    {

       width: 798px;
       height: 151px;
       background-image: url("http://renardclement.info/site/images/header.jpg");
       background-repeat: no-repeat;
    }

    #menu
    {

       float: left;
       width: 170px;
       height: 400px;
       background-image: url("http://renardclement.info/site/images/menu.jpg");
       background-repeat: repeat-y;
    }

    #contenu
    {

       width: 628px;
       margin-left: 170px;
       height: 400px;
       background-image: url("http://renardclement.info/site/images/contenu.jpg");
       background-repeat: repeat-y;
    }


    #footer
    {

       height: 43px;
       width: 798px;   
       background-image: url("http://renardclement.info/site/images/footer.jpg");
       background-repeat: repeat-x;
    }


    J'ai deja essayer les margin; xx ! important (pour FF) et margin (pour IE) comme j'ai rechercher sur le forum mais cela n'a pa resolu le pb merci de votre aide.
    • Partager sur Facebook
    • Partager sur Twitter
      19 décembre 2005 à 19:52:02

      bonsoir.
      Faudrait dimensionner le body et le contenu avec des "width:XXpx;"
      • Partager sur Facebook
      • Partager sur Twitter
        19 décembre 2005 à 19:57:39

        Salut,

        Je pense qu'il faudrait que tu places tes deux éléments (menu et contenu) tous les deux en flottants, ce qui donnerait :


        #menu {
                float: left;
                width: 170px;
                height: 400px;
                background-image: url("http://renardclement.info/site/images/menu.jpg");
                background-repeat: repeat-y;
                margin: 0;
                padding: 0;
                border: 0;
        }

        #contenu {
                float: left;
                width: 628px;
                height: 400px;
                background-image: url("http://renardclement.info/site/images/contenu.jpg");
                background-repeat: repeat-y;
        }

        #footer {
                height: 43px;
                width: 798px;
                clear: both;
                background-image: url("http://renardclement.info/site/images/footer.jpg");
                background-repeat: repeat-x;
        }


        Normalement, ça devrait fonctionner.
        • Partager sur Facebook
        • Partager sur Twitter
          19 décembre 2005 à 20:14:15

          Désolé au fait jai pas eu le temps de bien formuler dans le premier post j'etais pressé :p

          Ben j'ai essayé, cependant cela ne change rien de redimensionner, et la deuxieme methode, ca fait disparaitre le contenu sous Firefox et sur IE ca le fait flotter en dessous si float left ou right(tu voulais plutot dire fload right je pense pour le contenu).
          • Partager sur Facebook
          • Partager sur Twitter
            19 décembre 2005 à 20:22:06

            Non, je disais bien float: left, de toute façon, right ou left, cela revient exactement au même :p

            Les flottants, c'est pas le top pour construire une page, je préfère de loin utiliser la position absolute :)
            • Partager sur Facebook
            • Partager sur Twitter
              19 décembre 2005 à 20:23:15

              ou tu fais ce qu'on te conseille ou tu te debrouilles, je t'ai dit de commencer par dimensionner le body et le contenu c'est la base on ne construit pas sur du vent
              • Partager sur Facebook
              • Partager sur Twitter
                19 décembre 2005 à 20:26:49

                Tu me l'a conseillé, je l'ai fait, je l'ai dimensionné en largeur .
                Cependant le décalage (de 3px je suppose) existe toujours, c'est pour ca que j'ai reposté, ne le prend pas mal ;)
                • Partager sur Facebook
                • Partager sur Twitter
                  19 décembre 2005 à 20:29:31

                  maintenant que c'est dimensionné tu peux editer ton post et mettre les largeurs que tu as mis apres on travaillera avec ca
                  • Partager sur Facebook
                  • Partager sur Twitter
                    19 décembre 2005 à 20:37:24

                    Et puis c'est bien ce que je pense, j'ai vu sur un autre post que quelqu'un avait parlé d'une marge de 3px pour IE en plus.
                    J'ai fait des test, si je met 626 a 668 pixels, (je devrait avoir 628 pixels normalement), sur IE, le contenu passe en bas, tandis que si je le défini a 625, il passe a droite du menu.

                    Bon peut-etre que mes anciennes methodes ne marchaient pas car j'avais pas voulu définir le contenu, je vais tester 2,3 choses en attendant ;)
                    • Partager sur Facebook
                    • Partager sur Twitter
                      19 décembre 2005 à 20:42:16

                      Essaies en utilisant le positionnement absolu, tu auras moins de problème à mon avis.


                      #conteneur {
                              width: 798px;
                              margin: auto;
                              position: relative;
                      }
                      #header {
                              width: 798px;
                              height: 151px;
                              background-image: url("http://renardclement.info/site/images/header.jpg");
                              background-repeat: no-repeat;
                      }
                      #menu {
                              position: absolute;
                              top: 151px;
                              left: 0;
                              width: 170px;
                              height: 400px;
                              background-image: url("http://renardclement.info/site/images/menu.jpg");
                              background-repeat: repeat-y;
                      }
                      #contenu {
                              margin-left: 170px;
                              height: 400px;
                              background-image: url("http://renardclement.info/site/images/contenu.jpg");
                              background-repeat: repeat-y;
                      }
                      #footer {
                              height: 43px;
                              width: 798px;
                              background-image: url("http://renardclement.info/site/images/footer.jpg");
                              background-repeat: repeat-x;
                      }
                      • Partager sur Facebook
                      • Partager sur Twitter
                        19 décembre 2005 à 20:46:31

                        Euh seulement le positionement absolut tu peux pas le centrer, tu est obligé de le mettre quelque-part et il y reste.
                        C'est pour ca je prefere pas :)
                        Merci quand même :p
                        • Partager sur Facebook
                        • Partager sur Twitter
                          19 décembre 2005 à 20:49:17

                          corrige
                          #contenu width:625px;
                          • Partager sur Facebook
                          • Partager sur Twitter
                            19 décembre 2005 à 20:54:31

                            C'est comme tu veux, mais tu n'as pas trop compris, à mon avis, comment l'on se sert de ce positionnement.
                            • Partager sur Facebook
                            • Partager sur Twitter
                              19 décembre 2005 à 21:35:33

                              la seule solution pour ce soir demain je reprendrai
                              #contenu
                              { width:628px ;
                              margin-left: 170px ! important;
                              height: 400px;
                              _position:absolute;
                              _left:98px;
                              background-image: url("http://renardclement.info/site/images/contenu.jpg");
                              }
                              • Partager sur Facebook
                              • Partager sur Twitter
                                19 décembre 2005 à 23:58:28

                                Ben le problème, c'est que comme tu as mit une position absloute pour IE, quand je touche a la taille de ma fenêtre, ca bouge par rapport aux autres blocs(ce qui est logique :p ). Donc a la limite mettre tout en position absolute mais a ce moment la je ne pourrai plus centrer (et je veux le faire, car j'ai testé c'est mieux).
                                • Partager sur Facebook
                                • Partager sur Twitter
                                  20 décembre 2005 à 6:58:57

                                  finalement j'ai trouve une solution pour arranger tout ca apres 1heure de recherche testé sur IE FF opera
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    20 décembre 2005 à 12:23:41

                                    Ah ? :)
                                    Et c'est plus avec les postion absolute ?
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      20 décembre 2005 à 12:27:29

                                      non je te fais passer le code ici
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        20 décembre 2005 à 12:39:29

                                        Essaie de mettre une marge en padding entre ton corps et ton menu
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          20 décembre 2005 à 12:51:48

                                          voila les codes html et css j'ai mis du contenu pour tester le fonctionnement.
                                          Regarde bien les intructions dans l'encadré blanc.
                                          <div id="conteneur">
                                          <div id="header"></div>
                                          <div id="menu"></div>
                                          <div id="contenu"><div id="bug"><p></p><span class="a">Il est imperatif de ne pas appliquer de margin vertical dans les boites du debut et de fin mais utiliser le padding, le margin lateral ne pose aucun probleme</span><p>La truffe noire n'est pas plus du Périgord que le champignon n'est de Paris ou le chou de Bruxelles. L'appellation botanique est Tuber melanosporum, c'est à dire « truffe aux spores noires », nommée rabasse en provençal, ou encore Mélano pour les intimes.La truffe noire n'est pas plus du Périgord que le champignon n'est de Paris ou le chou de Bruxelles. L'appellation botanique est Tuber melanosporum, c'est à dire « truffe aux spores noires », nommée rabasse en provençal, ou encore Mélano pour les intimes.</p></div></div>
                                          <div id="footer"></div>
                                          </div>

                                          body
                                          {
                                               background-image: url("http://renardclement.info/site/images/fond.jpg");
                                               margin: auto;
                                                   width: 100%;
                                          }
                                           
                                          #conteneur
                                            {
                                          width:798px;
                                             margin: auto;
                                            }

                                          #header
                                          {

                                             width: 798px;
                                             height: 151px;
                                             background-image: url("http://renardclement.info/site/images/header.jpg");
                                             background-repeat: no-repeat;
                                          }

                                          #menu
                                          {

                                             float: left;
                                             width: 170px;
                                             height: 400px;
                                             background-image: url("http://renardclement.info/site/images/menu.jpg");
                                             background-repeat: repeat-y;
                                          }

                                          #contenu {   
                                                  width:628px ! important;
                                                  width: 625px;
                                                  margin-left: 170px;
                                                  height: 400px;
                                                  background-image: url("http://renardclement.info/site/images/contenu.jpg");
                                                  }

                                          #footer
                                          {

                                             height: 43px;
                                             width: 798px;   
                                             background-image: url("http://renardclement.info/site/images/footer.jpg");
                                             background-repeat: repeat-x;
                                          }
                                          #bug {
                                              height:0 ! important;
                                              height:400px;
                                                  position: relative;
                                                  left:-3px;
                                                  margin-right: -3px;
                                                  background-image: url("http://renardclement.info/site/images/contenu.jpg");
                                          }
                                          p { width:50%; height::auto; margin:0 15px 0 30px; padding:15px; text-align:justify; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
                                          .a{ width: 28%; float:left; margin:30px 10px 5px 50px; color:#FFF; border:1px solid #fff; padding:5px 20px 5px 20px;
                                          text-align:justify; font-size:18px; font-family:"Times New Roman", Times, serif; font-size-adjust:inherit;}
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            20 décembre 2005 à 18:28:40

                                            Et bien chapeau-bas !!!!!

                                            Je vous remercie et particilierement toi jp949 :)
                                            Cela confirme ce que j'ai vu sur un autre post sur toi. :p
                                            Sans faire trop d'éloge lol, je dis Merci ;)
                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              20 décembre 2005 à 19:15:12

                                              bonjour,
                                              POur le probleme du span ,il suffissait de l'integrer au paragraphe, pour que le texte l'entoure comme prevu.
                                              (il s'agit , la encore du comportement de IE face au flottant), d'ailleurs, pense a ajouter un clear:both a ton footer, (sauf dans Ie, exact meme bug que ton span qui repousse tout en bas, dans ce cas le bug est avantageux, seulement dans IE)
                                              le div bug est bien vu mais il est plus judicieux, de mettre ce css en commentaire conditionnel a l'attention unique de IE pour #contenu.(et ainsi se defaire du div bug et du !important )
                                              si tu veut ta page extensible, deplace le fond de menu vers le conteneur, tu n'auras pas de trous...)

                                              demo:
                                              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                                              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
                                              <head>
                                                     <title>Bienvenue chez moi !</title>
                                                     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                                                     <meta http-equiv="Content-language" content="fr-FR" />
                                              <meta name="keywords" content="" />
                                              <meta name="description" content="" />
                                              <meta name="robots" content="index,follow,all" />
                                              <style type="text/css" >
                                              body
                                              {
                                                   background-image: url("http://renardclement.info/site/images/fond.jpg&quot;);
                                                   margin: auto;
                                                       width: 100%;
                                              }
                                               
                                              #conteneur
                                                { width:798px;
                                                 margin: auto;
                                                 background-image: url("http://renardclement.info/site/images/menu.jpg&quot;);
                                                 background-repeat: repeat-y;
                                                }

                                              #header
                                              {
                                                 width: 798px;
                                                 height: 151px;
                                                 background-image: url("http://renardclement.info/site/images/header.jpg&quot;);
                                                 background-repeat: no-repeat;
                                              }

                                              #menu
                                              {
                                                 float: left;
                                                 width: 170px;
                                                 height: 400px;
                                               /*  background-image: url("http://renardclement.info/site/images/menu.jpg&quot;);
                                                 background-repeat: repeat-y;*//*cette image est replacé dans le conteneur */
                                              }

                                              #contenu {   
                                                      width:628px;
                                                      margin-left: 170px;

                                                      background-image: url("http://renardclement.info/site/images/contenu.jpg&quot;);
                                                      }

                                              #footer
                                              {
                                                 height: 43px;
                                                 width: 798px;   
                                                 background-image: url("http://renardclement.info/site/images/footer.jpg&quot;);
                                                 background-repeat: repeat-x;
                                              clear:both;/* a ne pas oublie */
                                              }




                                              p {
                                                       width:314px; /* une taille sans ambiguité pour IE */
                                                      margin:0 15px 0 30px;
                                                      padding:15px;
                                                      text-align:justify;
                                                      font-family:Arial, Helvetica, sans-serif; font-size:11px;

                                              }
                                              .a{
                                                      width: 180px;
                                                      float:left;
                                                      margin:5px 10px 5px 0px;/* marges revues*/
                                                      color:#FFF; border:1px solid #fff;
                                                      padding:5px 20px 5px 20px;
                                                      text-align:justify;
                                                      font-size:18px; font-family:"Times New Roman",
                                                      Times, serif;
                                                      font-size-adjust:inherit;
                                              }


                                              </style>
                                              <!--[if IE]>
                                              <style type="text/css">/* on recupere ici le bug de 3 px d'ie, sur le conteneur "contenu" */
                                              #contenu {position:relative;left:-3px;margin-right:-3px;}
                                              </style>
                                              <![endif]-->
                                              </head>
                                              <body>

                                              <div id="conteneur">
                                              <div id="header"></div>
                                              <div id="menu"></div>
                                              <div id="contenu"><p></p><p><span class="a">Il est imperatif de ne pas appliquer de margin vertical dans les

                                              boites du debut et de fin mais utiliser le padding, le margin lateral ne pose aucun probleme</span>La truffe

                                              noire n'est pas plus du Périgord que le champignon n'est de Paris ou le chou de Bruxelles. L'appellation

                                              botanique est Tuber melanosporum, c'est à dire « truffe aux spores noires », nommée rabasse en provençal, ou

                                              encore Mélano pour les intimes.La truffe noire n'est pas plus du Périgord que le champignon n'est de Paris ou

                                              le chou de Bruxelles. L'appellation botanique est Tuber melanosporum, c'est à dire « truffe aux spores noires

                                              », nommée rabasse en provençal, ou encore Mélano pour les intimes.</p>
                                              <p>Et en inserant le span dans la balise p, on s'assur que le texte glisse a coté puis en dessous (la on voit

                                              le bug avec le flottant mis en evidence sous IE .Le flottant a un comportement a mis chemin vers le  position

                                              absolute, il est a moitié sortis du flux en quelques sorte et deborde sur le autres elements, sauf dans

                                              IE.</p>
                                              <p>D'ailleurs , il est necessaire d'applique un clear:both; au footer, si on veut le voir descendre.Sauf dans

                                              IE .(toujours le truc des flottants).</p> </div>
                                              <div id="footer"></div>
                                              </div>

                                              </body>
                                              </html>

                                              Etant donné que ton contenu a une largeur fixe, les % sont sans interets, alors je les ais repassé en pixel.
                                              cette page ne bug pas sous IE ni firefoxe, et le design est extensible en hauteur...

                                              (Si tu ne comprends pas certains choix de ma part... passe plutot par les mp).
                                              • Partager sur Facebook
                                              • Partager sur Twitter

                                              fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

                                                21 décembre 2005 à 7:43:53

                                                Salut.
                                                G.cyrillus , tu ne crains pas avec les commentaires specifiques a IE que l'arrivée proche de (IE 7.0)pose des problemes si comme on le pretend celui doit interpreter le css2et3 donc il lira
                                                " ! important " mais le commentaire il le lira aussi puisqu'il sappellera toujours " IE " est-ce qu'il n'y aura pas conflit?
                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  21 décembre 2005 à 13:48:04

                                                  Bonjour tout le monde !
                                                  J'ai moi aussi un problème quand je passe de Mozilla ( naviguateur que j'utilise et avec le lequel je vérifiais mon site ) à IE.
                                                  Mes textes dans les balises <p> </p> sont énormes par exemple ! Est-ce qu'il faut que j'utilise
                                                  font-size: en px/cm/mm/em
                                                  font-size: en xx-large/medium
                                                  ou font-size: en % ?

                                                  Aussi,le code CSS marche différemment pour une même page :( (exemple : une fois c'est tout bien en justify et puis quand je change de naviguateur le texte et centré... )

                                                  Une dernière chose : est-ce que c'est normal que les balises <span> ne marchent pas dans les balises <h></h> ?

                                                  Désolé pour ce post très long et merci d'avance
                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    21 décembre 2005 à 14:05:41

                                                    il faudrait voir ton code pour te dire d'ou viennent les problemes parcqu'il peut s'agir d'heritage pour la taille des polices par contre ce dont je suis sur c'est que la balise <span> fonctionne avec les <hn>
                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      21 décembre 2005 à 15:05:47

                                                      bonjour,


                                                      Citation : jp949

                                                      G.cyrillus , tu ne crains pas avec les commentaires specifiques a IE que l'arrivée proche de (IE 7.0)pose des problemes si comme on le pretend celui doit interpreter le css2et3 donc il lira
                                                      " ! important " mais le commentaire il le lira aussi puisqu'il sappellera toujours " IE " est-ce qu'il n'y aura pas conflit?



                                                      Bonne question, justement ces comentaire conditionnel permettent de filtrer aussi les differentes version de IE (a partir de la 5).
                                                      par exemple dans la syntaxe suivante, IE 7 ne prendra pas en compte les regles css supplementaires.
                                                      <!--[if lte IE 6]>
                                                      /* ici le css pris en compte seulement par Ie 6 et version inferieur */
                                                      <![endif]-->


                                                      Voilou, je te laisse faire une petite recherche pour trouver et decouvrir tout les usages possible de ces commentaires conditionnel.
                                                      placé dans le html ils peuvent ajouter des balises supplementaires uniquement pour IE, ou dans l'entete chrger un javascript, etc ....

                                                      a plus et bon dev.
                                                      • Partager sur Facebook
                                                      • Partager sur Twitter

                                                      fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

                                                        21 décembre 2005 à 15:10:57

                                                        ok merci.
                                                        faut bien preciser la version du navigateur
                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          21 décembre 2005 à 15:18:20

                                                          ah, oui, tu peut dans le html cacher certaine choses a IE avec la balise "comment".
                                                          ex:
                                                          <p>Votre navigateur <comment>n'</comment>est <comment>pas </comment> Internet explorer.</p>

                                                          Cela peut servir, a defaut c'est amusant de remarquer encore un drole de comportement de IE.
                                                          Par contre je n'ai aucune idée de ce que IE7 va faire avec cette balise.
                                                          a plus
                                                          • Partager sur Facebook
                                                          • Partager sur Twitter

                                                          fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

                                                            21 décembre 2005 à 16:47:04

                                                            En fait le problème vient de mon CSS : j'avais en fait copier/coller un vieux code CSS d'un site que j'avais fait et bien sûr y avait plein de trucs faux et contradictoires :o
                                                            Je suis donc en train de tout reprendre et en plus je viens de tomber sur un récapitulatif des codes CSS très pratique qui n'était pas là la première fois que j'ai fait du CSS !

                                                            Désolé de vous avoir embêtés :( je suis en train de tout refaire calmement ( si j'arrive à rester calme :D )
                                                            Voici la page sur les codes CSS que j'ai été contente de trouver: http://www.siteduzero.com/tuto-3-1938-1-liste-des-proprietes-css.html#ss_part_1

                                                            • Partager sur Facebook
                                                            • Partager sur Twitter

                                                            Decalage IE/Firefox

                                                            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                            • Editeur
                                                            • Markdown