HTML

Résolu
Bonjour,

Je suis actuellement en train d'essayer de faire un site web. Mais, j'ai quelques problèmes...:

1) Comment puis-je faire pour que le fond gris aille jusqu'en bas de mon écran, sans devoir insérer beaucoup de <br> </br> ou de <br />?

2) Comment puis-je faire pour qu'il n'y ait que le "gris" qui descende (s'il y a beaucoup de texte) et non le "blanc", qui est le menu?

Vous pouvez trouver une photo exprimant peut-être mieux ce que je demande ici:

https://drive.google.com/file/d/0B7Ny4VxQGP0ONmdDd2wzbENfbHM/view?usp=drive_open

Merci beaucoup!

11 réponses

  1. Bonjour,
    Sans code ça va être dur. Si tu utilises une <div> il suffit de modifier sa taille. Et si tu veux que ce soit le fond par défaut autant le mettre dans la balise <body style="background-color: gray;"> .
    Mais je ne sais pas comment tu t'y es pris...
    1. Voici toute la page:

      <!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" lang="fr">

      <html>

      <head>
      <title> Bouge T.C.</title>
      <link rel="stylesheet" type="text/css" href="style.css" />

      </head>

      <body>

      <div id="Au_dessus_de_tout_gauche">
      <p> <p> <p> <p> <p> </div>
      <div id="Au_dessus_de_tout_droite"> <h1> <img src="Accueil.gif"/></h1> </div>

      <div id="menu">

      <br /><br /><br /><br />
      <br /><br /><br /><br /> <div id="nom_menu"> Menu </div>
      <br /><br />
      <p> <a href="Accueil.html"> Accueil </a>
      <p> <a href="Présentation.html"> Présentation </a>
      <p> <a href="Agenda.html"> Agenda </a>
      <p> <a href="Petitesannonces.html"> Petites annonces </a>
      <p> <a href="Comité.html"> Comité </a>
      <p> <a href="Membres.html"> Membres </a>
      <p> <a href="Inscriptions.html"> Inscriptions </a>
      <p> <a href="Contacts.html"> Contacts </a>

      <div id="pub">

      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <img src=" Pubs.gif "/>

      </div>
      </div>

      <div id="column1">

      <br /><br /> <img src=" Terrains brique.jpg " title=" Terrains en terre battue"> <img src=" Cafétaria.jpg " title=" Club House du Bouge T.C."> <img src=" Terrains brique2.jpg " title=" Terrains en terre battue">

      <br /> <br /><br /><br />

      <div id="sous-sous-titre"> Bienvenue </div>

      <br> Bienvenue sur le tout nouveau site officiel du Bouge Tennis Club.</br>
      <br> </br>
      <br> </br>
      <br />

      <div id="sous-sous-titre"> </div>

      <p><br> </br>
      <br> </br>
      <br> </br>

      <div id="sous-sous-titre"> </div>

      <p><br> </br>

      <div id="sous-sous-titre"> </div>

      <p><br> </br>

      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

      <hr align="center" width="95%" color="black" size=0.2em>

      <br> <div id="adress"> <div id="adress"> <a href="https://www.aftnet.be/" target="_blank"> AFT </a> - <a href="https://www.aft-rnl.be/" target="_blank"> AFT-RNL </a> - <a href="http://www.tournoi.org/" target="_blank"> Tournoi.org </a> - <a href="mailto:bs@live.be"> Contact </a> - <a href="Accueil.html"> (c) Bouge T.C. 2012 </a> </div> </br>

      <br />
      <br />

      </div>

      </body>

      </html>
      1. Non... C'est dans le code CSS...: (voir #Au_dessus_de_tout_droite et #column1)

        body { background-color: white;
        background-image: url("Logo.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        line-height: 0.6em;
        font-family: tahoma, arial;
        font-size: 15px;
        }
        br { text-indent: 30px }

        adress { margin-top: 1em;
        padding-top: 1em;
        border-top: thin dotted }

        h1 { font-family: tahoma, arial, verdana, sans-serif;
        font-style: normal;
        text-decoration: underline;
        text-align: center;
        font-size: 32px; }
        h2 { font-family: "Times New Roman", serif
        font-style: normal;
        text-decoration: none; }

        a:link { color: black; }
        a:visited { color: black; }
        a:hover { color: #D27862; }

        body { margin: 0px 0px 75px 40px }

        #sous-sous-titre { font-family: "Times New Roman", serif
        font-style: normal;
        text-decoration: none;
        color: #003399;
        font-weight: bold;
        font-size: 20px;
        line-height: 30px; }

        #Au_dessus_de_tout_gauche { div-attachment: fixed;
        float: left;
        width: 17% }
        #Au_dessus_de_tout_droite { float: right;
        width: 83%;
        background-color: #CCCCCC; }

        #menu { float: left;
        width: 17%; }

        #nom_menu {float: left;
        width: 17%;
        text-decoration: none;
        font-weight: bold;
        font-size: 17px;
        text-align: right;
        }

        #pub {float: left;
        width: 17%; }

        #column1 { float: right;
        width: 83%;
        background-color: #CCCCCC; }

        #adress { font-family: tahoma, arial
        font-style: normal;
        text-decoration: none;
        font-size: 9px;
        float: right; }
        1. Bon alors deja j'ai enlever une bonne partie des erreurs il te reste plus qu'a mettre en place le CSS

          <!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" lang="fr"> 
          
          
          
          
          
          
          <head> 
          <title> Bouge T.C.</title> 
          <link rel="stylesheet" type="text/css" href="style.css" /> 
          
          </head> 
          
          
          <body> 
          
          
          <p id="Au_dessus_de_tout_gauche">.</p>
          <img src="Accueil.gif" alt="accueil" id="Au_dessus_de_tout_droite"></img> 
          
          
          <div id="menu"> 
          
          
           <h1 id="nom_menu"> Menu </h1> 
          
          <a href="Accueil.html"> Accueil </a> 
           <a href="Présentation.html"> Présentation </a> 
           <a href="Agenda.html"> Agenda </a> 
          <a href="Petitesannonces.html"> Petites annonces </a> 
           <a href="Comité.html"> Comité </a> 
           <a href="Membres.html"> Membres </a> 
           <a href="Inscriptions.html"> Inscriptions </a> 
          <a href="Contacts.html"> Contacts </a> 
          
          
          
          
          
           <img src=" Pubs.gif " alt="pubs" id= "Pubs"></img> 
          
          
          </div> 
          
          
          
          
          
          <div id="column1"> 
          
          
          <img src=" Terrains brique.jpg " title=" Terrains en terre battue" alt="terre"></img> <img src=" Cafétaria.jpg " title=" Club House du Bouge T.C." alt=club"></img> <img src=" Terrains brique2.jpg " title=" Terrains en terre battue" alt="terre2"></img> 
          
          
          <h2 id="sous-sous-titre">Bienvenue sur le tout nouveau site officiel du Bouge Tennis Club. <h2> 
          
          
          
          
          <h3 id="sous-sous-titre"> .</h3> 
          
          
          
          
          
          
          <div id="adress">  
          <a href="https://www.aftnet.be/" target="_blank"> AFT </a> - 
           <a href="https://www.aft-rnl.be/" target="_blank"> AFT-RNL </a> - 
          <a href="http://www.tournoi.org/" target="_blank"> Tournoi.org </a> - 
          <a href="mailto:bs@live.be"> Contact </a> -  
          <a href="Accueil.html"> (c) Bouge T.C. 2012 </a>  
          
          </div> 
          
          
          </body> 
          
          </html> 
          


          pour mettre le fond en gris il faut rajouter dans ton css

          body
          {
          background-color:#808080;
          }

          cordialement
          1. Il est au dessus de ta réponse :) (5 commentaires plus haut :) )
            1. fichier CSS :
              body   
              {   
              background-color: #FFFFFF;  
              
              
              font-family: tahoma, arial;  
              border-style:solid;  
              border-width:1px;  
              }  
              
              
              
              #adress   
              {   
              font-family: tahoma, arial  
              font-style: normal;  
              text-decoration: none;  
              font-size: 9px;  
              float: right;  
               }  
              
              
              
              a:link, a:visited   
              {   
              color: black;  
              }  
              
              
              a:hover   
              {   
              color: #D27862;   
              }  
              
              
              #menu   
              {   
              
              width: 17%;   
              float: left;  
              margin:10px;  
              }  
              
              #menu a  
              {   
              margin:10px;  
              }  
              
              #column1   
              {   
              margin-left:17%;  
              width: 83%;  
              background-color: #CCCCCC;  
              min-height:500px ;  
              /*hauteur minimum*/   
              }  
              

              peut etre mieux ?