TP4 : Box Model et Positionnement CSS

Cours HTML/CSS 2026 – Durée : 3h30 – Enseignant : Quentin Fait

Objectifs du TP

  • Maîtriser le Box Model CSS (padding, margin, border)

  • Utiliser position: relative et position: absolute

  • Créer des effets interactifs avec les pseudo-classes

  • Déboguer avec les DevTools

Consignes générales

Configuration : Créez un dossier tp4-box-model sur votre ordinateur et ouvrez-le dans votre éditeur de code.

Rappel de la structure HTML de base :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
</body>
</html>

Important : Utilisez les DevTools (F12) pour visualiser le Box Model de vos éléments.

Exercice 1 : Cartes produits avec badges

Fichiers : produits.html, produits.css, et 3 images

Créez une galerie de 3 produits avec des badges positionnés.

Préparation

  • Trouvez 3 images de produits (ou utilisez des images de placeholder)

  • Nommez-les produit1.jpg, produit2.jpg, produit3.jpg

  • Placez-les dans le dossier tp4-box-model

Partie HTML (produits.html)

Structure à créer :

  1. Un <h1> avec « Nos Produits »

  2. Une <div class="products-container"> contenant 3 produits

  3. Pour chaque produit, créez un <article class="product-card"> contenant :

    • Un <span class="badge">NOUVEAU</span> (uniquement sur les produits 1 et 2)

    • Une <img src="produit1.jpg" alt="Nom du produit">

    • Un <h3> avec le nom du produit

    • Un <p class="price"> avec un prix (ex: « 19,99 € »)

    • Un <button>Ajouter au panier</button>

Partie CSS (produits.css)

Étape 1 : Reset de base

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    padding: 40px 20px;
}

Étape 2 : Titre

Ciblez le <h1> et appliquez :

  • Alignement centré

  • Taille de police : 32px

  • Couleur : #2c3e50

  • Marge basse : 40px

Étape 3 : Conteneur des produits

Ciblez products-container et créez une grille simple avec :

  • display: grid;

  • 3 colonnes égales : grid-template-columns: repeat(3, 1fr);

  • Espacement entre les cartes : gap: 30px;

  • Largeur maximale : 1000px

  • Centrage : margin: 0 auto;

Étape 4 : Carte produit

Ciblez product-card et appliquez :

  • Position relative (important pour le badge)

  • Fond blanc

  • Bordure : 1px solid #ddd

  • Coins arrondis : 8px

  • Ombre portée au survol (utilisez :hover) : box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

Étape 5 : Badge « NOUVEAU »

Ciblez badge et positionnez-le en haut à droite :

  • Position absolute

  • Top : 10px

  • Right : 10px

  • Fond : #e74c3c

  • Couleur de texte : blanc

  • Padding : 5px 10px

  • Coins arrondis : 4px

  • Taille de police : 12px

  • Graisse : bold

Étape 6 : Image du produit

Ciblez les images dans product-card et appliquez :

  • Largeur : 100%

  • Hauteur : 200px

  • object-fit: cover;

  • Coins arrondis en haut uniquement : border-radius: 8px 8px 0 0;

Étape 7 : Titre et prix

Ciblez les <h3> dans product-card et appliquez :

  • Padding : 15px 15px 0 15px (en haut, à droite, en bas, à gauche)

  • Taille : 18px

  • Couleur : #2c3e50

Ciblez price et appliquez :

  • Padding : 10px 15px

  • Taille : 20px

  • Couleur : #27ae60

  • Graisse : bold

Étape 8 : Bouton

Ciblez les boutons dans product-card et appliquez :

  • Largeur : 100%

  • Padding : 12px

  • Fond : #3498db

  • Texte blanc

  • Bordure : none

  • Coins arrondis en bas uniquement : border-radius: 0 0 8px 8px;

  • Cursor : pointer

Au survol (:hover), changez le fond en #2980b9

Rendu attendu

3 cartes alignées avec un badge « NOUVEAU » en haut à droite sur 2 cartes, et un effet d’ombre au survol.

Exercice 2 : Page avec navigation fixe

Fichiers : navigation.html, navigation.css

Créez une page avec une barre de navigation qui reste en haut lors du scroll.

Partie HTML (navigation.html)

Structure à créer :

  1. Un <nav class="navbar"> contenant :

    • Un <div class="logo">MonSite</div>

    • Une liste <ul> avec 3 liens (<a href="#section1">Section 1</a>, etc.)

  2. Trois <section> avec les id section1, section2, section3 et la classe content-section

    Chaque section doit contenir :

    • Un <h2> avec le titre de la section

    • 2 à 3 paragraphes de texte (Lorem ipsum ou texte inventé)

Partie CSS (navigation.css)

Étape 1 : Reset

Appliquez le même reset que l’exercice 1.

Étape 2 : Navigation fixe

Ciblez navbar et créez une barre fixe :

  • Position fixed

  • Top : 0

  • Left : 0

  • Largeur : 100%

  • Fond : #2c3e50

  • Texte blanc

  • Padding : 20px 40px

  • display: flex;

  • justify-content: space-between;

  • z-index : 100

Étape 3 : Logo et liens

Ciblez logo et appliquez :

  • Taille : 24px

  • Graisse : bold

Ciblez le <ul> dans navbar et appliquez :

  • display: flex;

  • Espacement entre les liens : gap: 20px;

  • list-style: none;

Ciblez les liens dans la navbar et appliquez :

  • Texte blanc

  • Pas de soulignement

  • Padding : 5px 10px

Au survol, ajoutez un fond : background-color: rgba(255, 255, 255, 0.1);

Étape 4 : Compenser la navigation

Sur le body, ajoutez :

  • Padding-top : 70px (pour que le contenu ne passe pas sous la navbar)

Étape 5 : Sections

Ciblez content-section et appliquez :

  • Padding : 60px 40px

  • Hauteur minimale : 100vh (pour que chaque section prenne au moins la hauteur de l’écran)

Donnez des couleurs de fond alternées :

  • #section1 : #ffffff

  • #section2 : #f8f9fa

  • #section3 : #e9ecef

Ciblez les <h2> dans les sections :

  • Taille : 28px

  • Margin-bottom : 20px

Ciblez les paragraphes dans les sections :

  • Margin-bottom : 15px

  • Largeur maximale : 800px

Rendu attendu

Une navigation qui reste fixe en haut de la page lors du scroll, avec 3 sections de contenu de couleurs alternées.

Livrables attendus

Un dossier tp4-box-model contenant :

  • Exercice 1 : produits.html, produits.css, et 3 images

  • Exercice 2 : navigation.html, navigation.css

Pensez à valider votre code avec le validateur W3C : https://validator.w3.org/

Critères d’évaluation

  • Box Model : utilisation correcte de padding et margin

  • box-sizing: border-box : présent dans le reset

  • Position : relative sur les cartes, absolute sur les badges, fixed sur la navbar

  • Pseudo-classes : effets :hover fonctionnels

  • Validation W3C : code valide

  • Respect des consignes : tous les éléments demandés