Layout de Windows Explorer en CSS

Jay -  
 foo -
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 Messages postés 3756 Statut Membre 475
     
    ç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/
    0
  2. 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 :))
    0