matthieu/stagiaire

Fork 0

Files

T

matthieu 532a57cd01 retour de Matthieu

2026-06-17 13:31:21 +02:00

13 KiB

Raw Blame History

🚗 Corrections & explications — FleetZen

Salut les stagiaires ! 👋

Votre page est un super début : les couleurs, les boutons avec dégradé, l'ombre sous la barre du haut… tout ça marche et c'est joli. Bravo !

Ce document n'est pas là pour dire que c'est "mal fait". Il est là pour vous expliquer les principes qui rendent le HTML et le CSS faciles une fois qu'on les comprend. Lisez doucement, dans l'ordre. 🙂

🚨 D'abord, le bug le plus urgent : une accolade `}` oubliée

À la toute fin de votre fichier css/style.css, vous avez écrit :

p {
    font-family: cursive;

👉 Il manque l'accolade de fermeture } !

En CSS, chaque règle ressemble à une boîte : elle s'ouvre avec { et doit se fermer avec }. Si on oublie de la fermer, le navigateur est perdu : il ne sait plus où finit la règle, et tout ce qui suit peut être ignoré.

✅ Correction

p {
    font-family: cursive;
}

💡 À retenir : en CSS, à chaque { doit correspondre un }. Comme des parenthèses : ce qu'on ouvre, on le ferme. Toujours.

🧠 Les 3 grands principes à retenir

Principe 1 — La page est une boîte de poupées russes

Tout en HTML est une boîte dans une boîte dans une boîte. Le <body> contient des <div>, qui contiennent du texte ou des images. 👉 Quand on donne une taille à une boîte, il faut toujours se demander : « par rapport à quoi ? »

Principe 2 — Chaque boîte a 4 couches (le "box model")

Imaginez un cadre photo :

┌─────────── marge (margin) — l'espace AUTOUR ───────────┐
│  ┌──────── bordure (border) ────────────────────────┐  │
│  │  ┌───── rembourrage (padding) — l'espace DEDANS ┐ │  │
│  │  │            CONTENU (texte, image)            │ │  │
│  │  └──────────────────────────────────────────────┘ │  │
│  └────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────┘

padding = coussin à l'intérieur de la boîte
margin = espace à l'extérieur, entre cette boîte et les autres
border = le trait du cadre

Principe 3 — `width: 100%` veut dire « toute la largeur de mon parent »

Et c'est exactement là que se cache votre fameux bug du scroll. 👇

🐛 Le bug du scroll : « j'ajoute du padding et une barre de défilement apparaît ! »

C'est le piège le plus classique du CSS, et vous êtes tombés dedans pile en ce moment. Regardez ce que vous venez d'ajouter :

.align_x {
    width: 100%;        /* toute la largeur de l'écran */
    padding-left: 10px; /* + 10px à gauche */
    padding-right: 10px;/* + 10px à droite */
}

Par défaut, le navigateur calcule la largeur comme ça :

largeur totale = width + padding gauche + padding droite + margin gauche + margin droite

Donc votre boîte fait en réalité :

100% (déjà tout l'écran) + 10px + 10px = plus large que l'écran → le navigateur ajoute une barre de défilement pour aller voir le morceau qui dépasse. 😱

C'est exactement le scroll horizontal que vous voyez. Ce n'est pas un margin sur le contenu qui est "interdit", c'est juste que 100% + quelque chose ça déborde.

✅ La solution magique (à mettre tout en haut de votre CSS)

* {
    box-sizing: border-box;
}

box-sizing: border-box dit au navigateur :

« Quand je dis width: 100%, débrouille-toi pour que le padding et la bordure soient compris DEDANS les 100%, sans jamais dépasser. »

C'est la première ligne que tous les pros écrivent. Mettez-la, et votre padding de 10px ne fera plus apparaître de scroll. 🎉

⚠️ Attention : ça marche pour le padding, PAS pour le margin

box-sizing: border-box range le padding et la bordure à l'intérieur de la largeur. Mais le margin, lui, reste toujours à l'extérieur de la boîte — border-box n'y change rien.

Donc si un jour vous mettez un margin-left/margin-right sur une boîte en width: 100%, le scroll reviendra, même avec border-box. Dans ce cas, la bonne solution est plutôt :

soit utiliser du padding au lieu du margin (et garder border-box),
soit enlever le width: 100% : une <div> occupe déjà toute la largeur disponible toute seule, le margin se range alors dans cette largeur sans déborder.

💡 À retenir :

width: 100% + padding → réglé par box-sizing: border-box ✅

width: 100% + margin → ça déborde quand même ❌ (le margin est toujours en dehors). Utilisez du padding, ou enlevez le width: 100%.

🐛 Le bug n°2 : `height: 100%` ne marche presque jamais comme on croit

Vous avez mis height un peu partout (body: 100%, .align_x: 100%, #text_1: 15%…).

Le piège : height: 100% veut dire « 100% de la hauteur de mon parent ». Mais si le parent n'a pas de hauteur fixée, alors 100% de rien = rien. La règle est donc souvent ignorée, ce qui donne des résultats imprévisibles.

✅ La règle simple pour débutants

Pour la largeur : width en % ça marche bien. 👍
Pour la hauteur en % : évitez-la (c'est elle qui est ignorée). Laissez plutôt le contenu décider tout seul.

👍 L'exception : une hauteur FIXE en `px`, comme votre navbar

Votre barre du haut est un très bon exemple à suivre :

#nav_barre {
    height: 100px;   /* ✅ parfait : une hauteur fixe en px */
}

Ici vous voulez que la barre fasse toujours 100px, peu importe le contenu : c'est un élément de décor (comme le footer). Pour ça, une hauteur fixe en px est exactement la bonne méthode, et ça marche toujours — pas besoin que le parent ait une hauteur, contrairement aux %.

Petit bonus : c'est justement parce que #nav_barre a une vraie hauteur (100px) que le height: 100% de vos #buttons à l'intérieur fonctionne ✅. Le % marche quand le parent a une hauteur réelle ; il échoue quand le parent n'en a pas.

👉 La vraie règle est donc :

hauteur en px pour les éléments de décor à taille fixe (navbar, footer) → ✅
hauteur en % → seulement si le parent a lui-même une hauteur, sinon c'est ignoré
pour du contenu qui grandit (texte) → pas de hauteur du tout, on laisse faire

/* AVANT ❌ */
#text_1 {
    width: 65%;
    height: 15%;   /* ← inutile, ignoré, et source de bugs */
}

/* APRÈS ✅ */
#text_1 {
    width: 65%;
    /* pas de height : le texte prend la place qu'il faut */
}

💡 À retenir : la hauteur en % est piégeuse (ignorée si le parent n'a pas de hauteur). Une hauteur fixe en px pour un élément de décor (navbar, footer) est une bonne pratique ✅. Pour du contenu qui grandit, on ne fixe pas la hauteur du tout.

🐛 Le bug n°3 : les images sont déformées

#img_1 {
    width: 20%;
    height: 20%;   /* ❌ */
}

En donnant à la fois une largeur ET une hauteur, on écrase l'image comme de la pâte à modeler : elle s'aplatit ou s'étire.

✅ On fixe UNE seule dimension, l'autre se calcule toute seule

#img_1 {
    width: 20%;
    height: auto;   /* "auto" garde les bonnes proportions */
}

