Partage
  • Partager sur Facebook
  • Partager sur Twitter

pb de css avec IE

Sujet résolu
    7 décembre 2005 à 14:37:10

    Bonjour,

    voila, je viens de mettre mon site en ligne et je viens de me rendre compte d'un problème. mais je n'ai aucune idée de comment le résoudre.

    en fait sous mozilla mon site apparaît bien comme je le voulais, mais sous IE le corps se trouve en dessous du Menu. Et je ne sais pas pourquoi.

    Je tiens a préciser que j'avais eu un pb ave les validateur. autant j'avais bien compris celoui d'html (donc toutes mes pages sont valides en html) autant je n'ai rien compris a celui du CSS donc je doute qu'elles soient valides. Mais je ne sais pas comment faire pour qu'elles le soient.

    Si vous voulez vous rendre compte vous même du problème vous pouvez allez sur mon site.

    merci d'avance pour les différentes idées que vous pourriez avoir.

    Gayana
    • Partager sur Facebook
    • Partager sur Twitter
      7 décembre 2005 à 14:46:02

      Tu pourrais nous mettre tes codes ((x)HTML et CSS) ici stp (la flemme d'afficher la source :D )
      • Partager sur Facebook
      • Partager sur Twitter
        7 décembre 2005 à 14:46:37

        Une chose que je n'ai pas comprise :

        Dans body tu mets width: 760px;
        Le menu est de width: 140px;
        Et le corps est de width: 700px;

        700 + 140 = 840...
        840 > 760...

        Donc body ne sait pas tenir le corps et le menu...

        Pour vérifier si c'est ça, enlève la taille (width) au body. Le design ne sera plus centré mais si le corps se met à l'endroit souhaité, alors il suffit d'agrandir cette taille.

        Si ça ne marche toujours pas, essaie d'utiliser float: left; au corps.

        J'espère que ça t'a aidée :)
        • Partager sur Facebook
        • Partager sur Twitter
          7 décembre 2005 à 15:00:51

          Bon alors, j'ai changer un peu le css, c'est vrai que j'avais pas du tout penser que les grandeur que j'avais mise étaient plus grande que le total XD

          bref voila ce que ca donne maitnenant:


          body
          {
            width: 760px;
             margin: 20px auto;
             background-image:url('bleunuitetoile.jpg');
             margin-top: 20px;
             margin-bottom: 20px;/* Idem pour le bas du navigateur */
             }

          #en_tete
          {

             width: 760px;
             height: 100px;
             background-image:url('bleunuitetoile.jpg');
             margin-bottom: 10px;
             font-weight: bold;
             text-align: center;
             color:  #66dbff;
          }
          .imageflottante
          {
          float:right;
          }

          #menu
          {

             float: left; /* Le menu flottera à gauche */
             width: 120px; /* Très important : donner une taille au menu */
             Height: 510px;
             overflow: auto;

             background-color: #2683cb;
             background-image: url('motif2.png');
             background-repeat: repeat-x;
             
             border: 2px groove black;
             
             margin-bottom: 20px;
          }

          .element_menu h3 /* Tous les titres de menus */
          {   
             color: #0313ff;
             font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
             text-align: center;
          }

          .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
          {
             list-style-image: url("puce4.gif");
             padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
             padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
             margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
             margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
          }

          .element_menu a /* Tous les liens se trouvant dans un menu */
          {
             color: #000000;
          }

          .element_menu a:hover /* Quand on pointe sur un lien du menu */
          {
             background-color: #26bfcf;
             color: black;
          }

          #corps
          {

             Width: 620px;
             float: right;
             margin-left: 130px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
             margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
             padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
             
             color: black;
             background-color: #2683cb; /* Une couleur de fond pour le corps */
             background-image: url('motif2.png');
             background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
             
             border: 2px ridge black;
          }

          #corps h1 /* Tous les titres h1 du corps */
          {
             color: #0313ff;
             text-align: center;
             font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
          }

          #avertissement
          {

             color: #d70329;
             font-weight: bold;
             }


          #corps h2 /* Tous les titres h2 du corps */
          {
             height: 30px;

             background-image: url('feetriste.gif'); /* Une petite image de fond sur les titres h2 */
             background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
             
             padding-left: 30px;
             color: #0313ff;
             text-align: left;
          }

          .imageflottante2
          {
          float: left;
          }

          .travaux
          {
          float:center;
          }

          a:hover
          {
             background-color: #26bfcf;
             color: black;
          }





          #pied_de_page
          {

             padding: 5px;
             width: 860px;
             Height: 40px;
             text-align: center;

             color: #0313ff;
             background-color: #2683cb;
             background-image: url('motif2.png');
             background-repeat: repeat-x;
             
             border: 2px ridge black;
          }


          Mais même avec les changements ca ne marche toujours pas. le corps reste obstinement sous le menu .
          • Partager sur Facebook
          • Partager sur Twitter
            7 décembre 2005 à 15:05:07

            Pourquoi mets-tu une majuscule à tes height et à tes width ??
            • Partager sur Facebook
            • Partager sur Twitter
              7 décembre 2005 à 15:08:16

              MDrrr c'est une bonne question, j'en sais rien, je vais changer ca ^^

              par contre maintenant avec ces changements c'est le bordel avec mozilla. Le footer est juste en dessous du header. et le corps est en dessous du menu .. j'y comprends rien TT
              • Partager sur Facebook
              • Partager sur Twitter
                7 décembre 2005 à 16:12:51

                Moi le probléme est simple IE aime pas mon css, il affiche rien ou quasi ien de mon css, aprés verification mes balises sont toutes compatibles IE.
                A part priez pour IE 7.0 ou mettre des liens vers FF en disant que IE c'est deprecated vous avez des solution?
                www.sboob.tk
                • Partager sur Facebook
                • Partager sur Twitter
                  7 décembre 2005 à 16:22:03

                  bon alors j'ai refait des modif, les pb sur mozilla sont arranger (je sais pas pourquoiils sont survenu mais bon) par contre en ce qui concerne IE ... je n'ai aucune idée. alors si quelqu'un a des propositions a faire, j'essaierai tout ce que vous proposerez.
                  • Partager sur Facebook
                  • Partager sur Twitter
                    7 décembre 2005 à 16:29:16

                    Je comprend pas ton problème est pourtant clair :o
                    Si ton bloc corps va au dessous du menu c'est qu'il ne peut pas tenir à droite du menu ... donc réduit la taille de ton corps ;)
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal
                      7 décembre 2005 à 16:38:13

                      Merci beaucouppppppppppppppp

                      maintenant c'est bien au bon endroit :)

                      par contre j'ai remarqué quelques petites différences, qui sont bien moins génante que la précedente mais bon.

                      en fait sur Mozilla la couleur de fond de mes block, et celle du motif au dessus est exactement la meme (je l'ai fait sur paint et j'ai mis la meme couleur) or quand on le regarde sous IE celle du motif paraît plus fonce o_O

                      et encore une dernière chose. Sous mozilla, dans le menu, la marge entre le haut du block et le premier mot est raisonnable alors que sous IE le premier mots se confond avec le motif du haut?

                      si quelqu'un a une idée, pendant que je fais divers essai, je suis à l'écoute ^^

                      en tout cas mercii énormément pour m'avoir aidé pour mon premier et plus gros pb ^^
                      • Partager sur Facebook
                      • Partager sur Twitter
                        7 décembre 2005 à 17:46:55

                        Salut,

                        Citation : Gayana

                        en fait sur Mozilla la couleur de fond de mes block, et celle du motif au dessus est exactement la meme (je l'ai fait sur paint et j'ai mis la meme couleur) or quand on le regarde sous IE celle du motif paraît plus fonce o_O


                        IE fonce les .png 8-bits.

                        Sache qu'il y aura toujours des petites différences entre les navigateurs, même minimes ;)
                        • Partager sur Facebook
                        • Partager sur Twitter
                          7 décembre 2005 à 18:09:19

                          arff, je pensais qu'il était possible d'arriver à la meme chose. :(

                          enfin bon c'est pas bien grave, le site est déjà beaucoup plus acceptable comme ca :)

                          merci beaucoup en tout cas pour votre aide.
                          • Partager sur Facebook
                          • Partager sur Twitter

                          pb de css avec IE

                          × 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