diff --git a/CORRECTIONS.md b/CORRECTIONS.md new file mode 100644 index 0000000..b2d7c13 --- /dev/null +++ b/CORRECTIONS.md @@ -0,0 +1,306 @@ +# 🚗 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 : + +```css +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 +```css +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 `` contient des `
`, 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 : + +```css +.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) + +```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 `
` 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** : + +```css +#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 + +```css +/* 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 + +```css +#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 + +```css +#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. + +```css +/* 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 + +```css +.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 : + +```css +.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 `` est presque vide +```html + + + + FleetZen + + +``` +Et ajoutez la langue : ``. + +### 2. Un `p` qui traîne tout seul (faute de frappe) +```html +
+
+``` + +### 3. Les boutons : petit ✏️ errata de ce que je vous ai dit + +Je vous avais dit qu'on utilise **très souvent ``** — et c'est vrai ! Mais j'ai oublié de préciser **dans quel cas** : `` sert surtout **à l'intérieur d'un formulaire** (`
`), 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 : + +- `` = un **lien** (pour naviguer vers une page) +- ` +``` + +> 💡 **À retenir :** `` = pour **saisir/envoyer** dans un formulaire. `` ou `