gcyrillus

html {color:blue;color:rgba(0,50,150,0.75);text-align:center;font-family:georgia;font-weight:bold;
background:white;display:table;height:100%;width:100%;border-spacing:1em;}
body {display:table-cell;vertical-align:middle;background:gray;border-radius:5px;box-shadow:0 0 5px;border:solid;}
ol,ul {display:inline-block;border:solid;border-radius:5px;text-align:left;list-style-type:decimal;background:beige;padding:5px 5px 5px 2.5em;margin:1em 0;}

/* fake font-stretch */
/* + 2 pixel width */
ol  {letter-spacing:3px;text-shadow:1px 0 0px blue, -1px 0 0px blue;}
/* + 1 pixel width */
li:nth-child(2n) {text-shadow:1px 0 0px blue;letter-spacing:1px;}

gcyrillus

/* line-height  et em, calculs et arrondis selon navigateur et size en px de reference dans html */
html {background:gray;}
body {font-size:18px;/* allez hop ! ,on change ici pour voir nos bordures se recaller */
margin:auto;width:50%;
background:repeating-linear-gradient(0deg,
	transparent 0,
	transparent 17px,
	red 17px, 
	red 18px ) 
	white 

gcyrillus

/* gabarit  2 colonnes / pied scotché coulissant */

html, body {height:100%;padding:0;margin:0;background:black;}
#page {min-height:100%;width:900px;background:#FFF9D9;margin:0 auto;position:relative;}
header  {border-bottom:solid;background:#cde;margin:0;}
header h1 , header p {margin:0;display:inline-block;vertical-align:middle;}
header h1 img {vertical-align:top;}
#page {
/* on place une image pour simuler deux colonnes sur toute la hauteur , 
elle sera caché par l'entete et le pied

gcyrillus

/* position:fixed + margin:auto; */

html {
background: #f06;
background:repeating-linear-gradient(45deg, #acf 0,transparent 14px),repeating-linear-gradient(-45deg, #acf 0,#159 14px);
height: 100%;
background-attachment : fixed;
}
body {width: 70%;min-width: 700px;min-height:200%;margin:auto;box-shadow:0 0 5px;
background:repeating-linear-gradient(0deg, white 0,#eee 1em); text-align: justify;}

gcyrillus

/* position:fixed + margin:auto; */

html {
background: #f06;
background:repeating-linear-gradient(45deg, #acf 0,transparent 14px),repeating-linear-gradient(-45deg, #acf 0,#159 14px);
height: 100%;
background-attachment : fixed;
}
body {width: 70%;min-width: 700px;min-height:200%;margin:auto;box-shadow:0 0 5px;
background:repeating-linear-gradient(0deg, white 0,#eee 1em)}

gcyrillus

header{ 
height:100px; 
background-color:#02487B;margin-bottom: 3em;
box-shadow: 1px 1px 8px #000;
text-align:justify;
min-width:800px;
}
/* astuce gc pour justifier toutes les lignes */
header:after {content:'';display:inline-block;width:99%;}
header a , header h1 {padding:0 ;display:inline-block;vertical-align:middle;margin:0 20px;}

gcyrillus

/* city menu, voir commentaires */

html {background: #000;}
nav {height:150px;width:660px;background:url(http://lorempixel.com/800/150/city/5);/* modifier cette image comme il vous plait */
position:relative;/* utile pour la suite */
line-height:180px;/* centrage vertical pour une seule ligne */
text-align:justify;/* voir astuce plus bas pour justifier toutes les lignes d'un conteneur */
padding:0 70px;margin:auto;overflow:hidden;
}

gcyrillus

/* colonnes veritables ou factice ? */
/* bases avec col2 fluide*/
div {border:solid;margin:10px;}
div > div {box-shadow:0 0 5px black;border-radius:5px;}
div div:hover {height:100px;}
.colonnes {width:40%;min-width:350px;margin:1em;display:inline-block;vertical-align:top;}
.col1 {width:200px;}
.col2 {width:auto;overflow:auto;}
/* BG et float , colonnes factices classique */
.bg .col1 {float:left;}

gcyrillus

/* scrolling table ? , nop, tbody maybe :) */

table {
table-layout:fixed;
width:80%;
min-width:600px;
margin:3em auto;
text-align:center;
display:block;border-spacing:0;
background:yellow;

gcyrillus

/* text-shadow  */
html {
font-size:40px;
background:#333
}
.sharp {
text-shadow:
2px 0 0 red,-2px 0 0 red,
0 2px 0 red,0 -2px 0 red,
2px 2px 0 red,-2px -2px 0 red,