Partage
  • Partager sur Facebook
  • Partager sur Twitter

Probleme design

Sujet résolu
pspman80
    23 octobre 2006 à 15:47:45

    Bonjour a tous, j'ai un petit probleme avec mon design, je n'arrive pas a mettre le corps a coté du menu:
    http://xavier.deneux.free.fr/design_xav/design.html

    voici le css:

    .menu {width: 222px; height: 540px; margin-bottom: 20px;margin-top: 100px;margin-left: 100px;background-color: #EAEAEA; }
    .menu div { float: left; } /* S'apllique à tous les divs de .cadre_arrondi */   
               
    .hg_menu {width: 10px; height: 36px; background-image: url('/design_xav/hg.png');}
    .hd_menu {width: 10px; height: 36px; background-image: url('/design_xav/hd.png');}
    .bd_menu {width: 10px; height: 10px; background-image: url('/design_xav/bd.png');}
    .bg_menu {width: 10px; height: 10px; background-image: url('/design_xav/bg.png');}

             
    .haut_menu {width: 200px; height: 35px; background-image: url('/design_xav/h.png');}
    .bas_menu {width: 200px; height: 10px; background-image: url('/design_xav/b.png'); }
                     
    .gauche_menu {width: 9px; height: 500px; background-image: url('/design_xav/g.png');}
    .droite_menu {width: 10px; height: 500px; margin-left: 143px; background-image: url('/design_xav/d.png');}
               

    .hg_menu, .gauche_menu, .bg_menu { clear: left; } /* Pour passer outre le float des blocs précédents */




    .corps {width: 222px; height: 540px; margin-bottom: 20px;margin-top: 100px;margin-left: 100px;background-color: #EAEAEA; float: right;}
    .corps div {float: left; } /* si je met float:right, c'est encore pire! */

    .hg_corps {width: 10px; height: 36px; background-image: url('/design_xav/hg.png');}
    .hd_corps {width: 10px; height: 36px; background-image: url('/design_xav/hd.png');}
    .bd_corps {width: 10px; height: 10px; background-image: url('/design_xav/bd.png');}
    .bg_corps {width: 10px; height: 10px; background-image: url('/design_xav/bg.png');}

             
    .haut_corps {width: 200px; height: 35px; background-image: url('/design_xav/h.png');}
    .bas_corps {width: 200px; height: 10px; background-image: url('/design_xav/b.png'); }
                     
    .gauche_corps {width: 9px; height: 500px; background-image: url('/design_xav/g.png');}
    .droite_corps {width: 10px; height: 500px; margin-left: 143px; background-image: url('/design_xav/d.png');}



    Et ici le html:
    <div class="menu">
                           
                            <div class="hg_menu"></div>
                            <div class="haut_menu"></div>
                            <div class="hd_menu"></div>
                           
                            <div class="gauche_menu"></div>
                            <div class="contenu_menu">DSFSD<br/>zefiyzeiçf<br/>ugidsfiezè</div>
                            <div class="droite_menu"></div>
                           
                            <div class="bg_menu"></div>
                            <div class="bas_menu"></div>
                            <div class="bd_menu"></div>
                   
    </div>   

    <div class="corps">
                           
                            <div class="hg_corps"></div>
                            <div class="haut_corps"></div>
                            <div class="hd_corps"></div>
                           
                            <div class="gauche_corps"></div>
                            <div class="contenu_corps">DSFSD<br/>zefiyzeiçf<br/>ugidsfiezè</div>
                            <div class="droite_corps"></div>
                           
                            <div class="bg_corps"></div>
                            <div class="bas_corps"></div>
                            <div class="bd_corps"></div>
                   
    </div> 
    • Partager sur Facebook
    • Partager sur Twitter
    ybouane
    • HTML / CSS
      23 octobre 2006 à 16:06:28

      uttilise les flotant pour le .corp div{} et .corp{}
      • Partager sur Facebook
      • Partager sur Twitter
      pspman80
        23 octobre 2006 à 16:17:41

        Ca n'evolue pas beaucoup, j'ai edité mon code css, au niveau de la ligne corps ou j'ai rajouté float...
        • Partager sur Facebook
        • Partager sur Twitter
        ybouane
        • HTML / CSS
          23 octobre 2006 à 16:21:32

          remplace ca:
          .corps div {float: left; } /* si je met float:right, c'est encore pire! */

          par ca:
          div[class=corps] {float: left; } /* si je met float:right, c'est encore pire! */
          • Partager sur Facebook
          • Partager sur Twitter
          pspman80
            23 octobre 2006 à 16:25:02

            C'est encore pire :s
            Regarde: http://xavier.deneux.free.fr/design_xav/design.html

            Le code modifié:
            .corps {width: 222px; height: 540px; margin-bottom: 20px;margin-top: 100px;margin-left: 100px;background-color: #EAEAEA; float: right;}
            div[class=corps] {float: left; } /* si je met float:right, c'est encore pire! */
            • Partager sur Facebook
            • Partager sur Twitter
            SnooZ
              23 octobre 2006 à 17:49:55

              essai .menu {float:left;) et enlève le float du corps et mais lui un margin-left>à la largeur de ton menu
              • Partager sur Facebook
              • Partager sur Twitter
              pspman80
                23 octobre 2006 à 17:56:12

                Merci mec, ca marche nikel, je donne mon code source css, ca pourrait toujours servir a qqun!


                .menu {width: 222px; height: 540px; margin-bottom: 20px;margin-top: 100px;margin-left: 50px;background-color: #EAEAEA; float:left; }
                .menu div { float: left; } /* S'apllique à tous les divs de .cadre_arrondi */

                .hg_menu {width: 10px; height: 36px; background-image: url('/design_xav/hg.png');}
                .hd_menu {width: 10px; height: 36px; background-image: url('/design_xav/hd.png');}
                .bd_menu {width: 10px; height: 10px; background-image: url('/design_xav/bd.png');}
                .bg_menu {width: 10px; height: 10px; background-image: url('/design_xav/bg.png');}


                .haut_menu {width: 200px; height: 35px; background-image: url('/design_xav/h.png');}
                .bas_menu {width: 200px; height: 10px; background-image: url('/design_xav/b.png'); }

                .gauche_menu {width: 9px; height: 500px; background-image: url('/design_xav/g.png');}
                .droite_menu {width: 10px; height: 500px; margin-left: 143px; background-image: url('/design_xav/d.png');}


                .hg_menu, .gauche_menu, .bg_menu { clear: left; } /* Pour passer outre le float des blocs précédents */




                .corps {width: 222px; height: 540px; margin-bottom: 20px;margin-top: 100px;margin-left: 100px;background-color: #EAEAEA; float: left;}
                .corps div {float: left; }

                .hg_corps {width: 10px; height: 36px; background-image: url('/design_xav/hg.png');}
                .hd_corps {width: 10px; height: 36px; background-image: url('/design_xav/hd.png');}
                .bd_corps {width: 10px; height: 10px; background-image: url('/design_xav/bd.png');}
                .bg_corps {width: 10px; height: 10px; background-image: url('/design_xav/bg.png');}


                .haut_corps {width: 200px; height: 35px; background-image: url('/design_xav/h.png');}
                .bas_corps {width: 200px; height: 10px; background-image: url('/design_xav/b.png'); }

                .gauche_corps {width: 9px; height: 500px; background-image: url('/design_xav/g.png');}
                .droite_corps {width: 10px; height: 500px; margin-left: 143px; background-image: url('/design_xav/d.png');}

                • Partager sur Facebook
                • Partager sur Twitter

                Probleme design

                × 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