Design extensible particulier (Css)

Résolu/Fermé
Aetiops - 4 nov. 2011 à 20:04
 Aetiops - 4 nov. 2011 à 23:04
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

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
4 nov. 2011 à 22:41
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
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
4 nov. 2011 à 23:02
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
Excellent !! ça marche, je connaissais pas la balise overflow, très pratique !!
Merci beaucoup ;)
Bonne soirée.
0