Problème de CSS... Help !

Bonjour !

J'aimerai, sur mon site, que le menu s'adapte à la longueur de la page, or j'ai essayé plusieurs codes différents, ça ne marche pas.
Voici l'adresse du site: thefantasiaserver.tk

Voici mon CSS:
htlm, body 
{ 
   background-image:url("body_background.png"); 
   background-repeat: repeat; 
   height: 100%; 
   width: 865px; 
   margin: auto; 
   margin-top: 5px; 
   margin-bottom: 20px;     
   cursor:url("http://www.poketerra.com/cursorbeige.png"), auto; 
   border: 2px solid black; 
    
  } 
 h1 /* Tous les titres h1 */ 
{ 
   color:  #000040; 
   font-family: "Trebuchet MS", "Times New Roman", Arial, serif; 
   text-align: center; 
   border-top-style: solid; 
   border-top-width: 2px; 
   border-top-color: #000040; 
   border-bottom-style: solid; 
   border-bottom-width: 2px; 
   border-bottom-color: #000040; 
   font-size: 27px; 
} 

 h2 /* Tous les titres h2 */ 
{ 
  background-image: url("menu_h2.png"); 
   background-repeat: repeat; 
    
 background-repeat: repeat; 
   background-color: blue; 
   font-family: "Trebuchet MS", "Times New Roman", Arial, serif; 
   font-size: 25px; 
   text-align: center; 
   background-color: none; 
} 
#en_tete 
{ 

   background-repeat: no-repeat; 
   margin-bottom: 0px; 
   background-color: black; 
   text-align: center; 
} 
#menu #corps 
{  
height: 100%; 
} 
#menu 
{ 
   float: left; 
   width: 200px; 
   height: 100%; 
   background-color: white; 
   border: 1px solid black; 
} 

.element_menu 
{ 
    
   background-color: none; 
   background-repeat: repeat-x; 
   border: none; 
   margin-bottom: 5px; 
} 
.element_menu h3 
{     
   color: black; 
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif; 
   text-align: center; 
   height: 40px; 
   width: 198px; 
   border: 1px dashed black; 
   background-image: url("element_menu.png"); 
   background-repeat: repeat; 
   background-color: white; 
    
} 
    
ul /* aura des puces en forme de dossiers */ 
{ 
   list-style-image: url("list-style.png"); 
} 
 a /* Tous les liens */ 
{ 
   color: black; 
} 

li 
{ 
color:black; 
} 

 a:hover  
{ 
   color: #810a16; 
} 
#corps 
{ 
   margin-left: 201px;  
   margin-bottom: 0px;  
   padding: 10px; 
   padding-left: 10px; 
   color: black; 
   background-color: white;  
   min-height: 800px; 
   border: 1px solid black; /* 
   width: 644px; 
} 

#corps ul 
{ 
list-style-image: url("list-style-corps.png"); 
} 


#pied_de_page 
{ 
   padding: 5px; 
   clear: both; 

   text-align: center; 
    background-image: url("barre.png"); 
   background-repeat: repeat-x; 
   background-color: white; 
   color: black; 
   border-top-style: solid; 
   border-top-width: 2px; 
   border-top-color: black; 
    
} 
input, textarea 
{ 
   background-color: #faffbd; 
   border: 1px solid #606669; 
} 
textarea:hover 
{ 
   border: 1px solid #797f82; 
} 
legend  
{ 
   font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif; 
   color: #4b0000; 
   font-weight: bold; 
}


J'ai pourtant cherché (je suis pas douée pour le CSS), je trouve pas comment faire !

Merci pour vos réponses !

4 réponses

  1. Ah, pardon, je veux dire largeur, vu comme ça... (en gros de haut en bas)
    La taille de la page s'adapte avec ce que j'écris: j'aimerai que le menu fasse de même, et ne s'adapte pas en fonction de ce que j'écris dans #menu.
    Merci encore !
    1. Bonjour,

      Tu donnes une width en px pour ton body donc il est logique que la taille reste fixe.

      Regarde là, la solution reste très simple et sans javascript :

      https://www.commentcamarche.net/faq/4613-webmaster-adapter-un-site-a-toutes-les-resolutions

      Faboons.
      1. essaye en mettant :

        html, body: 100%;

        sa peut peut-être régler ton souci.
        1. bonsoir Black_Kitsune
          adapté en longueur coule pas de source height 100% c'est la taille de l'écran pas de la page, il y a des solutions javascript, mais plus simplement mais ton body en blanc et ca fera illusion :

          --