Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème float

j'en peux plus !!!

Finality
    19 décembre 2005 à 16:14:29

    Bonjour,
    je rencontre un problème sur mon site : je n'arrive pas à placer deux blocs l'un à côté de l'autre : sous FF, tout marche bien mais sous IE le bloc de droit se met sous le bloc de gauche.
    Voilà mon code HTML :

    <body>

    <div id="header">
    </div>

    <!-- Début des menus du haut -->
    <div id="menus_haut">

       <div class="gauche">
       
          <h3></h3>
              
              <div class="contenu_gauche">
              <p>Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla</p>
              </div>
              
       </div>
       
       <div class="droit">
       
          <h3></h3>
              
              <div class="contenu_droit">
              <p>Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla</p>
              </div>
       
       </div>
       
       <div id="bas">
       </div>
       
    </div>
    <!-- Fin des menus du haut -->

    <div id="milieu">

       <!-- Début corps -->
       <div id="corps">
       
          <h3></h3>
              
              <p>Kit nOx-design</p>

          <p>NOX-DESIGN, élaboraton et mise en oeuvre de toutes vos demandes en matière de design. Internet est à ce jour, un média de publicité au même titre que la radio, la télévision ou les journaux.</p>

          <p>Le graphisme véhicule la première image que le visiteur aura de votre organisation. La réussite de votre site passera par la qualité de cette image. C'est pourquoi il est primordial soit professionnelle et en harmonie avec l'image de votre société ou site perso, témoignage explicite de vos capacités.</p>

          <p>Si vous désirez découvrir les autres créations graphiques de nox-design, cliquez <a href="http://www.nox-design.net">ici</a></p>
              
       </div>
       <!-- Fin corps -->
       
       <!-- Début menu -->
       <div id="menu">
       
          <h3></h3>
              
              <ul>
              <li>Demo</li>
              <li>Demo</li>
              </ul>
              
       </div> 
       <!-- Fin menu -->
       
       <div id="footer">
       </div>
     
    </div>

    </body>


    Et mon CSS :

    #milieu
    {
       width:900px;
       height:auto;
       background-image:url(images/fond.png);
    }

    #corps
    {
       width:620px;
       height:auto;
       float:left;
    }

    #corps h3
    {
       width:620px;
       height:43px;
       background-image:url(images/corps/titre.png);
       margin:0px;
    }

    #corps p
    {
       width:554px;;
       margin-left:57px;
       margin-right:10px;
    }

    #menu
    {
       width:280px;
       height:auto;
       margin-left:620px;
    }

    #menu h3
    {
       width:280px;
       height:38px;
       background-image:url(images/menu/titre.png);
       margin:0px;
    }

    #menu ul
    {
       margin-left:15px;
       width:213px;
       list-style-type:none;
       padding-left:25px;
       color:#FFFFFF;
    }

    #footer
    {
       width:900px;
       height:64px;
       clear:both;
       background-image:url(images/footer.png);
    }


    Et voilà un lien : Lien
    Comment puis-je régler ce problème?
    Merci pour vos réponses
    • Partager sur Facebook
    • Partager sur Twitter
    scaler
      19 décembre 2005 à 17:22:54

      Salut,

      Pas facile n'est-ce pas de proposer des kits graphiques codés ;)

      Alors, tu devrais d'abord essayer en initialisant les marges intérieures et extérieures de #menu ul et #menu h3; enlève lui également sa largeur qui ne sert à rien.

      On va donc avoir pour le menu :

      #menu
      {
         width:280px;
         height:auto;
         margin-left:620px;
      }

      #menu h3
      {
         width:280px;
         height:38px;
         background-image:url(images/menu/titre.png);
         margin:0px;
         padding: 0px;
      }

      #menu ul
      {
         width:213px;
         list-style-type:none;
         color:#FFFFFF;
         margin:0px;
         padding: 0px;
      }

      #menu li
      {
        margin-left: 30px; /* ou text-indent: 30px si un problème se pose*/
      }


      Si vraiment, même sans les marges, IE t'ennuie ; essaye de passer ton menu en float: left; ou float: right.

      bon courage.
      • Partager sur Facebook
      • Partager sur Twitter
      Finality
        19 décembre 2005 à 17:34:56

        Oui c'est vrai que ce n'est pas toujours facile :D
        Merci pour ta réponse mais çà ne change rien. Même si je met le menu en float, çà fait le même beugue.
        Je sais plus quoi faire :(
        Personne n'aurait une idée ? :euh:
        • Partager sur Facebook
        • Partager sur Twitter
        scaler
          19 décembre 2005 à 18:05:55

          Yop,

          c'est cela que tu désire :
          http://www.kidlogis.com/toozeweb/zip_design/finality/

          Si tu veux récupérer les fichiers, je les ai zippés :
          archive

          bonne continuation
          • Partager sur Facebook
          • Partager sur Twitter

          Problème float

          × 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