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. 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 ?
    1. Il est au dessus de ta réponse :) (5 commentaires plus haut :) )
      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. 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. 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. 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...