11. Développement Web - TP N°11

Résultat attendu :

Notez que la police d'affichage
a été modifiée en Verdana

11.1. Objectif

On désire créer une page dont le positionnement des éléments est organisé sous forme d'une grille de $5 × 5$ éléments. A l'intérieur de cette grille, une grille de $3 × 3$ éléments contient alternativement des cases de couleur de fond noir ou rose. Les cases de couleur de fond noir contiennent une à une les textes suivants centrés horizontalement et verticalement : "Black", "Pink", "In", "Your", "Area". Les textes sont donc invisibles puisqu'ils sont noir sur fond noir.

Si on passe la souris sur une case de couleur de fond noir, la couleur de fond passe au rose, laissant apparaître le texte en noir.

11.1.1. Première solution

Mettre au point une première solution utilisant les variables CSS pour calculer les tailles des cellules et qui utilise un display de type grid.

La grille sera un div, lui-même composé de div de classe grid-item :

Les tailles des cellules seront calculées en utilisant des variables CSS.

<div id="my-grid">
    <div class="grid-item">BLACK</div>
    <div class="grid-item">2</div>
    <div class="grid-item">PINK</div>
    <div class="grid-item">4</div>
    <div class="grid-item">IN</div>
    <div class="grid-item">6</div>
    <div class="grid-item">YOUR</div>
    <div class="grid-item">8</div>
    <div class="grid-item">AREA</div>
</div>

Créer un fichier grid.html et le fichier CSS associé grid.css.

11.1.2. Seconde solution

Proposer une seconde solution utilisant une table. Celle-ci occupera la totalité du viewport

On modifiera le style des balises tr et td pour faire en sorte de modifier la couleur de fond, comme par exemple :

tr:nth-child(2) td:nth-child(2n+2) {
	background: black;
}

Créer un fichier grid_table.html et le fichier CSS associé grid_table.css.