gcyrillus

/* hover hide/show + delay */
html {display:table;width:100%;height:100%;}
body {display:table-cell;vertical-align:middle;height:100%;}
table {width:80%;margin:0 auto;border-collapse:collapse;}
tbody,tr {width:100%;}
td {width:10%;border:1px solid red;}
img {width:100%;vertical-align:top;opacity:0;transition:5s}
td:hover img {opacity:1;transition:0.25s}

gcyrillus

/* scrolling table ?, Yep! */
#blocTableaux {
font-size:16px;
width:92em;
height:320px;			/* set height here */
margin:3em  auto;position:relative;padding:0;border:1em solid transparent;box-shadow:0 0 5px;border-radius:0.25em;text-align:center}
#blocG, #blocD{display:inline-block;width:45.45em;height:100%;margin:0 0.1em;overflow-y:scroll;box-shadow:0 0 0 1px;background:#ddd}
#tabG, #tabD {text-align:center;
font-size :10px; 		/* !!! */
width:100%;table-layout:fixed;}

gcyrillus

/* scrolling table ?, nop */thead {background:#159}
thead th {position:relative;height:2.5em;vertical-align:middle;line-height:1em;padding:0;}
thead th div {background:inherit; position:fixed;left:auto;width:inherit;margin:0;text-indent:0.5em;top:auto;line-height:0.5em;z-index:2;}
#blocG {height:200px;overflow:auto;display:inline-block;position:relative;width:69.3em;}
#blocG:before { height:5em;position:fixed;content:'';width:68em;border:2px  white solid;background:#159;}
div, body {margin:0;} 
thead tr:first-of-type th div:before, thead tr + tr th div:after {content:'';position:absolute;height:5.1em;width:2px;background:white;margin:-2.65em -0.65em;}
thead tr + tr th div:after {margin:-0.65em 0em 0 -103%;}thead tr + tr th:first-of-type div:before{content:'';position:absolute;display:block;width:15.2em;height:2px;background:white;margin:-0.7em 0 0 -0em}
td {box-shadow:inset 0 0 0 1px;}
@media all and (max-width:2700px) {html {font-size:19px;transition:1s;}}

gcyrillus

/* useless ! */#nav {
	position:relative;
	margin:40px;
	background-image:linear-gradient(0deg, white, gray);
	-background-position: 0px 600px;
	padding:0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:21px;
	font-weight:bold;
	border-radius:5px;

gcyrillus

/* adjacence et modification de style */
#nb:checked ~ .coloriser {background:#333;color:#ddd;}
#ob:checked ~ .coloriser {background:orange;color:#159;}
#mg:checked ~ .coloriser {background:#d95;color:#555;}
/* ou focus pour inclure IE8 (dans ce sens , les styles suivants ecrase les precedents) */ 
/* NOTE: en plaçant :focus devant :checked dans la feuille, on peut ainsi filtrer IE8   */
#nb:focus ~ .coloriser {background:#333;color:#ddd;}
#ob:focus ~ .coloriser {background:orange;color:#159;}
#mg:focus ~ .coloriser {background:#d95;color:#555;}
/* ou :target  en remplaçant ou injectant dans label un lien         */

gcyrillus

/* adjacence et modification de style */
#nb:checked ~ .coloriser {background:#333;color:#ddd;}
#ob:checked ~ .coloriser {background:orange;color:#159;}
#mg:checked ~ .coloriser {background:#d95;color:#555;}
html {text-align:center;padding-top:2em;}
.coloriser {text-align:left;width:80%;margin:auto;box-shadow:0 0 5px;padding:0.25em;}

gcyrillus

/* centrage horizontal et vertical  de 2 boite en ligne:  http://www.siteduzero.com/forum/sujet/alignement-vertical-firefox-chrome*/
/* Voici quelques techniques classique .
DISPLAY:FLEX ; : solution ideal , n'est pas abordé voir: http://www.w3.org/TR/css3-flexbox/ */
/* 1) passons nos element en boites en lignes et eliminons les marges par défaut*/
header h1, header p {display:inline-block; margin:0;}
/* 2) distribuer les elements equitablement sur une ligne.
  Quelques pistes et idées:
		a) piste : text-align :possibilités : left,center,right et justify.  
		b) classique: flux & float.
		c) display : inline-block, table, table-cell.

gcyrillus

/* pied de hauteur variable en bas de page : LE RETOUR (display:table)*/
html , body {display:table;height:100%;width:100%;margin:0;padding:0;text-align:center;}
header, section, footer {display:table-row;background:#159;color:white;height:100px;
border:solid;}
section {height:100%;background:#48a}
header:hover, footer:hover {height:150px;}
body > * > div {display:table-cell;vertical-align:middle;box-shadow:0 0 15px white;}

gcyrillus

/* form revisité de https://about.telus.com/ */
body {background:white url(https://about.telus.com/plugins/careerconnection/resources/images/phone_body.png) no-repeat;}
form { width:258px;;text-align:center;
background:white;margin:107px 25px;padding:3px;
box-shadow:0 0 15px  ;}
form > label:nth-child(1n) {width:48.5%;margin:0;}
form  > label:nth-child(n+4) ,label, a {width:98%;display:inline-block;text-align:left;}
form > input , form >label > input  {display:block;width:97%;;margin:auto;}
form a , :visited {border:1px solid;color:#333;text-decoration:none;}
a[href="#none"] {position:absolute;left:0;top:1.25em;z-index:-1;}

gcyrillus

/* don't ask */
.table {display:table;width:100%;background:white;height:auto;border-spacing:5px;padding:0;}
.table.table {height:50%;margin:0;}/* <= here */
.cell {display:table-cell;vertical-align:middle;border:solid;text-align:center;
background:turquoise;}
.cell .cell {min-width:50px;}
.w250 {width:250px;}
.table .table .cell:nth-child(1n) {background:white;}
.table .table .cell:nth-child(2n) {background:gold;}
.table .table .cell:nth-child(3n) {background:#ddd;}