💡 À retenir : pour une image, on choisit width OU height, et on met auto pour l'autre. (Même chose pour .image_footer.)

🐛 Le bug n°4 : `display: flex` sur des choses qui n'en ont pas besoin

display: flex est un outil pour ranger des boîtes (côte à côte, ou centrées…). Il sert seulement sur le parent qui contient les éléments à ranger.

Vous l'avez mis sur une image (#img_1) et sur un paragraphe (#text_1). Sur eux, ça ne range rien et ça peut même casser l'affichage.

/* OUI ✅ : align_x contient un texte + une image à aligner */
.align_x {
    display: flex;
    justify-content: space-between;
}

/* NON ❌ : une image seule n'a rien à ranger à l'intérieur */
#img_1 {
    display: flex;   /* ← à enlever */
}

💡 À retenir : flex = sur le parent, pour aligner ses enfants.

🐛 Le bug n°5 : le footer `position: fixed` cache le texte

.footer {
    position: fixed;
    bottom: 0;
}

position: fixed = « colle ce truc à l'écran, il ne bouge plus, même quand on scrolle ». C'est exactement ce qu'on veut ici : un footer toujours visible en bas de la fenêtre. 👍 Votre position: fixed; bottom: 0; est donc le bon choix, gardez-le !

Le seul effet de bord à connaître : comme le footer est "décollé" du reste, il se pose par-dessus le contenu et peut cacher la fin de votre texte.

