Layout de Windows Explorer en CSS

Jay -  
Bonjour,
Je cherche un moyen de créer un layout en CSS avec les propriétés suivante.

Un entete: hauteur fixe de 30 px, toujours visible
Un pied de page: toujours visible hauteur de 80 px
un menu a gauche, largeur de 20%,, hauteur 100%
le contenu a droite, largeur de 80% , overflow auto , hauteur 100%

Je tente de copier un peu le layout de windows explorer dans windows 7...

Quelqu'un peu m'aider?

Merci!

2 réponses

  1.  arthezius
    ça me fait penser que j'avais a un moment fait un design a partir de Windows XP.
    (voir ici)

    Ce que tu cherches a faire n'est pas trop compliqué pour qui maitrise bien le CSS.
    Tu peux partir de ça: http://www.alsacreations.com/static/gabarits/
    1. foo
      En faite, voici mon code. J'ai regarder un peu le site que tu m'as refilé, mais je ne trouve toujours pas :(

      Dans #explorer, il y a beaucoup de div avec float:left, car ce sont des "icones".
      #explorer en ce moment est en haut a gauche de l'écran et je ne sais pas comment le remettre a sa place. De plus, comme mentionné plus haut, il doit arreter où #infobar commence.

      Voici mon code:

      HTML:
      <div id="sys_top"></div>
      <div id="navbar"></div>
      <div id="explorer"></div>
      <div id="infobar"></div>

      CSS:
      html, body {
      padding:0;
      margin:0;
      height:100%;

      cursor: default;

      font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
      font-size: 12px;
      }
      #sys_top {
      background: url(../menu_files/bg.png) repeat-x;
      width:100%;
      top:0;
      position: fixed;
      }
      #navbar {
      width: 20%;
      height: 100%;
      float:left;
      left: 0;
      top: 30px;
      position: fixed;
      border-right: #CCCCCC solid 1px;
      }
      #explorer {
      width: 500px;
      height:300px;
      float:right;
      top: 30px;

      overflow:auto;
      }
      #infobar {
      height: 120px;
      width: 100%;
      bottom:0;

      position: fixed;
      display:block;
      margin-top: 5px;
      margin-left: 5px;
      }

      Une idée?

      Merci!

      (Et j'aime bien ton style Windows XP :))