Sujet Précédent Sujet Suivant

Layout de Windows Explorer en CSS

Fermé
Jay - 15 déc. 2010 à 05:16
 foo - 15 déc. 2010 à 06:27
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!

A voir également:

2 réponses

Réponse 1 / 2
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
15 déc. 2010 à 06:05
ç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
Réponse 2 / 2
foo
Modifié par foo le 15/12/2010 à 06:28
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