Design extensible particulier (Css)

Résolu
Aetiops -  
 Aetiops -
Bonjour,

je rencontre un problème dans le développement de mon site web.
J'aimerais créer un site web avec un menu sur la gauche a valeur fixe. (ex : 200px;) et j'aimerais que le corps soit à la droite de ce menu mais que celui si soit avec une valeur extensible pour qu'il s'adapte a l'écran. En résumé, quand par exemple on diminue la fenêtre, le menu conserve sa taille mais le contenu rétrécit et prend en permanence la totalité restante de la page web.
Quelqu'un a une idée ?
merci d'avance

Cordialement, Lilian.
Ps : "Wikipédia" et "Le site du zéro" utilisent cette méthode.

2 réponses

  1.
    RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    Salut

    voila un exemple de 2 colonnes , menu a gauche 200px fixe ,
    a droite corps flexible 

    <!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>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="corps-type" corps="text/html; charset=utf-8" />
 <style type="text/css" media="screen">
 /*<![CDATA[*/
 html{
   padding:0px;
   margin:0px;
 }

 body{
   background:#e1ddd9;
   font:12px Verdana,Arial,SunSans-Regular,Sans-Serif;
   color:#564b47;
   padding:0px 20px;
   margin:0px;
 }

 p,pre,h2{
   padding:10px;
   margin:0px;
 }

 h2{
   font-size:14px;
   padding-top:10px;
   text-transform:uppercase;
   color:#564b47;
   background:transparent;
 }

 #menu pre,#menu pre,#menu h2{
   color:#D7FFFF;
 }

 pre{
   color:#564b47;
   font:11px Courier,Monaco,Monospace;
   background:transparent;
 }

 #menu{
   position:absolute;
   width:200px;
   left:20px;
   background:#808080;
   margin:0px;
 }

 #corps{
   margin-left:200px;
   background:#DEEBED;
   overflow:auto;
 }
 /*]]>*/
 </style>
  </head>
  <body>
    <div id="menu">
      <h2>
        Menu
      </h2>
      <pre>
#menu{
position:absolute;
width:200px;
left:20px;
background-color:#gray;
color:
padding:0px;
margin:0px;
    }
</pre>
    </div>
    <div id="corps">
      <h2>
        Corps
      </h2>
      <pre>
html{
padding:0px;
margin:0px;
}

body{
background-color:#e1ddd9;
font-size:12px;
font-family:Verdana,Arial,SunSans-Regular,Sans-Serif;
color:#564b47;
padding:0px 20px;
margin:0px;
}
#corps{
margin-left:200px;
background-color:#DEEBED;
overflow:auto;
}
</pre>
    </div>
  </body>
</html>


    a+
    1
    1. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
       
      PS : j ai oublie un 
      color:
      inutile dans le css du menu !!
      mais ce soir je sais pas pourquoi mais je ne peux plus modifier mes message sur le forum ??

      donc retire le ;-))
      0
  2. Aetiops
     
    Excellent !! ça marche, je connaissais pas la balise overflow, très pratique !!
    Merci beaucoup ;)
    Bonne soirée.
    0

Discussions similaires

Problème de reconnaissance Memup feel design
sasa -
Kiagoo Ross -

6 réponses
disque dur externe multimedia memup lx 500Go
kirk1601 -
chat -

55 réponses
mon pc ne reconner pas memup feel design
zorroooooooo -
TheSniperZombie -

1 réponse
sharp aquos + prise HDMI
gainsborough -
Olomonke -

6 réponses
annuaire telephonique de maroc telecom IAM
dina -
alo -

14 réponses