Partage
  • Partager sur Facebook
  • Partager sur Twitter

trou de 5 pixels dans mon design ...

Sujet résolu
JefGrailet
    23 avril 2006 à 12:13:16

    bonjour à tous , je suis en train de modifier mon design , j'y parviens tant que maintenant mais le problème reste que j'ai un trou de 5 pixels entre le haut du corps et le centre du corps !

    En fait , c'est une sorte de cadre découpé en 3 images : le haut du cadre (avec les arrondis) , le centre du cadre (pas d'arrondis) , et le bas du cadre (avec les arrondis) ...

    Je répète avec le css le centre du cadre , et ça donne à peu près ça : cliquez ici ...

    Bref tout va bien sauf un trou de 5 pixels dans le cadre ! J'ai essayé de faire un margin-top : -5px; , ça marche sous firefox mais sous ie ça fait tout foirer ! (une propriété qu'il ne connait pas si je me trompe ...)

    Donc quelqu'un peut me trouver une astuce pour combler le trou dans mon design ?

    le code complet :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>.:Gameworld : Nomadeland:.</title>
    <style type="text/css">
    <!--
    body {width:850px; height:auto; margin:0 auto; padding:0;background:#202020; }
    #L {
            background:#2f2f2f  url(new_design/nomadeland_L.png) repeat-y left top;
            margin: 0px;
            padding: 0px;
            height: auto;
            width: auto;
    }
    #R {
            background: url(new_design/nomadeland_R.png) repeat-y right top;
            margin: 0px;
            padding: 0px;
            height: auto;
            width: auto;
    }
    #banniere {
            margin: 0px 34px 0px 29px;
            padding: 0px;
            height: 164px;
            width: auto;
            background: #2f2f2f  url(new_design/nomadeland_header.png) no-repeat center center;
    }
    #m_horiz {
            margin: 0 35px 0 30px;
            padding: 0px;
            height: 38px;
            width: auto;
            #2f2f2f
    }
    #horzi_L {
            background: url(new_design/nomadeland_m_horiz_L.png) no-repeat left center;
            margin: 0px -3px 0px 0px;
            padding: 0px;
            height: 33px;
            width: 51px;
            float:left;
    }
    #horiz_R {
            background: url(new_design/nomadeland_m_horiz_R.png) no-repeat right center;
            margin: 0px 0px 0px -3px;
            padding: 0px;
            float: right;
            width: 50px;
            height:33px;
    }

    #horiz_C{
            background: #2f2f2f  url(new_design/nomadeland_m_horiz_C.png) repeat-x right center;
            margin: 0;
            padding: 0px;
            height: 33px;
            width: auto;
            text-align:center;
    }
    #m_horiz a {color:#fff; text-decoration:none;font-weight:500;
     padding:0 0.5em 0 0.5em;  margin: 6px 0 0 0; display:block;
    font-size:0.9em; font-family:Arial, Helvetica, sans-serif; }
    #m_horiz ul { margin:0 10%; padding:0 ; list-style:none; }
    #m_horiz li { float:left; display:block; }
    #menu {
            display: inline;
            margin: 0 0px 0px 20px;
            padding: 0px;
            float: left;
            height: auto;
            width: 150px;
    }
    #menu h3 {
            background: url(new_design/h_menu.png) no-repeat;
            margin: 0px auto;
            padding: 5px 0 0 0px;
            height: 23px;
            width: 136px;
            font-size:16px;
            color:#FFFFFF;
            text-align:center;
    }
    #menu a { text-decoration:none; color:#fff; display:block; margin:0;
    font-weight:500; font-size:15px; font-family:Arial, Helvetica, sans-serif; }
    #menu ul { margin: 0 6px 0 2px; padding:2px 0 4px 0; list-style:none; background: #224563; }
    #menu li {margin:3px 0 0 16px; padding:0; }     
    .sous_menu {
            margin: auto  auto 20px auto;
            padding: 0px;
            height: auto;
            width: 140px;
    }
    #corps {
        background: #2f2f2f;
            margin: 0px 35px 0px 30px;
            padding: 0px;
            height: auto;
            width: auto;
            }
    #contenu {
            margin: 0px 16px 0px 170px;
            height: auto;
            width: auto;
              background: #2f2f2f url(new_design/corps.png) repeat-y;
    }
    #bas
    {
    margin-left: 170px;
    }

    #haut
    {
    margin-left: 170px;
    }

    #contenu p { color:#fff;  margin: 0px 15px; text-align:justify; font-family: arial,sans-serif,verdana;  font-size : 13px;}
    #contenu h1  { margin: 0px 15px; font-family: arial , sans-serif , verdana; }
    #contenu h2  { margin: 0px 15px; font-family: arial , sans-serif , verdana; }
    #contenu h3 {  margin: 0px 15px; font-family: arial , sans-serif , verdana; }
    #contenu h4  { margin: 0px 15px; font-family: arial , sans-serif , verdana; }
    #contenu h5  { margin: 0px 15px; font-family: arial , sans-serif , verdana; }
    #contenu h6  { margin: 0px 15px; font-family: arial , sans-serif , verdana; }
    #contenu textarea  { margin: 0px 15px; }
    #contenu table  { margin: 0x 15px; }
    #contenu input  { margin: 0px 15px; }

    #contenu a
    {
    text-decoration: none;
    color: rgb(23,139,255);
    }

    #contenu a:hover
    {
    text-decoration: none;
    color: white;
    }

    #contenu a:active
    {
    text-decoration: none;
    color: rgb(0,120,240);
    }

    #contenu a:focus
    {
    text-decoration: none;
    color: rgb(0,120,240);
    }

    #contenu a:visited
    {
    text-decoration: none;
    color: rgb(0,120,240);
    }


    #footer { width:100%; text-align:center; background: #2f2f2f;
    font-size:12px; color:#fff; clear:both;}
    .tableau
    {
     border: 2px outset rgb(214,240,255);
     border-collapse: collapse;
    }

    .th
    {
     border: 2px outset rgb(214,240,255);
     background-color: rgb(214,240,255);
     color: black;
      FONT-SIZE: 13px;
    }


    .td
    {
     border: 2px outset rgb(214,240,255);
     background-color: white;
     color: black;
     margin: 12px 15px;
    text-align:justify;
    font-family: arial,sans-serif,verdana; 
    font-size : 13px;
    }

    -->
    </style>
    </head>

    <body>
    <div id="L">
      <div id="R">
        <div id="banniere"></div>
        <div id="m_horiz">
          <div id="horzi_L"></div><div id="horiz_R"></div>
          <div id="horiz_C"><ul><li><a href="http://nomadeland.jexiste.fr/index.php">Gameworld</a></li>  <li><a href="http://nomadeland.jexiste.fr/nomadeland/index2.php">Sedentaryland</a></li> <li><a href="http://nomadeland.jexiste.fr/nomadeland/em.php">Espace membre</a></li></ul></div></div> <div id="corps">
            <div id="menu">
                              <div class="sous_menu"><h3>Rechercher</h3>
    <ul><form action="rechercher.php" method="post">
       &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="search" size="12"/><br/><br/>
      &nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Rechercher" name="envoyer"/>
       </form></ul></div>
              <div class="sous_menu"><h3>Jeux vidéos</h3>
    <ul><li><a href="tp.php">- Tests et <br/> &nbsp;  previews</a></li><li><a href="dossiers.php">- Dossiers</a></li><li><a href="as.php">- Astuces et <br/> &nbsp; soluces</a></li><li><a href="tp_rapidos.php">- Rapidos</a></li><li><a href="pre-test.php">- Pré-tests</a></li><li><a href="liste_bilans.php">- Bilans</a></li>
    <li><a href="video1.php">- Vidéos</a></li><li><a href="tp_fiches.php">- Fiches</a></li><li><a href="index.php">- News</a></li></ul></div></div>
    <div id="haut">
    <img src="new_design/haut.png" alt="haut"/>
    </div>

                    <div id="contenu">
                    <h3>Bow ?</h3><p>Quelques mois après avoir démonté Black hole , tout le monde pensait que ce serait fini. Les 4 grandes armées , Orange star , Blue moon , Yellow comet et Green earth se sont associés et formés les nations unies. Malheureusement , l'armée de Black hole refait surface. En peu de temps , Black Hole s'est reconstruit une grande armée avec des nouveaux généraux. Bref , la guerre est déclarée , et Oméga land , pays de Jake , ou le premier général à utiliser , est menacé. Mais la question reste : comment Black hole a fait pour se reconstruire en si peut de temps ?<br/><br/>
                    <br/><br/>
                   
                    Quelques mois après avoir démonté Black hole , tout le monde pensait que ce serait fini. Les 4 grandes armées , Orange star , Blue moon , Yellow comet et Green earth se sont associés et formés les nations unies. Malheureusement , l'armée de Black hole refait surface. En peu de temps , Black Hole s'est reconstruit une grande armée avec des nouveaux généraux. Bref , la guerre est déclarée , et Oméga land , pays de Jake , ou le premier général à utiliser , est menacé. Mais la question reste : comment Black hole a fait pour se reconstruire en si peut de temps ?<br/><br/>
                    <img src="wipe1.png" alt="wipeout"/></p>
    </div>
       <div id="bas">
    <img src="new_design/bas.png" alt="bas"/>
    </div>
               <div id="footer"><img src="new_design/footer.png" alt="graphisme" /><br/><br/>

    <p><a href="changer_design.php">Changer de design</a></p></div>
          </div>
      </div>
    </div>

    </body>
    </html>


    voilà le CSS qui concerne le problème :
    #contenu {
            margin: -5px 16px 0px 170px;
            padding: 0 0 15px 0;
            height: auto;
            width: auto;
              background: #2f2f2f url(new_design/corps.png) repeat-y;
    }

    #bas{
    margin: -5px 16px 0px 170px;
    }


    la partie HTML du problème :

                    <img src="new_design/haut.png" alt="haut"/>
                    <div id="contenu">
    </div>
    <div id="bas">
                    <img src="new_design/bas.png" alt="bas"/>
                    </div>   


    je n'ai rien trouvé pour le moment !

    Merci beaucoup à celui qui peut m'aider !
    • Partager sur Facebook
    • Partager sur Twitter
    ljam
      23 avril 2006 à 12:42:41

      Salut,

      Ce serait mieux si tu nous mettais un lien vers ton travail plutôt qu'un screen.

      Essaie d'appliquer un margin-top: 0; sur le titre de ton article (BOW?)

      Sans le code complet, c'est difficile de voir vraiment mais bon...

      @++
      • Partager sur Facebook
      • Partager sur Twitter
      JefGrailet
        23 avril 2006 à 14:10:19

        j'ai essayé , malheureusement ça ne marche , je sais pas par quel miracle il me fait ce trou. D'ailleurs je vais mettre le code complet dans mon premier message , mais bon il est assez long , je vous préviens d'avance
        • Partager sur Facebook
        • Partager sur Twitter
        yöm
          23 avril 2006 à 14:19:07

          *{
              margin: 0;
              padding: 0;
          }


          En tête du code CSS et le tour est joué. (On appelle ça le sélecteur universel, il concerne tout les éléments, et ici on réduit les marges par défaut)
          • Partager sur Facebook
          • Partager sur Twitter
          JefGrailet
            23 avril 2006 à 14:28:04

            ben ça fait quelques effets qui sont assez pratiques (je t'en remercie d'ailleurs) , mais mon trou est toujours là :(
            • Partager sur Facebook
            • Partager sur Twitter
            llouis
              23 avril 2006 à 14:35:57

              Applique un positionnement relatif sur ton corps : ^^
              #corps
              {
              position : relative ;
              bottom : 5px ;
              }

              Si ton corps est déjà positionné en absolu ou en float, utilise un
              margin-top : -5px ;
              • Partager sur Facebook
              • Partager sur Twitter
              JefGrailet
                23 avril 2006 à 14:38:53

                voilà ça marche ! Merci beaucoup ! ^^

                • Partager sur Facebook
                • Partager sur Twitter

                trou de 5 pixels dans mon 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