FleetZen

`, 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 `