sid/css/layout.css

144 lines
2.2 KiB
CSS
Executable File

/*
*
* Positionnement global et mise en page
* -------------------------------------
* 1. Propriétés globales
* 2. HEADER
* 3. MENU
* 4. AUTH(entification)
* 5. CONTAINER
* 6. msgBox
*
*/
/******************************/
/*** 1. Propriétés globales ***/
/******************************/
*{ /* on supprime le margin/padding par défaut */
margin: 0;
padding: 0;
}
a{ text-decoration: none; color: inherit; }
/* on initialise le body avec les valeurs par défaut [compatibilité] */
body{
/* position */
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background */
background: #ecf0f1;
background: url(../src/wallpaper.jpg) top left no-repeat;
background-size: cover;
/* overflow */
overflow-x: hidden; /* empêche la barre horizontale de scroll [précaution] */
/* foreground */
font: 16px 'Open Sans', 'Helvetica Neue', 'Arial', 'sans-serif';
}
#WRAPPER{
/* position */
display: block;
position: absolute;
width: calc( 100% - 2*100px );
min-height: calc( 100% - 2*100px );
margin: 100px;
box-shadow: 0 0 5px #777;
}
#MENU{
/* position */
display: flex;
position: absolute;
top: 0;
left: 0;
width: 14em;
height: 100%;
/* flex */
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
/* background */
background-color: #34495e;
/* Z */
z-index: 10;
}
#HEADER{
/* position */
display: flex;
position: absolute;
top: 0;
left: 14em;
width: calc( 100% - 14em );
height: 5em;
/* flex */
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
/* border */
border-bottom: 1px solid #e5e5e5;
/* background */
background-color: #fff;
/* Z */
z-index: 9;
}
#SUBHEADER{
/* position */
display: block;
position: relative;
margin-top: 5em;
margin-left: 14em;
width: calc( 100% - 14em );
height: 10em;
/* background */
background-color: #fff;
/* Z */
z-index: 8;
}
#CONTAINER{
/* position */
display: block;
position: relative;
margin-left: 14em;
width: calc( 100% - 14em );
min-height: calc( 100% - 5em );
/* background */
background-color: #ecf0f1;
/* Z */
z-index: 7;
}