Partage
  • Partager sur Facebook
  • Partager sur Twitter

aligner 3 bloc

(css)

shaka
    16 décembre 2005 à 13:59:09

    bonjour,
    je ne comprend pa pourquoi les 3 blocs ne s'aligne pas sur une seul ligne...
    le code css :

    #polaire_gauche
    {
       float: left;
       width: 130px;
       background-image: url("images/polaire.jpg");
       background-color: yellow;
    }

    #haut_centre
    {
            margin-left:130;
            whdth : 530px;
            background-color: green;
    }

    #haut_droite
    {
            float: right;
            margin-left: 660px;
            whdth : 100px;
            background-color: red;
    }

    voila le haut_droite se trouve en dessous du haut_centre.
    Si quelqu'un peut m'aider... :euh:
    • Partager sur Facebook
    • Partager sur Twitter
    captain_torche
      16 décembre 2005 à 14:04:12

      La zone dans laquelle tu désires afficher ces trois blocs, est-elle suffisamment grande (On ne sait jamais) ?

      Sinon, tu as peut-être une marge "par défaut" de ton navigateur, qui serait à l'origine du souci.
      Essaye de rajouter :

      * {
          margin: 0;
          padding: 0;
      }

      pour réinitialiser toutes les marges par défaut.
      • Partager sur Facebook
      • Partager sur Twitter
      shaka
        16 décembre 2005 à 14:12:33

        désolé j'avais oublié le body

        body
        {
           width: 760px;
           margin: auto;
           margin-top: 20px; /*pr ne pas coller avec le haut */
        }

        voila enfn ca ne m'avance pas bien plus je crois.... :(
        • Partager sur Facebook
        • Partager sur Twitter
        tyberium
        • HTML / CSS
          16 décembre 2005 à 14:20:10

          salut

          Pourquoi mettre un margin-left à #haut_droite si important ? sinon essai de mettre des margin-right et margin-left à #haut_centre c est ptete des faute de frape mais c est widt h et non whdth essai ce code

          #polaire_gauche
          {
             float: left;
             width: 130px;
             background-image: url("images/polaire.jpg");
             background-color: yellow;
          }

          #haut_centre
          {
             margin-left:130;
             width : 530px;
             margin-left:130px;
             margin-right:100px;
             background-color: green;
          }

          #haut_droite
          {
             float: right;
             width : 100px;
             background-color: red;
          }


          ++
          • Partager sur Facebook
          • Partager sur Twitter
          Chiv
            16 décembre 2005 à 14:25:02

            Salut
            Alors déjà, je ne sais pas si c'est une erreur de copie mais dans ton premier message c'est width et pas whdth.

            Ensuite, essaie de mettre width pour ton bloc gauche et droite mais pas pour celui du milieu (qui prendra automatiquement la place qui lui reste). Et pas de margin.

            Moi je verrai plus un truc comme ça :


            #polaire_gauche
            {
               float: left;
               width: 130px;
               background-image: url("images/polaire.jpg");
               background-color: yellow;
            }

            #haut_centre
            {
                   
                background-color: green;
            }

            #haut_droite
            {
                    float: right;
                    background-color: red;
            }



            Attention aussi, je crois que les codes html des flottants doivent être avant les blocs autour duquel il flottent.
            Donc dans le html, tu dois avoir ton div gauche, ton div droite et ensuite ton div du milieu. (au lieu de le faire dans l'ordre auquel on s'attend, c'est à dire : gauche, centre, droite)

            Voilà, j'espère que ça a pu aider et que je n'ai pas fait d'erreur.
            • Partager sur Facebook
            • Partager sur Twitter
            captain_torche
              16 décembre 2005 à 14:27:22

              Après examen, il me semble voir l'erreur :
              ne mets pas de margin aussi grandes sur tes blocs, c'est sûrement ça qui gêne.

              Dans l'idéal, tu crées un div #page, dans lequel tu mettrais les autres divs.

              Ce qui te donnerait quelque chose du genre :

              * {
                 margin: 0px;
                 padding: 0px;
              }
              #page {
                 width: 760px;
              }
              #polaire_gauche
              {
                 float: left;
                 width: 130px;
                 background-image: url("images/polaire.jpg");
                 background-color: yellow;
              }

              #haut_centre
              {
                 width : 530px;
                 background-color: green;
              }

              #haut_droite
              {
                 float: right;
                 width : 100px;
                 background-color: red;
              }
              • Partager sur Facebook
              • Partager sur Twitter
              jp949
                16 décembre 2005 à 14:28:13

                tu es trop juste en largeur IE met par defaut 3px de margin sur les flottants tu as 2 flottants ca 6px
                • Partager sur Facebook
                • Partager sur Twitter
                shaka
                  18 décembre 2005 à 11:56:18

                  ca ne marche vraiment pas... :euh:
                  voila le code css :

                  #page
                   {
                     width: 760px;
                  }
                  #polaire_gauche
                  {
                     float: left;
                     width: 100px;
                     background-image: url("images/polaire.jpg");
                     background-color: yellow;
                  }

                  #haut_centre
                  {
                     width : 560px;
                     background-color: green;
                  }

                  #haut_droite
                  {
                     float: right;
                     width : 100px;
                     background-color: red;
                  }


                  et le code html :
                  <div id="page">
                          <div id="polaire_gauche">test</div>
                          <div id="haut_centre">lol</div>
                          <div id="haut_droite">test</div>
                  </div>

                  voila si quelqu'un peut résoudre ce problème.C'est le dernier bloc qui n'est pas aligné, et il y a un petit écart entre les blocs "polaire_gauche" et "haut_droite".
                  • Partager sur Facebook
                  • Partager sur Twitter
                  jp949
                    18 décembre 2005 à 12:06:17

                    #haut_centre
                    margin:auto;
                    html
                    flottant
                    flottant
                    nonflottant
                    • Partager sur Facebook
                    • Partager sur Twitter
                    yuston
                      18 décembre 2005 à 12:12:39

                      Moi j'avais rencontré un problème bien plus compliqué que ça: centré les trois blocs.... or ici c'est juste aligné....
                      Donc je vous renvoie à ce post http://www.webmaster-hub.com/index.php?showtopic=16526

                      Et le code de clb56 fonctionne très bien du moins dans mon cas... après il suffit d'adapter un peu pour ton cas précis... voici son post:
                      http://www.webmaster-hub.com/index.php?showtopic=16526&st=0&p=123755&#entry123755
                      • Partager sur Facebook
                      • Partager sur Twitter
                      jp949
                        18 décembre 2005 à 12:30:56

                        pour aligner 3 blocks pas besoin des position relative ou absolute (1float:left;) (1float:right;) (centre margin:0 auto;)
                        a condition de se souvenir que les flottants se placent avant le centre dans le code html
                        • Partager sur Facebook
                        • Partager sur Twitter

                        aligner 3 bloc

                        × 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