Partage
  • Partager sur Facebook
  • Partager sur Twitter

positionnement des blocs css.

wydook66
    25 janvier 2006 à 14:27:59

    Bonjour à tous.

    J'ai fait un site avec un menu à gauche un autre à droite et le copr de la page au milieu.

    j'ai fait ca/

    <div id="menu-gauche">
       <!-- Ici on mettra le menu -->
        <div class="element_menu-gauche"> <!-- Cadre correspondant à un sous-menu --></div>
       </div>
    <div id="corps_rouge">
      <div class="element_corps">
    </div>
       </div>
    <div id="menu-droit">
       <!-- Ici on mettra le menu -->
        <div class="element_menu">
    </div>
       </div>



    et le css

    #corps_rouge
    {

       margin-left: 165px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
        margin-right: 125px; /* 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: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

       color: #000000;
       background: #F5EBE0; /* Une couleur de fond pour le corps */
     margin-top: 3px;
       border: 1px solid #003366;

       
    }
    #menu-gauche
    {
    margin-top: 5px;
    margin-bottom: 5px;
       float: left; /* Le menu flottera à gauche */
       width: 160px; /* Très important : donner une taille au menu */
        background: #F5EBE0;

    }
    #menu-droit
    {
    margin-top: 5px;
       float: right; /* Le menu flottera à droite */
       width: 120px; /* Très important : donner une taille au menu */
        background: #F5EBE0;
    }



    comment faire si je veut un menu à gauche un à droite, et au milieu sur le corps, 3 colonnes au lieu de une seule ?
    • Partager sur Facebook
    • Partager sur Twitter
    jp949
      25 janvier 2006 à 15:07:11

      salut.
      Je ne comprends pas trop ce que tu veux dire avec 3 colonnes dans une seule mais d'ores et deja dans le code html le menu droit est mal implementé
      • Partager sur Facebook
      • Partager sur Twitter
      wydook66
        25 janvier 2006 à 15:13:00

        en fait en ce moment, j'ai :

        menu gauche | corps | menu droit.

        Je souhaiterais avoir

        menu gauche | corps colonne 1 | corps colonne 2 | menu droit


        en fait ca ferais un truc dans ce style http://www.joelouvier.info/
        • Partager sur Facebook
        • Partager sur Twitter
        jp949
          25 janvier 2006 à 15:48:04

          tu peux mettre autant de colonnes que tu veux tu fais des flottants
          • Partager sur Facebook
          • Partager sur Twitter
          wydook66
            25 janvier 2006 à 16:14:58

            les flottants je saisie pas trop comment ca marche, étant donner que c'est un design extensible que je fait :euh:
            • Partager sur Facebook
            • Partager sur Twitter
            wydook66
              26 janvier 2006 à 10:22:08

              Ca veut pas marcher.
              J'essaye de faire 3 colonnes les unes a coté des autres et ca veut pas, sachant en plus que je le veut extensible, je sent que je suis pas sorti de l'auberge :(

              Je veut que les blocs jaune se retrouvent entre les deux menu

              <style type="text/css">

              body
              {color:black ; text-align:justify ; font-family: arial, verdana, sans-serif ; font-size: 10pt ; color: black ;
              background-color: #FFFFFF ;}

              .un
              { position:absolute ;
              left:10% ;
              top:430px ;
              font-family: Arial, Helvetica, sans-serif ;
              color: #000000 ;
              width: 40%;}

              .deux
              { position:absolute ;
              left:55% ;
              top:430px ;
              font-family: Arial, Helvetica, sans-serif ;
              color: #000000 ;
              background-color: #FFFF00 ;
              width: 40%;}

              #menu-gauche
              {
              margin-top: 5px;
              margin-bottom: 5px;
                 float: left; /* Le menu flottera à gauche */
                 width: 160px; /* Très important : donner une taille au menu */
                  background: #F5EBE0;

              }
              #menu-droit
              {
              margin-top: 5px;
                 float: right; /* Le menu flottera à droite */
                 width: 120px; /* Très important : donner une taille au menu */
                  background: #F5EBE0;
              }</style>
              <div id="menu-gauche">
                 <!-- Ici on mettra le menu -->
                  <div class="element_menu-gauche"> menu</div> </div>
              <div style="position:absolute ; left:10%; top:0px ; font-family: Arial, Helvetica, sans-serif ; color: #000000 ; background-color: #FFFF00 ; width: 40%;" > Texte .... </div>

              <div style="position:absolute ; left:55%; top:0px ; font-family: Arial, Helvetica, sans-serif ; color: #000000 ; background-color: #FFFF00 ; width: 40%;" > Texte .... </div>

              <div id="menu-droit">
                 <!-- Ici on mettra le menu -->
                  <div class="element_menu"> menu</div> </div>
              • Partager sur Facebook
              • Partager sur Twitter
              jp949
              wydook66
                26 janvier 2006 à 19:13:55

                Citation : jp949

                vas a cette adresse et recupere les codes
                http://www.jp949.info/sand_fichiers/testcss.php




                J'arrive pas a acceder à la page :(
                • Partager sur Facebook
                • Partager sur Twitter
                jp949
                  27 janvier 2006 à 5:17:23

                  pourtant c'est la bonne adresse quand je clic je tombe dessus sans probleme
                  • Partager sur Facebook
                  • Partager sur Twitter
                  wydook66
                    27 janvier 2006 à 10:39:22

                    J'ai essayer avec IE, mozzila et Opera , et ca marche pas. :(
                    • Partager sur Facebook
                    • Partager sur Twitter
                    jp949
                      27 janvier 2006 à 12:59:50

                      sur cette adresse tu y arrives ? ou j'ai un probleme de serveur?
                      • Partager sur Facebook
                      • Partager sur Twitter
                      wydook66
                        27 janvier 2006 à 13:08:09

                        non j'y arrive pas.
                        • Partager sur Facebook
                        • Partager sur Twitter
                        wydook66
                          28 janvier 2006 à 10:07:47

                          Bon j'ai un souci maintenant, et oui encore un. :euh:

                          J'ai fait ca :

                          <style type="text/css">

                          <!--
                          body
                          {
                             width: 100%;
                             margin: auto; /* Pour centrer notre page */
                             margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
                             margin-bottom: 20px;    /* Idem pour le bas du navigateur */
                           background: #ffffff;
                          }
                          .global {
                          width: 100%;
                             margin: auto; /* Pour centrer notre page */
                             margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
                             margin-bottom: 20px;    /* Idem pour le bas du navigateur */
                           background: #ffffff;
                            }


                          .global #colonne1 {
                                  background: #F5EBE0;
                                  margin: 0 ;
                                  float: left;
                                  height: 200px;
                                  width: 20%;
                          }
                          .global #colonne2 {
                                  background:#ECECFF;
                                  margin: 0px;
                                  float: left;
                                  height: 200px;
                                  width: 30%;
                          }
                          .global #colonne3 {
                                  background:#CC9999;
                                  margin: 0px;
                                  float: left;
                                  height: 200px;
                                  width: 30%;
                          }
                          .global #colonne4 {
                                  background:#F5EBE0;
                                  margin: 0px;
                                  float: left;
                                  height: 200px;
                                  width: 20%;
                          }

                          </style>
                          </head>
                          <body>
                          <div class="global">

                          <div id="colonne1">menu</div>
                          <div id="colonne2">corps1</div>
                          <div id="colonne3">corps2</div>
                          <div id="colonne4">info site</div>

                          </div></body>



                          qui me donne ceci http://www.meteo-world.com/testcss.htm


                          le problème c'estr que cous IE la colonne info site se retrouve en bas, et quand j'ouvre la fenetre favoris elle se place bien à coté des autre o_O

                          Moi je veut les 4 sur la meme ligne
                          • Partager sur Facebook
                          • Partager sur Twitter
                          jp949
                            28 janvier 2006 à 11:41:02

                            c'est simple IE prend 3px de marge par default.
                            faut donc que tu enleves (+ - 0.5%) a ta colonne pour qu'il place sa marge
                            • Partager sur Facebook
                            • Partager sur Twitter
                            wydook66
                              28 janvier 2006 à 21:04:21

                              Ouais bon , ca merdouille toujours. Les blocs ne sont pas alignés sur le coté droits, moi je ne veut pas de décalge, je les veut aligner, et j'aimerais aussi qu'il n'y ai aucun espace entre eux.

                              Avec firefox ou opera j'en parle memepas. J'ai le premiers blocs qui s'imbrique dans le deuxieme. :( (voiri ce que ca donne ici http://www.meteo-world.com/testcss.htm


                              <style type="text/css">
                              body
                              {
                                 width: 100%;
                                 margin: auto; /* Pour centrer notre page */
                                 margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
                                 margin-bottom: 20px;    /* Idem pour le bas du navigateur */
                               background: #ffffff;
                              }
                              #menu
                              {
                                 float: left; /* Le menu flottera à gauche */
                                 width: 100%; /* Très important : donner une taille au menu */
                              }

                              .element_menu
                              {
                                 background-color: #626262;
                                 background-image: url("images/motif.png");
                                 background-repeat: repeat-x;
                                       float: left;
                                 border: 1px solid black;
                                   width: 49%;
                                 margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
                              }
                              #corps_bleu
                              {
                                 margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
                                 padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
                                 
                                 color: #000000;
                                background: #ECECFF; /* Une couleur de fond pour le corps */
                               
                                 
                                border: 1px solid #003366
                              }</style>

                              <body>
                              <div id="menu">

                                 <div class="element_menu">
                                     <h3>Titre menu</h3> <!-- Titre du sous-menu -->
                                     <ul>
                                         <li>Lien</li> <!-- Liste des liens du sous-menu -->
                                         <li>Lien</li>
                                         <li>Lien</li>
                                     </ul>
                                 </div>

                                 <div class="element_menu">
                                     <h3>Titre menu</h3>
                                     <ul>
                                         <li>Lien</li>
                                         <li>Lien</li>
                                         <li>Lien</li>
                                     </ul>
                                 </div>  </div>

                              <div id="corps_bleu">
                               <!-- Cadre correspondant à un sous-menu -->
                                <p>corps </p>
                                <p>1</p>
                                <p>1</p>
                                <p>1</p>
                                <p>1</p>
                              </div>

                              <div id="menu">

                                 <div class="element_menu">
                                     <h3>Titre menu</h3> <!-- Titre du sous-menu -->
                                     <ul>
                                         <li>Lien</li> <!-- Liste des liens du sous-menu -->
                                         <li>Lien</li>
                                         <li>Lien</li>
                                     </ul>
                                 </div>

                                 <div class="element_menu">
                                     <h3>Titre menu</h3>
                                     <ul>
                                         <li>Lien</li>
                                         <li>Lien</li>
                                         <li>Lien</li>
                                     </ul>
                                 </div>  </div></body>
                              • Partager sur Facebook
                              • Partager sur Twitter
                              jp949
                                29 janvier 2006 à 8:15:47

                                tu veux 4 blocs alignés je te donne un code et tu emploies une autre methode apres tu pleures.
                                je t'ai donné un code pour aligner autant de blocs que l'on veut , la dans ton code tu mets 1 flottant le reste est dans le flux ne te disperse pas positionne d'abord tes 4 blocs apres tu verras pour mettre le contenu
                                • Partager sur Facebook
                                • Partager sur Twitter
                                wydook66
                                  29 janvier 2006 à 9:49:54

                                  Pas évident du tout.

                                  Voilà ce que je veut faire au final, http://www.meteo-world.com/testcss2.htm et j'y arrive pas. En regardant les cours y a pas un exemple concret pour résoudre mon probleme :(
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  jp949
                                    29 janvier 2006 à 10:00:03

                                    je le prepare et je le mets en ligne
                                    voila a cette adresse
                                    ici
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                    wydook66
                                      29 janvier 2006 à 11:25:09

                                      Merci beaucoup.

                                      J'ai bidouiller un peu deux trois trucs et je pense avoir compris le système.

                                      Je reviendrais si je bug à nouveau.

                                      Tu me dira comment on enlève les marges.

                                      Merci beaucoup :)
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                      jp949
                                        29 janvier 2006 à 11:37:35

                                        ok si tu as des arrieres plan en couleur ce sera necessaire
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                        wydook66
                                          29 janvier 2006 à 11:51:15

                                          non je met juste une couleur de fond, c'est tout.

                                          • Partager sur Facebook
                                          • Partager sur Twitter

                                          positionnement des blocs 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