retour de Matthieu
This commit is contained in:
+306
@@ -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 `<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 :
|
||||
|
||||
```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 `<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** :
|
||||
|
||||
```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 `<head>` est presque vide
|
||||
```html
|
||||
<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)
|
||||
```html
|
||||
<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.
|
||||
|
||||
```html
|
||||
<!-- 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).
|
||||
```html
|
||||
<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 ! 🚀
|
||||
Reference in New Issue
Block a user