Effectuer une mise en forme avancée avec CSS — exemple d`un

Fiche Pratique n◦ 1
Effectuer une mise en forme
avancée avec CSS — exemple d’un
quadrillage
Dans la première partie du projet, le but est de réutiliser les éléments HTML5 vus en cours et de les
mettre en forme avec des règles CSS. Il vous est demandé de réaliser un genre de quadrillage 3×3
avec des cases de même dimensions (cf. figure 1.1).
Figure 1.1: layout de la page
Pour la réalisation du quadrillage, plusieurs solutions sont possibles :
— HTML : il est possible d’utiliser un tableau 1 ;
— CSS : parent → position:relative / éléments → position:absolute : les coordonnées
1. http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/
les-tableaux-1
1
2
Programmation Web
Master DILIPEM
Université Stendhal Grenoble 3
des éléments sont calculées par rapport au limites du parent 2 3 (les deux notes sont nécessaires
pour réaliser cette solution) ;
— CSS : éléments → display: inline-block : par défaut les éléments sont des « blocks » qui,
à défaut d’indication complémentaire (type float ou position, etc.), sont positionnés dans
la page uniquement verticalement (un seul bloc par ligne). Avec les « blocks en ligne », ils ne
sont pas empilés uniquement verticalement, mais également sur une même ligne tant que de
la place est disponible2 ;
— CSS : float:left : éléments flottants2 ;
— CSS : parent → display:flex (plus complexe mais plus puissant) : permet de répartir et
dimensionner les éléments de manière « responsive » 4 .
NB : La solution choisie pour résoudre ce problème peut faire l’objet de la présentation d’une
propriété CSS (ou d’un élément HTML) qui vous est demandée dans le cadre de l’évaluation. . .
2. http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/
le-positionnement-en-css
3. http://deptinfo.cnam.fr/~pons/TOTO/positionement.html
4. http://www.flexboxin5.com/