Rappel 5 sur 5

Exercice 25/25

Dans le fichier index.html, ouvrez des commentaire HTML ‹!-- à la fin de la ligne 15 juste après le ‹/div› et fermez-les --› au début de la ligne 16 juste avant le ‹div›;
Dans le fichier stylesheet.css, ajoutez la propriété box-sizing: border-box pour le div "menu" et pour le div "body";
Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 25/25

Les div "menu" et "body" devraient se trouver côte à côte grâce à inline-block. Mais ce n'est pas le cas pour deux raisons :

Entre des éléments HTML positionnés en inline-block, il peut y avoir un espace vide dû au retour à la ligne dans le code HTML. Pour y remédier, il suffit de mettre des commentaires HTML entre les éléments en question;
Selon les navigateurs, la largeur width d'un élément peut prendre en compte soit la largeur de son contenu, soit cette largeur plus le padding et la border. Un élément peut donc prendre plus de largeur que ce qui est précisé avec width. Pour que width soit égal à la largeur de l'ensemble il faut utiliser la propriété box-sizing: border-box;

Commentaires les mieux notés

303 Commentaires

Jubecloe44-83

bonjour, pourriez vous me valider l'exo piège LoL, j'aimerais avoir l'icône verte, svp?

le 21/03/2023 à 16h37
Patricio M Admin

Code bon, je pense que tu vois l'icone vert :))

le 22/03/2023 à 09h39
pascalhuppermans-100

J'ai fini par trouver ce qui ne fonctionnait pas ;-)

le 26/02/2023 à 15h22
Patricio M Admin

Très bien!!

le 27/02/2023 à 11h11
cel.leseig-99

Pourquoi je ne peux valider alors que les 2 blocs s'affichent cote à cote?

le 09/02/2023 à 15h22
Patricio M Admin

Ton dernier code est correct :)

le 10/02/2023 à 08h03
DjamilBoudeffa

C'est juste un problème d'indentation. Ligne 15 et 16 doivent être à la même indentation

le 28/10/2022 à 22h07
tiphaine.destoop-15

Je crois avoir placé mon commentaire au bon endroit, toutefois je ne peux pas valider...

le 27/10/2022 à 10h03
Patricio M Admin

Tiphanie, ton commentaire est au bon endroit :) L'exo est un peu piège

le 28/10/2022 à 07h30
gilles.jamain2-80

je ne comprends pas ce qu'il faut mettre dans le commentaire dans l'index html entre les 2 balises ce n'est pas clair (commun dans l'énoncé ?? de quel commentaire parle t on ???

le 21/10/2022 à 07h42
Patricio M Admin

ligne 15  c'est tout. Cela sert à enlèver l'espace entre les lignes quand tu le voit dans le navigateur

le 21/10/2022 à 07h48
gilles.jamain2-80

j'ai le meme pb que tout le monde cet exercice n'est pas clair sinon nous ne serions pas si nombreux a se poser la question !!!!!

le 20/10/2022 à 15h56
Patricio M Admin

Oui, je le sais... l

le 21/10/2022 à 07h54
balthazar.emmanuel.fr-52

Si vous avez du mal, essayer de tout taper à la main, y compris le code css, tout en faisant bien attention a l'indentation, c'est comme cela que j'ai réussi

le 19/10/2022 à 20h57
jason.farcy-6

Bonjour, j'ai reset plusieurs fois en réessayant en m'aidant des commentaires mais rien a y faire, pourtant j'ai respecté toutes les consignes énoncées

le 28/09/2022 à 15h50
Patricio M Admin

de mon coté, ça passe

le 29/09/2022 à 08h21
valentin.laveau-27

je ne comprend pas ce qui ne va pas dans mon code

le 12/09/2022 à 10h04
Patricio M Admin

Le dernier code est correct :)

le 12/09/2022 à 15h02
frimouss.graphweb-55

Bonjour, j'ai bien mis le commentaire à la ligne 15 après la div fermante du menu et fermé la div à la ligne 16 avant la la div body ! cela ne fonctionne pas !

le 06/09/2022 à 11h03
Patricio M Admin

Je ne vois pas box-sizing: border-box dans ton CSS comme c'est écrit dans la consigne

le 06/09/2022 à 13h41
wilsonjeanclaude15-97

ligne 15 : </div><div id="body"> mais cela ne fonctionne pas malgré avoir cliquer sur le bouton Reset

le 15/07/2022 à 09h55
meriam Admin

Bonjour, n'ajoutez un contenu, il suffit d'ajouter la 1 ère partie du commentaire juste après le div menu et la partie fermante juste avant le div body

le 15/07/2022 à 10h11
meriam Admin

Supprimez ce contenu ==>Ceci est commentaire

le 15/07/2022 à 10h11
nitramate-1991-314-01

Si ça peut aider d'autres personnes qui ont eu des difficultés avec le commentaire : il faut que l'indentation sur la ligne 16 soit exactement au même niveau qu'avant, une fois avoir tapé les caractères pour fermer le commentaire, sinon on a une erreur.

le 06/07/2022 à 09h42
meriam Admin

Ajoutez la 1ère partie du commentaire juste aprés la balise fermante du 1 er div menu et la partie fermante juste avant la balise ouvrante du 2 ème div avec id body.

le 06/07/2022 à 10h33
rcolboc.dev-25

Bonjour, je ne peux pas valider à cause du commentaire, je ne comprends ce qui est demandé.

le 03/06/2022 à 09h25
meriam Admin

de quel commentaire, vous parlez?

le 03/06/2022 à 13h23
borz

Bonjour, je ne comprends pas mon erreur

le 21/05/2022 à 12h35
meriam Admin

Bonjour, est ce que vous avez copié le commentaire à partir de l'énoncé??

le 24/05/2022 à 09h59

Pour publier un commentaire, vous devez vous connecter.

index.html

stylesheet.css

<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Rappel 5 sur 5</title> </head> <body> <div id="header"> <span class="corner1"><div id="header"></span> <span class="corner2"></div></span> </div> <div id="menu"> <span class="corner1"><div id="menu"></span> <span class="corner2"></div></span> </div> <div id="body"> <span class="corner1"><div id="body"></span> <span class="corner2"></div></span> </div> <div id="footer"> <span class="corner1"><div id="footer"></span> <span class="corner2"></div></span> </div> </body> </html>

#header, #menu, #body, #footer { position: relative; } span { padding : 1px; } #header { border: 3px solid #2196F3; height: 80px; position: fixed; left: 0; right: 0; z-index: 1; } #header span { background-color: #2196F3; } #menu { border: 3px solid #8BC34A; height: 500px; display: inline-block; width: 30%; } #menu span { background-color: #8BC34A; } #body { border: 3px solid #E91E63; height: 500px; display: inline-block; width: 70%; } #body span { background-color: #E91E63; color: #ffffff; } #footer { border: 3px solid #673AB7; height: 50px; } #footer span { background-color: #673AB7; color: #ffffff; } .corner1 { position: absolute; top: 0; left: 0; } .corner2 { position: absolute; bottom: 0; right: 0; }

Activer JavaScriptJavaScriptJS

http://localhost:8080