Partage
  • Partager sur Facebook
  • Partager sur Twitter

Plusieurs bugs ...

Sujet résolu
Anonyme
    27 décembre 2005 à 20:37:08

    Bonsoir ,

    J'ai plusieurs bugs pour la programmation de mon design tout d'abord un lien :
    http://s140718937.onlinehome.fr/d%e9coupes/leyo

    Alors voici les bugs :
    -Le "News" est mal centré ! quand j'essaye de taper le code dans le css sa déplace tout le bloc du titre_contenu
    -les barres autour du design sont trop grandes ! j'ai essayé de modifié la taille mais sa ne fait rien ou elle deviennent trop petites !
    -le texte dépasse du bloc contenu !
    -J'aimerais changer la couleur de l'extérieur des barres seulement sa bug un peu et sa se réparti sur un bout de la page

    Voila ! ^^

    Maintenant mes codes :


    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
       <head>
           <title>Nightmares</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
               <link rel="stylesheet" media="screen" type="text/css" title="Design Nightmares" href="style.css" />
       </head>
       <body>
       <div id="global">
       <div id="header"></div>
       
       <div id="menu"></div>
       <div id="texte_menu">
       <a href="#">Home -</a>
       <a href="#">Nightmares -</a>
       <a href="#">Pactes -</a>
       <a href="#">Guerres -</a>
       <a href="#">Membres -</a>
       <a href="#">Recrutement -</a>
       <a href="#">Contact</a>
       
       <div id="titre_contenu"><p><b>News</b></p></div>
       <div id="contenu"></div>
       <div id="texte_contenu"><p>Bienvenue sur mon site !</p>
       <p> bla bla bla </p></div>
       
       <div id="footer"></div>
       <div id="footer2"><span class="texte_footer">
       <a href="#">Admin -</a>
       <a href="#">Liens -</a>
       <a href="#">A Propos</a>
       </div>
       <div id="footer3"></div>
       <div class="texte_footer"></div>
       <div id="barre"></div>
       <div id="barre2"></div>
       </div>
       </body>
       </html>



    body
    {
    width: 650px;
    background-image: url("images/fond.gif");
    background-repeat: repeat;
    color: #000000;
    }

    #global
    {

    width: 650px;
    }

    #barre
    {

    width: 13px;
    height : 850px;
    background-image: url("images/barre.gif");
    background-repeat: repeat;
    right:15px;
    position: absolute;
    top: 1px;
    margin-right: 130px;
    float: right;

    }

    #barre2
    {

    width: 13px;
    height : 850px;
    background-image: url("images/barre.gif");
    background-repeat: repeat;
    top: 1px;
    left: 150px;
    float: left;
    position: absolute;
    }

    #header
    {

    width: 502px;
    height: 114px;
    background-image: url("images/header.gif");
    background-repeat: no-repeat;
    margin-left : 242px;
    }

    #menu
    {

    width: 505px;
    height: 37px;
    background-image: url("images/header2.gif");
    background-repeat: no-repeat;
    text-align: center;
    margin-left : 241px;
    font-size: small;
    }

    #titre_contenu
    {

    width: 502px;
    height: 20px;
    background: url("images/titre_contenu.gif");
    background-repeat: no-repeat;
    margin-top: 55px;
    font-size: small;
    text-align: left;
    padding-left: 46px;
    margin-left: 3px;
    }

    #contenu
    {

    width:503px;
    height:177px;
    background-image: url("images/fond_contenu.gif");
    background-repeat: repeat-y;
    margin-left: 3px;
    }

    #texte_contenu
    {

    width: 503px;
    height:177px;
    font-family: "Tahoma", Arial, serif;
    font-size: small;
    margin-top: -160px;
    text-align: left;
    }

    #footer
    {

    width: 504px;
    height: 9px;
    background-image: url("images/footer1.gif");
    background-repeat: no-repeat;
    padding-left: 25px;
    margin-top: 40px;
    }

    #footer2
    {

    width: 505px;
    height: 11px;
    background-image: url("images/footer2.gif");
    background-repeat: no-repeat;
    }

    #footer3
    {

    width: 506px;
    height: 48px;
    background-image: url("images/footer3.gif");
    background-repeat: no-repeat;
    }

    #texte_menu
    {

    width: 503px;
    margin-left: 240px;
    margin-top: -29px;
    text-align: center;
    font-family: "Tahoma", Arial, Verdana, serif;
    font-size: x-small;
    }

    .texte_footer
    {
    width: 505px;
    height: 74px;
    font-family: "Tahoma", Arial, Verdana, serif;
    font-size: x-small;
    color: black;
    margin-bottom: 30px;
    margin-top:30%;
    text-align: center;
    }

    a
    {
    text-decoration: none;
    color: black;
    margin-left: 6px;
    }


    Merci d'avance !










    • Partager sur Facebook
    • Partager sur Twitter
      27 décembre 2005 à 21:41:38

      Pour le texte dépassant dans le contenu :

      #texte_contenu
      {

      [...]
      padding-left: 20px; /* On définie une marge intérieure à gauche */
      }


      Pour les barres, rien de plus simple que de réduire leur hauteur :

      #barre
      {

      [...]
      height : 750px;
      [...]
      }

      #barre2
      {

      [...]
      height : 750px;
      [...]
      }


      Pour le titre News, réduis sa largeur et sa marge intérieure gauche :

      #titre_contenu
      {

      width: 452px;
      [...]
      padding-left: 50px;
      }


      Et ça, je ne vois pas à quoi ça sert :

      .texte_footer
      {
      width: 505px;
      height: 74px;
      font-family: "Tahoma", Arial, Verdana, serif;
      font-size: x-small;
      color: black;
      margin-bottom: 30px;
      margin-top:30%;
      text-align: center;
      }
      • Partager sur Facebook
      • Partager sur Twitter
      Anonyme
        27 décembre 2005 à 21:55:49

        Merci !

        Pour le contenu qui dépasse => OK
        Pour les barres : non , http://s140718937.onlinehome.fr/d%e9coupes/leyo/
        Les barres ne vont pas jusqu'au bout. J'aimerais qu'elles s'arretent juste un peu après le footer
        Pour le "news" ba sa la déplacer un peu sur la droite mais je voudrais juste un tout petit peu sur le bas
        Et pour le code qui sert à rien c'est rectifier :)
        Voila !

        Merci encore !
        • Partager sur Facebook
        • Partager sur Twitter
          27 décembre 2005 à 22:52:43

          Pour le titre de news :
          #titre_contenu p
          {
          padding-top: 3px;
          }


          Pour les barres une hauteur de height : 555px; c'est bon ;) Ce qui fait le scroll vertical après, c'est ça :
          .texte_footer
          {
          width: 505px;
          height: 74px;
          font-family: "Tahoma", Arial, Verdana, serif;
          font-size: x-small;
          color: black;
          margin-bottom: 30px;
          margin-top:30%;
          text-align: center;
          }


          En le supprimant, rien ne devrait changer ;)
          • Partager sur Facebook
          • Partager sur Twitter
          Anonyme
            27 décembre 2005 à 23:01:12

            Super !
            Tout est nikel
            Merci ! ! !
            PS = pour les barres j'ai mis 578 et c'est pile poil !

            Mais sinon pour la couleur du fond pour l'extérieur des barres tu c'est comment faire ?
            • Partager sur Facebook
            • Partager sur Twitter
              27 décembre 2005 à 23:05:04

              bonjour,

              en reprenant ton code en enlevant et ajoutant des balises (toutefois, je suis rester sur ton idée de base sans tout reprendre).
              On arrive alors a faire descendre tes barres jusqu'en bas (technique des cadres arrondis en simplifié)en appliquant une hauteur de 100% minimale a la page .
              en tentant de redecouper le html plutot par zone , ex ..un conteneur pour la news que l'on centre, etc...
              ajout d'une couleur de fond a certains conteneurs et placement de l'image en bas , de façon a obtenir des boites extensibles...

              en bref, pour coder un design, il est preferables de le decouper d'abord par zone,
              eventuellement un conteneur globale , l'entete, le menu (qui peut etre integre a l'entete si il est horizontale), les differents contenus, (menus lateraux, news,ou autre cadres de textes, ).
              En appliquant des largeurs et hauteurs et fond de couleurs a ces differentes zones (<div>), on commence par s'appliquer a les positionner.
              ensuite vient seulement les textes et liens a inclure et les fonds ou images, c'est la qu'intervient le plus gros travail sur le css.
              Pour l'extensibilite on enleve les valeurs de hauteurs...qui ne servent a rien.
              (sous ie certain elements n'ont pas la valeurs css donné, cela peut-etre regle selon les cas par un :"overflow:hidden;" ou un line-height:la hauteur voulu;.

              Voici ta page rebricole (sous IE, je n'ai pas pu tester sous un autre navigateur):
              <!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" xml:lang="fr" lang="fr">
              <head>
                     <title>Nightmares</title>
                     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                         <style type="text/css">
              html, body, #global, #global2 {height:auto!important;height:100%;min-height:100%;}
              body
              {
              width: 650px;
              background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/fond.gif&quot;);
              background-repeat: repeat;
              color: #000000;
              margin:auto;
              }

              #global
              {
              width: 650px;
              margin:0 auto;
              background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/barre.gif&quot;);
              background-repeat: repeat-y;
              }
              #global2
              {
              width: 630px;
              margin:0 0 0 20px;
              background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/barre.gif&quot;);
              background-repeat: repeat-y;
              background-position:right;
              }



              #header
              {
              width: 502px;
              height: 114px;
              background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/header.gif&quot;);
              background-repeat: no-repeat;
              margin:auto;
              }

              #menu
              {
              width: 505px;
              height: 37px;
              background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/header2.gif&quot;);
              background-repeat: no-repeat;
              text-align: center;
              margin:auto;
              font-size: small;
              margin:auto;
              line-height:30px;
              }

              .titre_contenu
              {
              width: 456px;
              height: 20px;
              line-height:22px;
              background: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/titre_contenu.gif&quot;);
              background-repeat: no-repeat;
              margin:0 auto;
              margin-top: 25px;
              font-size: small;
              text-align:left;
              padding-left:46px;
              font-weight:bold;
              }

              .contenu
              {
              background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/fond_contenu.gif&quot;);
              background-repeat: no-repeat;
              background-position:bottom;
              background-color:#7b7b7b;
              margin:auto;
              width: 493px;
              font-family: "Tahoma", Arial, serif;
              font-size: small;
              text-align: left;
              padding:0 5px 15px 5px;
              }

              .boitepied
              {
              width: 504px;
              background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/footer1.gif&quot;);
              background-repeat: no-repeat;
              margin:0 auto;
              margin-top:20px;
              padding-top:9px;
              }



              #footer3
              {
              height: 48px;
              line-height:48px;
              background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/footer3.gif&quot;);
              background-repeat: no-repeat;
              }



              .texte_footer
              {
              background-image: url("http://s140718937.onlinehome.fr/d%e9coupes/leyo/images/footer2.gif&quot;);
              background-repeat: no-repeat;
              width: 504px;
              font-family: "Tahoma", Arial, Verdana, serif;
              font-size: x-small;
              color: black;
              text-align: center;
              background-color:#7b7b7b;
              margin:0;
              }

              a
              {
              text-decoration: none;
              color: black;
              margin-left: 6px;
              }
              a:hover
              {
              color: #fff;

              }

              p {margin:0;}

              </style/>
                 </head>
                 <body>
                 <div id="global">
                 <div id="global2">
                 <div id="header"></div>
                 
                 <div id="menu"> 
                 <a href="#">Home -</a>
                 <a href="#">Nightmares -</a>
                 <a href="#">Pactes -</a>
                 <a href="#">Guerres -</a>
                 <a href="#">Membres -</a>
                 <a href="#">Recrutement -</a>
                 <a href="#">Contact</a>
               </div>

              <h3 class="titre_contenu">News</h3>
              <div class="contenu">
              <p>Bienvenue sur mon site !</p>
              <p> bla bla bla </p>
              </div>

              <h3 class="titre_contenu">Des class</h3>
              <div class="contenu">
              <p>c'est mieux!</p>
              <p>Reutilisable, on peut s'en servir comme base et ainsi la reproduire autant de fois que voulu, comme cette boite de news

              :).</p>
              </div>   
                 <div class="boitepied">
                 <div  class="texte_footer">
                 <a href="#">Admin -</a>
                 <a href="#">Liens -</a>
                 <a href="#">A Propos</a>
               
                 <div id="footer3"></div>
                 </div> 
              </div>
                 </div></div>
                 </body>
                 </html>
                 
                 
               


              a plus et bon dev
              • Partager sur Facebook
              • Partager sur Twitter
              Anonyme
                27 décembre 2005 à 23:29:40

                Oui ... au moins je ferais comme sa pour la prochaine fois !
                Mais une petite question pourquoi 2 global ?

                Eh sinon pour changer la couleur de l'extérieur des barres quelqu'un sait ?
                • Partager sur Facebook
                • Partager sur Twitter
                  27 décembre 2005 à 23:41:59

                  bonsoir,
                  ?? les 2 globales ???, et les barres elles son afficher comment ? :)
                  tu met une image de fond a body qui perd du coup de sa transparence et html la recupere...alors en ajoutant par exemple au code de la page que j'ai bricolé ceci
                  html {background-color:lightblue;}
                  tout la partie de la page qui ne sera plus sous body (qui fait 650px de large) affichera la couleur de fond de html.
                  a plus
                  • Partager sur Facebook
                  • Partager sur Twitter
                    27 décembre 2005 à 23:51:56

                    ... je te parlais de la page que je t'avais bricolé, pour la tienne ça marche a moitié, car ton body n'est pas centré et que tu as positionné tes elemnts avec une marge gauche, ... voili voilou ou je voulais en venir avec l'idée de commencer sa page en la decoupant par zone et positionner chaque element/zone, avant de s'attaquer vraiment au design et au css
                    a plus
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Anonyme
                      27 décembre 2005 à 23:54:06

                      Ah oui en effet :) je vais prendre ton code bricolet alors !
                      Ba merci

                      PS = je suis un vrai Zer0 moi ^^

                      a plus
                      • Partager sur Facebook
                      • Partager sur Twitter
                        27 décembre 2005 à 23:55:20

                        moi aussi !, mais avec le temps le zero se positive :)

                        a propos, dans ma bricole , j'ai repassé ta page en xhtml 1.0.
                        a plus
                        • Partager sur Facebook
                        • Partager sur Twitter
                        Anonyme
                          28 décembre 2005 à 0:52:26

                          J'en reviens à ce sujet mais là j'essaye de comprendre , j'ai pas envie de foutre le code comme sa sans rien piger ! donc j'aimerais bien savoir à quoi correspond ceci :
                          height:auto,important;

                          min-height:100%;

                          margin:0 0 0 20px;

                          line-height:30px;

                          font-weight: bold;

                          padding:0 5px 100px 5px;


                          Voila c'est ces valeurs que je ne comprends pas , j'aimerais bien qu'on m'explique :)

                          Merci
                          • Partager sur Facebook
                          • Partager sur Twitter
                            28 décembre 2005 à 1:08:09

                            height:auto!important;
                            c'est pour indique aux navigateurs autre que IE, que la hauteur de l'element doit etre adapter au contenu (car seul IE comprend height comme min-height la nous avions besoin de determiner une hauteur minimale) donc min-height: pour les navigateurs recent, height pour IE et le hack "important pour les navigateurs recent afin qu'il puissent aggrandir l'element concerné..

                            font-weight:bold;
                            sert a remplacer la balise <b></b> que tu avais dans ton code initial.caractere en gras.

                            line-height:30px;
                            est egale a la hauteur d'interligne, sert a recentree une simple ligne de texte par exemple (les liens de ton menu horizontal) ou a abliger IE afficher l'element concerne avec cette meme hauteur (par exemple une balise <a> avec un height:30px; ne fera pas forcement 30px de haut dans IE, avec le line-height en plus oui).

                            margin ce sont les marges exterieurs
                            padding les marges interieurs
                            aux choix: margin-top, margin-left:, etc
                            ou margin: 1ere valeur (haut et bas) 2eme valeur (droite et gauche) ou
                            margin : 1ere valeur (haute) 2eme valeur (droite et gauche) 3eme valeur (bas)
                            ou margin 1ere valeur(haut) 2eme valeur(droite) 3eme valeur (bas) 4eme valeur(gauche) idem pour padding.

                            a plus


                            • Partager sur Facebook
                            • Partager sur Twitter
                            Anonyme
                              28 décembre 2005 à 1:10:50

                              Ah ! ba voila c'est beaucoup plus clairs !
                              Au moins je sais comment procéder pour la prochaine fois.
                              A plus et merci encore.
                              • Partager sur Facebook
                              • Partager sur Twitter

                              Plusieurs bugs ...

                              × 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