Exercice 26/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 26/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

  • nzeukeng.rodrigue-95

    j ai se message Erreur(s) : Vous n'avez qu'une modification à effectuer dans l'index.html, ajouter un commentaire html (<!-- puis -->) comme indiqué dans l'ennoncé, n'hésitez pas à utiliser le bouton Reset si besoin <span class="corner1">&lt;div id="menu"&gt;</span> <span class="corner2">&lt;/div&gt;</span> </div><!--ci si est un commentaire --><div id="body"> <span class="corner1">&lt;div id="body"&gt;</span> <span class="corner2">&lt;/div&gt;</span>

  • lot.khom.pro-94

    Bonjour, voici le message d'erreur : "Vous n'avez qu'une modification à effectuer dans l'index.html, ajouter un commentaire html (<!-- puis -->) comme indiqué dans l'ennoncé, n'hésitez pas à utiliser le bouton Reset si besoin. " J'ai l'impression que je suis bien l'énoncé de l'exercice. Help merci!

  • mram Administrateur

    Ligne 9, le premier chevron "<" n'est pas le bon.

  • issam92000

    occupez vous du CSS c'est tout ne touchez pas au commentaire

39 Commentaires

  • mram

    mram Administrateur

    Ligne 9, le premier chevron "<" n'est pas le bon.

    le 01/04/2017 à 11h11

  • phaelier

    phaelier

    Bonsoir Je ne comprends pas la correction? "Vérifiez que vous avez ajouté les commentaires HTML au bon endroit sans toucher au reste du code." Je vous remercie

    le 08/07/2016 à 22h38

  • francois.dreux

    francois.dreux

    Bonsoir, je ne comprends pas non plus mon erreur : le bout de code pour les commentaires est positionné comme demandé, mais j'ai toujours le message d'erreur "Vérifiez que vous avez ajouté les commentaires HTML au bon endroit sans toucher au reste du code." Merci

    le 28/03/2017 à 18h58

  • phaelier

    phaelier

    Bonjour Je ne comprends pas mon erreur: "Vérifiez que vous avez ajouté les commentaires HTML au bon endroit sans toucher au reste du code." Je vous remercie

    le 08/07/2016 à 22h43

  • mram

    mram Administrateur

    Vous avez oublié une partie des instructions concernant le fichier index.html

    le 28/03/2017 à 01h16

  • phaelier

    phaelier

    le 08/07/2016 à 22h43

  • phaelier

    phaelier

    Bonsoir Je ne comprends pas mon erreur: "Vérifiez que vous avez ajouté les commentaires HTML au bon endroit sans toucher au reste du code". Je vous remercie

    le 08/07/2016 à 23h25

  • mram

    mram Administrateur

    Il faut juste mettre les balises de commentaires, mais pas mettre de commentaires dedans.

    le 11/07/2016 à 12h07

  • line.lagarde

    line.lagarde

    je ne comprends pas mon erreur.

    le 05/06/2016 à 19h53

  • mram

    mram Administrateur

    Merci d'indiquer le message que vous avez.

    le 05/06/2016 à 20h22

  • sanaatargui

    sanaatargui

    Bonjour, ou est mon erreur svp?

    le 24/03/2017 à 16h56

  • melodias9

    melodias9

    bonjour, j'ai bien fait l'exercice mais je n'ai pas compris la leçon... quelqu'un peut m expliquer ?

    le 01/09/2017 à 15h00

  • mram

    mram Administrateur

    Bonjour, qu'est ce que vous n'avez pas compris ?

    le 06/09/2017 à 10h23

  • lolululo-22

    lolululo-22

    Bonjour, j'ai ajouté le commentai, mis les "box-sizing" mais il me marque "Vérifiez que vous avez ajouté les commentaires HTML au bon endroit sans toucher au reste du code., Vous devriez avoir le <div> "body" avec la règle CSS "box-sizing: border-box"."

    le 28/05/2018 à 22h04

  • mram

    mram Administrateur

    Bonjour, les balises de commentaires ne sont pas au bon endroit. Relisez bien les instructions.

    le 02/06/2018 à 04h28

  • gaudin.yannick69-79

    gaudin.yannick69-79

    Bonsoir,je ne sais pas si une personne vous l'a déjà signalé mais cet exercice porte le numéro 26 et non le numéro 25 comme cela devrait être le cas.

    le 08/08/2018 à 01h04

  • mram

    mram Administrateur

    Bonjour, merci pour le retour. C'est juste un souci d'affichage car l'exercice se positionne bien n°25.

    le 13/08/2018 à 04h04

  • lolululo-22

    lolululo-22

    Vérifiez que vous avez ajouté les commentaires HTML au bon endroit sans toucher au reste du code., Vous devriez avoir le <div> "menu" avec la règle CSS "box-sizing: border-box".

    le 21/05/2018 à 17h20

  • mram

    mram Administrateur

    Bonjour, relisez bien l'énoncé, vous avez oublié de l'appliquer à un autre "div"...

    le 23/05/2018 à 07h27

  • wilfrid

    wilfrid

    Bonjour, une fois l'exercice fini, le lien vers la partie suivante ne fonctionne pas, ce n'est pas trop génant mais je tenais à vous le signaler (win10/firefox55.0.3)

    le 07/10/2017 à 17h53

  • mram

    mram Administrateur

    Bonjour, oui nous le savons, c'est sur la todo liste. Merci !

    le 09/10/2017 à 00h51

  • jeremy.didier77

    jeremy.didier77

    j'aurai besoind d'aide pour trouver mon erreur s'il vous plait

    le 03/08/2017 à 12h06

  • mram

    mram Administrateur

    Bonjour, quel message d'erreur avez-vous ?

    le 05/08/2017 à 10h45

  • clementine.thenot

    clementine.thenot

    Bonjour, j'ai un message d'erreur me demandant de vérifier si j'ai "ajouté les commentaires HTML au bon endroit sans toucher au reste du code".

    le 05/08/2017 à 19h28

  • mram

    mram Administrateur

    Bonjour, il faut juste mettre <!-- --> mais rien d'autre.

    le 09/08/2017 à 10h59

  • kanoute.lassana91-81

    kanoute.lassana91-81

    bonjour j'ai un petit problème même après avoir effectué ce qui était demandé les <divs> ne sont pas alignés

    le 17/09/2018 à 18h18

  • mram

    mram Administrateur

    Bonjour, est-ce que vous avez un message d'erreur ?

    le 02/10/2018 à 05h56

  • tjmasiee-86

    tjmasiee-86

    Je ne comprend pas mon erreur j'ai ce message : Vous n'avez qu'une modification à effectuer dans l'index.html, ajouter un commentaire html (<!-- puis -->) comme indiqué dans l'ennoncé, n'hésitez pas à utiliser le bouton Reset si besoin

    le 25/02/2019 à 10h03

  • meriam

    meriam Administrateur

    Il suffit d'ajouter le commentaire sans ajouter du contenu.

    le 25/02/2019 à 12h55

  • lolululo-22

    lolululo-22

    Bonjour, j'ai ajouté le commentaire sans toucher au reste du code mais il me marque toujours "Vérifiez que vous avez ajouté les commentaires HTML au bon endroit sans toucher au reste du code."

    le 24/05/2018 à 23h36

  • mram

    mram Administrateur

    Bonjour, non vous n'avez pas mis les balises au bon endroit. Avez-vous bien compris où il faut les mettre ?

    le 28/05/2018 à 05h02

  • nkeshimanabrice-37

    nkeshimanabrice-37

    c'est bien corriger...

    le 26/10/2018 à 14h39

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">&lt;div id="header"&gt;</span> <span class="corner2">&lt;/div&gt;</span> </div> <div id="menu"> <span class="corner1">&lt;div id="menu"&gt;</span> <span class="corner2">&lt;/div&gt;</span> </div><!-- --><div id="body"> <span class="corner1">&lt;div id="body"&gt;</span> <span class="corner2">&lt;/div&gt;</span> </div> <div id="footer"> <span class="corner1">&lt;div id="footer"&gt;</span> <span class="corner2">&lt;/div&gt;</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; }