-
-
Save gcyrillus/5569483 to your computer and use it in GitHub Desktop.
basic pied de page glissant en HTML5 avec 4 selecteur et 10 regles
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* basic pied de page glissant en HTML5 avec 4 selecteur et 10 regles */ | |
html {height:100%;} | |
body {margin:0;min-height:100%;position:relative;} | |
footer {position:absolute;width:100%;bottom:0;left:0;height:2em;} | |
section {margin-bottom:2em;} | |
/* ============================================ | |
Le principe est d'un élément en position relative dans lequel on place un autre element en position absolute | |
!IMPORTANT! PENSEZ feuille de style => heritage en cascade et flux du document | |
1) html en height:100%; reference de la hauteur de la fenêtre. | |
2) un conteneur principal en min-height:100% pour l'autoriser à s'agrandir, | |
qui se base sur la valeur de height de son parent direct ! | |
ET en position:relative; comme reference de zone d'affichage pour ces enfants. (ICI => body qui a comme référent direct html, en position:relative, footer prend body comme referent de zone d'affichage) | |
3) un élément en absolute placé avec les coordonnées: bottom, left, right et top , au choix ou associées (ICI => footer mis a bottom et left 0 ) | |
4) un element qui reste dans le flux avec une marge interne ou externe | |
qui empeche son contenu a se superposé a la zone qu'occupe l'element en position:absolute (ICI => section qui PRECEDE footer repousse une zone assez grande pour footer) | |
5) C'est tout, le reste c'est votre mise en forme | |
=============================================== */ | |
/* un peu de maquilage, | |
mais vous faites ce que vous voulez | |
en prenant soint de reserver l'espace necessaire au pied ;) | |
=========================================================== | |
*/ | |
html {background:#333;} | |
body {margin:0 auto;width:80%;background:beige;} | |
header {background:gold;padding:0.25em;text-align:center;} | |
footer {background:purple;color:white;text-align:center;line-height:2em;} | |
section {background:ivory;} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<header><h1>header</h1><!-- + textes, navigation, ... --></header> | |
<section> section <!-- contenu principal , colonnes ou autre mise en formes --></section> | |
<footer> footer </footer> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment