Partage
  • Partager sur Facebook
  • Partager sur Twitter

IE et CSS

cadre en dessous au lieu d'etre a droite :(

Sujet résolu
    1 avril 2006 à 17:15:06

    Bonjour,

    Voila, je cherche un moyen de mettre mon contenu a droite de mon menu. Sous Opera et Mozilla, tout fonctionne correctement mais pas sous IE :(

    #menu
    {

            border: double white 1px;
            float:left;
            background-color: #E5E6E8;
    }

    .contenu
    {
            width:555px;
            background-color: #E5E6E8;
            margin-left: 207px;
    }


    Voila mon code, mais je me demande si IE ne veut pas faire la même chose car j'utilise un include en php pour intégrer mon contenu ...

    Quelqu'un a-t-il déjà eu ce problème ?

    Merci d'avance !

    A bientôt
    • Partager sur Facebook
    • Partager sur Twitter
      1 avril 2006 à 17:44:46

      Salut, je pense que ton probleme viens de la largeur que tu as définie. Enlève :

      .contenu {
      width:555px;
      }


      En fait le margin-left va placer le contenu à droite du menu, enfin je l'espère.

      En espérant que ça marche , bonne chance.

      • Partager sur Facebook
      • Partager sur Twitter
        1 avril 2006 à 18:48:07

        Non, j'ai bien essayé mais ça ne fonctione toujours pas o_O

        Le margin left sert justement à ce que le contenu ne soit pas masqué par le menu mais si je l'enleve, sous mozilla et Opera, le contenu est masqué par le menu (enfin une partie est masquée) et sous IE, tout se trouve en dessous :euh:

        s'il fo un ptit dessin, jle fé vite fait :)

        Sous Opera et Mozilla : (ça fonctionne)


        ---------------------------------------------------------------------
        /////////////////HEADER ICI//////////////
        ---------------------------------------------------------------------
        ..........................
        ........MENU...........^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        ..........................^^^^^^^^^^^^^^^^^^^^^^^^
        .......................... ^^^^^^^^CONTENU ICI ^^^^
        .....titre menu 1 ......^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        .....titre menu 2 ......^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        ...........................

        -----------------------------------------------------
        --------------PIED DE PAGE ------------
        -----------------------------------------------------


        SOUS IE : (qui ne fonctionne pas):

        ---------------------------------------------------------------------
        /////////////////HEADER ICI//////////////
        ---------------------------------------------------------------------
        ..........................
        ........MENU...........
        ..........................
        ..........................
        .....titre menu 1 ......
        .....titre menu 2 ......
        ...........................

        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        ^^^^^^^^CONTENU ICI ^^^^^^^^^^^^
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

        -----------------------------------------------------
        --------------PIED DE PAGE ------------
        -----------------------------------------------------


        Et si j'enleve le margin left, j'ai ça :

        ---------------------------------------------------------------------
        /////////////////HEADER ICI//////////////
        ---------------------------------------------------------------------
        ..........................
        ........MENU...........^^^^^^^^^^^^^^
        ..........................^^^^^^^^^^^
        ..........................ENU ICI ^^^^
        .....titre menu 1 ......^^^^^^^^^^^^^
        .....titre menu 2 ......^^^^^^^^^^^^^
        ...........................

        -----------------------------------------------------
        --------------PIED DE PAGE ------------
        -----------------------------------------------------


        Voila, j'espère que c'est assez clair. Désolé pour mes moyens plutots basique :) Je suis un peu en panne de FTP en ce moment donc un peu en galère pour les copie d'écran ou pour donner une adresse pour aller voir :-°

        Voila, encore merci

        A bientôt
        • Partager sur Facebook
        • Partager sur Twitter
          1 avril 2006 à 19:17:57

          Je me suis peut-être mal exprimé ou alors j'ai mal compris ce que tu m'as répondu: enleve juste la ligne width et garde celle du margin-left, normalement ça devraient marcher et si ça marche pas c'est bizarre car ça marche pour moi.
          • Partager sur Facebook
          • Partager sur Twitter
            1 avril 2006 à 19:18:40

            bonjour
            as tu essayé en mettant un width au menu ?
            moins de 207 px bien sur :)
            • Partager sur Facebook
            • Partager sur Twitter
              1 avril 2006 à 22:55:57

              Je suis ce topic avec beaucoup d'attention car moi aussi j'ai ce probleme!
              rassures toi Anthos59 tu n'est pas seul (je parle pour ton soucis de CSS et pour ta signature :p )
              Ce n'est pas la premiere fois que je recontre ce probleme lors du codage de mes sites. Pourtant ce n'est pas automatique: certains ne l'ont pas. Malheureusement je n'arrive pas a voir ce qu'il y a de different entre eux... :S

              Si besoin est, demain je poste des fragments de mes codes ;)

              UP UP mes amis!
              et bonne nuit a tous
              • Partager sur Facebook
              • Partager sur Twitter
                2 avril 2006 à 11:15:45

                UP! svp, jsuis sur que ce n'est pas la premiere fois que ça arrive. et c'est vraiment tres embettant.

                EDIT:

                EUREKA! Linhks avait en fait raison; IE ne supporte pas quand le div qui est censé etre a coté du div flotant a une largeur definie!

                Et dire que je cherchait la solution a ce probleme depuis si longtemps!

                Je crois que bientot je redigerais un tuto sur les differents bugs d'affichage entre IE et FF, un comparatif avec leurs solutions.

                Merci beaucoup Linhks!
                • Partager sur Facebook
                • Partager sur Twitter
                  2 avril 2006 à 19:17:14

                  ça ne fonctionne toujours pas pour moi :(

                  Voici mon code CSS sans retouche :)



                  /* PARTIE CENTRALE */

                  #menu
                  {

                          border: double white 1px;
                          float:left;
                          background-color: #E5E6E8;
                  }

                  .menu
                  {
                          font-family: Georgia, "Times New Roman", Times, serif;
                          font-size: 10px;
                          line-height: 20px;
                          color: #FFFFFF;
                          background-image: url("images/bouton_1.png");
                          background-repeat: no-repeat;
                          background-position: center center;
                          text-indent: 15px;
                          height: 20px;
                          width: 200px;
                  }

                  .menu a
                  {
                          font-family: Georgia, "Times New Roman", Times, serif;
                          font-size: 10px;
                          line-height: 20px;
                          color: #333333;
                          background-image: url("images/bouton_1.png");
                          background-repeat: no-repeat;
                          background-position: center center;
                          text-indent: 15px;
                          text-decoration: underline;
                          font-weight: bold;
                          height: 20px;
                          width: 200px;
                  }

                  .menu a :visited /* Menu quand le lien a été visité */
                  {
                          height: 20px;
                          width: 200px;
                          font-family: Georgia, "Times New Roman", Times, serif;
                          font-size: 10px;
                          line-height: 20px;
                          color: #333333;
                          text-decoration: none;
                          background-image: url("images/bouton_1.png");
                          background-repeat: no-repeat;
                          background-position: center center;
                          text-indent: 15px;
                          font-weight: bold;
                  }

                  .menu :hover /* Lien du Menu quand la souris est dessus */
                  {
                          font-family: Georgia, "Times New Roman", Times, serif;
                          font-size: 10px;
                          line-height: 20px;
                          font-weight: bold;
                          color: #FFFFFF;
                          text-decoration: none;
                          background-image: url("images/bouton_2.gif");
                          background-repeat: no-repeat;
                          background-position: center center;
                          text-indent: 15px;
                          height: 20px;
                          width: 200px;
                  }

                  #partenaires
                  {

                          width: 200px;
                          height: 200px;
                          background-color: #E5E6E8;
                          border: double white 1px;
                         
                  }

                  .page_titre1 /* Sans la marge en haut pour éviter un décallage */
                  {
                          font-family: Georgia, "Times New Roman", Times, serif;
                          font-size: 12px;
                          line-height: 25px;
                          font-weight: bold;
                          color: #333333;
                          text-decoration: none;
                          background-image: url("images/page_titre.png");
                          background-repeat: no-repeat;
                          background-position: center center;
                          text-indent: 270px;
                          height: 25px;
                          width: 555px;
                  }

                  .page_titre
                  {
                          font-family: Georgia, "Times New Roman", Times, serif;
                          font-size: 12px;
                          line-height: 25px;
                          font-weight: bold;
                          color: #333333;
                          text-decoration: none;
                          background-image: url("images/page_titre.png");
                          background-repeat: no-repeat;
                          background-position: center center;
                          text-indent: 270px;
                          height: 25px;
                          width: 555px;
                          margin-top: 5px;
                  }

                  .contenu
                  {
                          background-color: #E5E6E8;
                          margin-left: 207px;
                  }

                  .contenu_haut
                  {
                          font-family: Georgia, "Times New Roman", Times, serif;
                          font-size: 12px;
                          color: #333333;
                          text-decoration: none;
                          width: 95%;
                          margin-left :15px;
                          background-color:#FFFFFF;
                          color: #4373AD;
                          border:outset white 1px;
                  }

                  /* Fin de la PARTIE CENTRALE */

                  /* PARTIE BASSE */

                  #footer /* Barre au dessus du Header */
                  {
                          width: 758px;
                          height: 36px; /* Hauteur */
                          background-image: url("images/haut.png");
                          border: double white 1px; /* Bordure */
                          font-family: Georgia, "Times New Roman", Times, serif; /* Polices de caractères du texte */
                          text-align: center; /* Positionnement du texte sur l'axe horizontal */
                          font-size: 12px; /* Taille du texte */
                          line-height: 25px; /* Hauteur de la ligne du texte */
                          color: #333333; /* Couleur du texte */
                          text-decoration: none; /* Aucune déco sur le texte (ni gras, ni italique, ni souligné ou autre */
                          font-weight: bold; /* Texte en Gras */
                          background-repeat: no-repeat; /* Pas de répétition de l'image de fond */
                          background-position: center center; /* positionnement de l'arrière plan : middle pour l'axe vertical; center pour horizontal */
                          text-indent: 10px; /* Alinéa (ici pour le décaler après la croix de l'image menu */
                          margin-top: 10px;
                  }


                  /* Fin de la PARTIE BASSE */


                  Voila, ceci vous éclaire-t-il sur le pb ?

                  Merci encore
                  • Partager sur Facebook
                  • Partager sur Twitter
                    2 avril 2006 à 19:23:34

                    Essaye également d'enlever le width au contenu_haut. De plus j'ai remarqué que ton #menu n'a pas de width lui, applique lui en un. Voila, si ton probleme persiste, pourraient-on avoir le code html ?

                    Je me demande aussi c'est le code entier ? car sinon il te manque la partie body.

                    • Partager sur Facebook
                    • Partager sur Twitter
                      2 avril 2006 à 19:31:02

                      ça ne fonctionne pas non plus o_O

                      Voici le CSS modifié :

                      /* PARTIE CENTRALE */

                      #menu
                      {

                              border: double white 1px;
                              float:left;
                              background-color: #E5E6E8;
                              width:200px;
                      }

                      .menu
                      {
                              font-family: Georgia, "Times New Roman", Times, serif;
                              font-size: 10px;
                              line-height: 20px;
                              color: #FFFFFF;
                              background-image: url("images/bouton_1.png");
                              background-repeat: no-repeat;
                              background-position: center center;
                              text-indent: 15px;
                              height: 20px;
                      }

                      .menu a
                      {
                              font-family: Georgia, "Times New Roman", Times, serif;
                              font-size: 10px;
                              line-height: 20px;
                              color: #333333;
                              background-image: url("images/bouton_1.png");
                              background-repeat: no-repeat;
                              background-position: center center;
                              text-indent: 15px;
                              text-decoration: underline;
                              font-weight: bold;
                              height: 20px;
                              width: 200px;
                      }

                      .menu a :visited /* Menu quand le lien a été visité */
                      {
                              height: 20px;
                              width: 200px;
                              font-family: Georgia, "Times New Roman", Times, serif;
                              font-size: 10px;
                              line-height: 20px;
                              color: #333333;
                              text-decoration: none;
                              background-image: url("images/bouton_1.png");
                              background-repeat: no-repeat;
                              background-position: center center;
                              text-indent: 15px;
                              font-weight: bold;
                      }

                      .menu :hover /* Lien du Menu quand la souris est dessus */
                      {
                              font-family: Georgia, "Times New Roman", Times, serif;
                              font-size: 10px;
                              line-height: 20px;
                              font-weight: bold;
                              color: #FFFFFF;
                              text-decoration: none;
                              background-image: url("images/bouton_2.gif");
                              background-repeat: no-repeat;
                              background-position: center center;
                              text-indent: 15px;
                              height: 20px;
                              width: 200px;
                      }

                      #partenaires
                      {

                              width: 200px;
                              height: 200px;
                              background-color: #E5E6E8;
                              border: double white 1px;
                             
                      }

                      .page_titre1 /* Sans la marge en haut pour éviter un décallage */
                      {
                              font-family: Georgia, "Times New Roman", Times, serif;
                              font-size: 12px;
                              line-height: 25px;
                              font-weight: bold;
                              color: #333333;
                              text-decoration: none;
                              background-image: url("images/page_titre.png");
                              background-repeat: no-repeat;
                              background-position: center center;
                              text-indent: 270px;
                              height: 25px;
                              width: 555px;
                      }

                      .page_titre
                      {
                              font-family: Georgia, "Times New Roman", Times, serif;
                              font-size: 12px;
                              line-height: 25px;
                              font-weight: bold;
                              color: #333333;
                              text-decoration: none;
                              background-image: url("images/page_titre.png");
                              background-repeat: no-repeat;
                              background-position: center center;
                              text-indent: 270px;
                              height: 25px;
                              width: 555px;
                              margin-top: 5px;
                      }

                      .contenu
                      {
                              background-color: #E5E6E8;
                              margin-left: 207px;
                      }

                      .contenu_haut
                      {
                              font-family: Georgia, "Times New Roman", Times, serif;
                              font-size: 12px;
                              color: #333333;
                              text-decoration: none;
                              margin-left :15px;
                              background-color:#FFFFFF;
                              color: #4373AD;
                              border:outset white 1px;
                      }

                      /* Fin de la PARTIE CENTRALE */


                      et voici le contenu de ma page contenu :

                      <!-- Contenu -->
                              <div class="contenu">
                                      <div class="page_titre1">
                                              Bienvenue !
                                      </div>
                                     
                                      <div class="contenu_haut">
                                              <p> Voici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier test </p>
                                      </div>
                                     
                                      <div class="page_titre">
                                              News
                                      </div>
                                     
                                      <div class="contenu_haut">
                                              <p> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </p>
                                      </div>
                              </div>
                      <!-- Contenu -->
                      • Partager sur Facebook
                      • Partager sur Twitter
                        2 avril 2006 à 19:38:20

                        Est ce que je pourrai avoir le code html entier stp car la il semblerait que ça marche mais je voudrai tester avec ton menu.
                        • Partager sur Facebook
                        • Partager sur Twitter
                          2 avril 2006 à 19:44:18

                          Donc, je met ma page index pour que tu voies comment mon site est structuré :)

                          index :

                          <!-- PAGE -->
                                  <div id="page">
                                 
                                  <!-- HAUT -->
                                  <div id="haut">
                                                  Bienvenue sur Rt Basics
                                  </div>
                                  <!-- Fin de HAUT (partie haute ==> Bande grise et blanche) -->
                                 
                                 
                                  <!-- HEADER -->
                                  <div id="header">
                                          <?php
                                                  include ("header.php");
                                          ?>
                                  </div>
                                  <!-- Fin du HEADER -->
                                 
                                 
                                  <!-- MENUS -->
                                  <div id="menus">
                                          <?php
                                                  include ("menus.php");
                                          ?>
                                  </div>
                                  <!-- Fin des MENUS -->
                                 
                                 
                                  <!-- CONTENU -->
                                  <div id="contenu">
                                          <?php
                                                  include ("contenu.php");
                                          ?>
                                  </div>
                                  <!-- Fin du CONTENU -->
                                 
                                 
                                  <!-- FOOTER -->
                                  <div id="footer">
                                          Copyright &copy; "<a href="http://www.rtbasics.new.fr">RtBasics</a>" 2006, tous droits réservés
                                  </div>
                                  <!--Fin du FOOTER -->
                                 
                                  </div>
                                  <!-- Fin de PAGE (pour mettre fond gris) -->


                          Menus.php :

                          <div id="menu">

                          <!-- MENU(S) -->
                                  <div id="menu">
                                         
                                          <div>
                                                  <div class="menu_titre">
                                                          Menu
                                                  </div>
                                                 
                                                  <div>
                                                          <div class="menu"><a href="index.php" title="Index">Accueil</a> <br /></div>
                                                          <div class="menu"><a href="news.php" title="News">News</a> <br /></div>
                                                          <div class="menu"><a href="forum.php" title="Forum">Forum</a> <br /></div>
                                                          <div class="menu"><a href="livredor.php" title="Livre d'or">Livre d'or</a> <br /></div>
                                                          <div class="menu"><a href="mailto:zerophp@voila.fr" title="Contact">Contact</a> <br /></div>
                                                          <div class="menu"><a href="chat.php" title="Tchat">TChat</a> <br /></div>
                                                  </div>
                                                         
                                          </div>
                                          <!-- Fin du menu -->
                                         
                                          <!-- PARTENAIRES -->
                                          <div id="partenaires">
                                                  <div class="menu_titre">
                                                          Partenaires
                                                  </div>
                                                 
                                                  <div>
                                                          <div class="menu"><a href="http://www.kyokushin-premesquois.new.fr" title="Kyokushin-premesquois">Kyokushin Karaté</a> <br /></div>
                                                          <div class="menu"><a href="http://www.eurobarre.com/index_fr.php?p=899836055490" title="Eurobarre: Gagner à ne rien faire :D">Eurobarre</a> <br /></div>
                                                          <div class="menu"><a href="http://www.milimel.com/parrainage.asp?parrain=271540" title="Forum">Milimel</a> <br /></div>
                                                          <div class="menu"><a href="http://www.clickcode.net/inscription.php?parrain=Anthos59" title="Gagner des allopass simplement">Clickcode</a> <br /></div>
                                                  </div>
                                                 
                                          </div>

                                  </div>


                          Contenu :

                          <!-- Contenu -->
                                  <div class="contenu">
                                          <div class="page_titre1">
                                                  Bienvenue !
                                          </div>
                                         
                                          <div class="contenu_haut">
                                                  <p> Voici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier testVoici un premier test </p>
                                          </div>
                                         
                                          <div class="page_titre">
                                                  News
                                          </div>
                                         
                                          <div class="contenu_haut">
                                                  <p> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </p>
                                          </div>
                                  </div>
                          <!-- Contenu -->


                          Voila, j'espère que ça ira :)

                          Merci encore
                          • Partager sur Facebook
                          • Partager sur Twitter
                            2 avril 2006 à 19:57:13

                            Humm ... je crois avoir compris ton design pose un problème en 800*600 (résolution que tu doit avoir). J'ai essayé en 1024 et en 1280, il passe très bien. Donc il semblerait qu'il ne soit pas extensible.

                            rajoute ça tout en haut du code css :


                            body {
                                    width:99%; /*ou 100% c'est au choix moi je préfère 99*/
                                    margin: auto;
                            }


                            J'espère que ça va marcher maintenant.
                            • Partager sur Facebook
                            • Partager sur Twitter
                              2 avril 2006 à 20:05:44

                              non, ça me met mon design a gauche mé ça ne change rien :s

                              mon CSS complet ressemble a ça :

                              body /* Balise Body dans les pages */
                              {
                                 width: 760px; /* largeur de la balise body */
                                 margin: auto; /* On centre la page */
                                 margin-top: 10px; /* Marge de 10 pixels en haut */
                                 margin-bottom: 20px;  /* Marge de 20 pixels en bas */
                                 background-image: url("images/fond.png"); /* image de fond */
                              }

                              #page
                              {

                                      width: 763px;
                                      background-color: #FFFFFF;
                              }

                              /* PARTIE HAUTE : Haut et Header */

                              #haut /* Barre au dessus du Header */
                              {
                                      width: 758px;
                                      height: 36px; /* Hauteur */
                                      background-image: url("images/haut.png");
                                      border: double white 1px; /* Bordure */
                                      font-family: Georgia, "Times New Roman", Times, serif; /* Polices de caractères du texte */
                                      text-align: center; /* Positionnement du texte sur l'axe horizontal */
                                      font-size: 20px; /* Taille du texte */
                                      line-height: 25px; /* Hauteur de la ligne du texte */
                                      color: #0033CC; /* Couleur du texte */
                                      text-decoration: none; /* Aucune déco sur le texte (ni gras, ni italique, ni souligné ou autre */
                                      background-repeat: no-repeat; /* Pas de répétition de l'image de fond */
                                      background-position: center center; /* positionnement de l'arrière plan : middle pour l'axe vertical; center pour horizontal */
                                      text-indent: 10px; /* Alinéa (ici pour le décaler après la croix de l'image menu */
                              }

                              #header
                              {

                                      background-color: #416EA6;
                                      border: double white 1px;
                              }

                              #partie_gauche
                              {

                                      float: right; /* flottant à gauche ; Permet qu'autre chose soit placé à sa droite */
                              }

                              .menu_titre /*Cette classe sert pour tout les titres MENU (Login, menu, partenaires) */
                              {
                                      height: 25px;
                                      width: 200px;
                                      font-family: Georgia, "Times New Roman", Times, serif;
                                      font-size: 12px;
                                      line-height: 25px;
                                      font-weight: bold; /* Texte en Gras */
                                      color: #333333;
                                      text-decoration: none;
                                      background-image: url("images/menu_titre.png");
                                      background-repeat: no-repeat;
                                      background-position: center center;
                                      text-indent: 20px;
                                      border: double white 1px;
                              }

                              #membres
                              {

                                      height: 125px;
                                      width: 185px;
                                      font-family: Georgia, "Times New Roman", Times, serif;
                                      font-size: 10px;
                                      font-weight: bold;
                                      line-height: 16px;
                                      color: #FFFFFF;
                                      text-decoration: none;
                                      background-color: #0099FF;
                                      padding-left: 15px;
                                      border: double white 1px;
                              }

                              #partie_droite
                              {

                                      height: 153px;
                                      background-image: url("images/header.png");
                                      margin-left: 0px; /* Marge de 201 pixel à gauche (pour que cette partie soit à droite du menu sans être en dessous */
                                      background-repeat: repeat-x; /* On répète l'image sur l'axe horizontal */
                              }

                              /* Fin de la PARTIE HAUTE */

                              /* PARTIE CENTRALE */

                              #menu
                              {

                                      border: double white 1px;
                                      float:left;
                                      background-color: #E5E6E8;
                                      width:200px;
                              }

                              .menu
                              {
                                      font-family: Georgia, "Times New Roman", Times, serif;
                                      font-size: 10px;
                                      line-height: 20px;
                                      color: #FFFFFF;
                                      background-image: url("images/bouton_1.png");
                                      background-repeat: no-repeat;
                                      background-position: center center;
                                      text-indent: 15px;
                                      height: 20px;
                              }

                              .menu a
                              {
                                      font-family: Georgia, "Times New Roman", Times, serif;
                                      font-size: 10px;
                                      line-height: 20px;
                                      color: #333333;
                                      background-image: url("images/bouton_1.png");
                                      background-repeat: no-repeat;
                                      background-position: center center;
                                      text-indent: 15px;
                                      text-decoration: underline;
                                      font-weight: bold;
                                      height: 20px;
                                      width: 200px;
                              }

                              .menu a :visited /* Menu quand le lien a été visité */
                              {
                                      height: 20px;
                                      width: 200px;
                                      font-family: Georgia, "Times New Roman", Times, serif;
                                      font-size: 10px;
                                      line-height: 20px;
                                      color: #333333;
                                      text-decoration: none;
                                      background-image: url("images/bouton_1.png");
                                      background-repeat: no-repeat;
                                      background-position: center center;
                                      text-indent: 15px;
                                      font-weight: bold;
                              }

                              .menu :hover /* Lien du Menu quand la souris est dessus */
                              {
                                      font-family: Georgia, "Times New Roman", Times, serif;
                                      font-size: 10px;
                                      line-height: 20px;
                                      font-weight: bold;
                                      color: #FFFFFF;
                                      text-decoration: none;
                                      background-image: url("images/bouton_2.gif");
                                      background-repeat: no-repeat;
                                      background-position: center center;
                                      text-indent: 15px;
                                      height: 20px;
                                      width: 200px;
                              }

                              #partenaires
                              {

                                      width: 200px;
                                      height: 200px;
                                      background-color: #E5E6E8;
                                      border: double white 1px;
                                     
                              }

                              .page_titre1 /* Sans la marge en haut pour éviter un décallage */
                              {
                                      font-family: Georgia, "Times New Roman", Times, serif;
                                      font-size: 12px;
                                      line-height: 25px;
                                      font-weight: bold;
                                      color: #333333;
                                      text-decoration: none;
                                      background-image: url("images/page_titre.png");
                                      background-repeat: no-repeat;
                                      background-position: center center;
                                      text-indent: 270px;
                                      height: 25px;
                                      width: 555px;
                              }

                              .page_titre
                              {
                                      font-family: Georgia, "Times New Roman", Times, serif;
                                      font-size: 12px;
                                      line-height: 25px;
                                      font-weight: bold;
                                      color: #333333;
                                      text-decoration: none;
                                      background-image: url("images/page_titre.png");
                                      background-repeat: no-repeat;
                                      background-position: center center;
                                      text-indent: 270px;
                                      height: 25px;
                                      width: 555px;
                                      margin-top: 5px;
                              }

                              .contenu
                              {
                                      background-color: #E5E6E8;
                                      margin-left: 207px;
                              }

                              .contenu_haut
                              {
                                      font-family: Georgia, "Times New Roman", Times, serif;
                                      font-size: 12px;
                                      color: #333333;
                                      text-decoration: none;
                                      margin-left :15px;
                                      background-color:#FFFFFF;
                                      color: #4373AD;
                                      border:outset white 1px;
                              }

                              /* Fin de la PARTIE CENTRALE */

                              /* PARTIE BASSE */

                              #footer /* Barre au dessus du Header */
                              {
                                      width: 758px;
                                      height: 36px; /* Hauteur */
                                      background-image: url("images/haut.png");
                                      border: double white 1px; /* Bordure */
                                      font-family: Georgia, "Times New Roman", Times, serif; /* Polices de caractères du texte */
                                      text-align: center; /* Positionnement du texte sur l'axe horizontal */
                                      font-size: 12px; /* Taille du texte */
                                      line-height: 25px; /* Hauteur de la ligne du texte */
                                      color: #333333; /* Couleur du texte */
                                      text-decoration: none; /* Aucune déco sur le texte (ni gras, ni italique, ni souligné ou autre */
                                      font-weight: bold; /* Texte en Gras */
                                      background-repeat: no-repeat; /* Pas de répétition de l'image de fond */
                                      background-position: center center; /* positionnement de l'arrière plan : middle pour l'axe vertical; center pour horizontal */
                                      text-indent: 10px; /* Alinéa (ici pour le décaler après la croix de l'image menu */
                                      margin-top: 10px;
                              }


                              /* Fin de la PARTIE BASSE */


                              Voila, a part que mon design se trouve sur la gauche, rien ne change :(
                              • Partager sur Facebook
                              • Partager sur Twitter
                                2 avril 2006 à 20:22:51

                                Ok, bon j'espère que cette fois ci c'est bon et que ça ne te posera plus de problème avec les images, donc voilà, en fait le problème venait des width se trouvant dans les parties .page_titre et .page_titre1 (en effet il semblerait que IE n'accepte pas de largeurs c'est à dire width quand un bloc est à coté d'un autre bloc flottant). Il te suffit donc d'enlever les width sur ces parties là et au besoin tu recadre tes images avec des margin-let et margin-right.
                                Tiens nous au courant. ;)
                                • Partager sur Facebook
                                • Partager sur Twitter
                                  2 avril 2006 à 22:14:07

                                  Super ! Je te remercie beaucoup, ça fonctionne très bien :p

                                  Merci beaucoup d'avoir passé du temps à chercher l'origine de tout ça.

                                  A bientôt (oui, je ne suis pas au bout de mes misères dans la programation à mon avis :) )

                                  Encore merci

                                  Anthony
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    2 avril 2006 à 22:51:15

                                    Ouah moi aussi j'avais ce problème depuis hier!! Merci d'en avoir parler et qu'une réponse en soit sorti. :D
                                    Mais bon à bat IE car je suis obligé de mettre un width T_T
                                    • Partager sur Facebook
                                    • Partager sur Twitter

                                    IE et CSS

                                    × 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