✅ La correction : réserver de la place pour le footer

On garde le footer fixe, et on dit simplement au body de laisser un espace en bas, de la hauteur du footer :

.footer {
    text-align: center;
    background-color: cadetblue;
    font-size: 25px;
    position: fixed;   /* ✅ on garde : footer toujours visible */
    bottom: 0;
    width: 100%;
}

body {
    padding-bottom: 60px;   /* ← réserve la place du footer, le texte n'est plus caché */
}

💡 À retenir : position: fixed sort l'élément du flux normal → il recouvre le reste. Quand on veut un footer toujours visible, c'est le bon outil, mais il faut réserver sa place (ici avec un padding-bottom sur le body).

📝 Les corrections dans le HTML

1. La balise `<head>` est presque vide

<head>
    <meta charset="utf-8" />                                    <!-- pour les accents é à ç -->
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- pour le mobile -->
    <title>FleetZen</title>                                     <!-- le titre dans l'onglet -->
    <link rel="stylesheet" href="css/style.css" />
</head>

Et ajoutez la langue : <html lang="fr">.

2. Un `p` qui traîne tout seul (faute de frappe)

<div p id="text_1">     <!-- ❌ ce "p" tout seul ne veut rien dire -->
<div id="text_1">       <!-- ✅ corrigé -->

3. Les boutons : petit ✏️ errata de ce que je vous ai dit

Je vous avais dit qu'on utilise très souvent <input> — et c'est vrai ! Mais j'ai oublié de préciser dans quel cas : <input> sert surtout à l'intérieur d'un formulaire (<form>), c'est-à-dire quand l'utilisateur doit saisir ou envoyer quelque chose : un champ de texte, une case à cocher, un bouton « Envoyer », etc.

Ici, vos boutons « contact » et « services » ne sont pas dans un formulaire : ils servent à aller sur une autre page. Pour ça, deux outils sont plus adaptés :

<a href="..."> = un lien (pour naviguer vers une page)
<button> = un bouton avec du texte dedans (plus simple à styler que <input>)

Petit point technique au passage : <input> est une balise « auto-fermante », elle ne prend pas de </input>. Donc <input ...></input> est incorrect.

<!-- AVANT ❌ : input hors formulaire + balise de fermeture en trop -->
<input class="styled" type="button" value="contact"></input>

<!-- APRÈS ✅ : un lien qui mène vraiment à la page contact -->
<a href="pages/contact.html"><button class="styled">contact</button></a>

💡 À retenir : <input> = pour saisir/envoyer dans un formulaire. <a> ou <button> = pour cliquer et naviguer.

4. Toujours un `alt` sur les images

alt = le texte qui décrit l'image (pour les malvoyants, et si l'image ne charge pas).

<img id="img_1" src="..." alt="Porsche 912 de 1967" />

5. Les pages `contact.html` et `services.html` sont vides

Les boutons ne mènent donc à rien. Pensez à y mettre au moins une structure HTML de base.

✅ Le résumé en une carte

Principe	À retenir
accolades	chaque `{` a son `}` — comme des parenthèses
box-sizing	`* { box-sizing: border-box; }` en 1ère ligne → fini les scrolls qui apparaissent
largeur vs hauteur	`width` en % ✅ — la `height`, on la laisse tranquille la plupart du temps
images	une seule dimension + `auto` pour l'autre, sinon ça déforme
flex	sur le parent, jamais sur un élément seul
position: fixed	colle à l'écran mais recouvre le reste → réserver de la place
box model	largeur totale = width + padding + margin (sauf avec border-box)

Vous avez déjà compris les bases, le reste c'est de la pratique. Continuez comme ça ! 🚀

13 KiB Raw Blame History