Module 10 : Mise en page et positionnement

Rock'Air a besoin de toi

Le festival open air du village s'appelle Rock'Air. Deux scènes, trois jours, et pour l'instant… aucune page web. L'équipe t'a repéré : tu sais habiller une boîte depuis le module 8, tu sais aligner des éléments depuis le module 9. Tu es la bonne personne.

Sauf qu'une vraie page de festival demande trois choses que tu ne sais pas encore faire :

• un badge « Complet ! » épinglé dans le coin d'une affiche de concert
• un en-tête qui reste visible pendant qu'on fait défiler le programme
• des boutons qui s'allument quand la souris passe dessus

Trois superpouvoirs. Ils tiennent en deux propriétés et une pseudo-classe.

Le flux : la file d'attente des éléments

Avant les superpouvoirs, il faut nommer ce qui se passe déjà, et que tu n'as jamais eu besoin de nommer.

Depuis le module 1, tes éléments se posent les uns après les autres, de haut en bas, dans l'ordre du HTML. Un titre, puis un paragraphe, puis une liste. Chacun prend sa place, et pousse le suivant plus bas. Ce comportement a un nom : le flux du document.

C'est une file d'attente bien élevée. Personne ne double, personne ne se superpose, et le navigateur n'a besoin d'aucune instruction pour la tenir.

Sortir du flux, c'est quitter cette file. L'élément se place où tu le dis — et les autres se referment sur sa place, comme s'il n'avait jamais existé.

C'est exactement ce qu'il faut pour un badge posé dans un coin : il ne doit pousser personne, il doit se poser par-dessus.

Cinq valeurs, une seule propriété

Tout ça se joue avec une propriété, position, et ses cinq valeurs :

Ne les apprends pas par cœur maintenant. Retiens juste la ligne de partage :

Et sticky, le petit malin, fait les deux : il reste dans le flux tant qu'on ne défile pas, puis se colle au bord de l'écran quand le défilement l'atteint. C'est lui qui tient tous les en-têtes de site que tu croises.

Empiler, c'est choisir qui gagne

Dès que des éléments se superposent, une question se pose : lequel passe devant ? Sans rien demander, c'est le dernier écrit dans le HTML qui gagne. Pratique par hasard, embêtant quand ce n'est pas celui que tu voulais.

La propriété z-index tranche : le plus grand nombre passe devant. Avec un piège que tu rencontreras à l'exercice 8.5 — elle ne fonctionne que sur un élément positionné. Posée sur un élément resté en static, elle ne fait strictement rien, sans le moindre message.

Et la souris, dans tout ça ?

Un bouton qui ne réagit pas au survol, c'est un bouton dont on doute qu'il soit cliquable. Une pseudo-classe répond à ça : :hover décrit à quoi ressemble l'élément pendant que la souris est dessus.

Tu en découvriras une deuxième dans la foulée, :focus, et elle vaut de l'or : tout le monde n'utilise pas de souris. Au clavier, on passe d'un élément au suivant avec la touche Tab, et un :hover tout seul n'aide alors personne.

Au programme

Six exercices, et la page de Rock'Air se construit sous tes doigts :

1. :hover — les boutons de billetterie s'allument au survol
2. max-width + margin: 0 auto — la recette de la page centrée
3. position: absolute — le badge « Complet ! » épinglé sur une affiche
4. position: sticky — l'en-tête qui colle en haut pendant le défilement
5. z-index — décider qui passe devant
6. Le défi : la page complète du festival, la plus grosse synthèse de la formation

Prêt ?

Deux minutes de lecture, et tu tiens la mise en page. Après ce module, tu regarderas les sites que tu visites autrement : tu sauras nommer ce qui colle, ce qui flotte et ce qui s'allume. C'est parti !