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

298 Commentaires

  • Jubecloe44-83

    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

    Patricio M Admin

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

    le 22/03/2023 à 09h39

  • pascalhuppermans-100

    pascalhuppermans-100

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

    le 26/02/2023 à 15h22

  • Patricio M

    Patricio M Admin

    Très bien!!

    le 27/02/2023 à 11h11

  • cel.leseig-99

    cel.leseig-99

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

    le 09/02/2023 à 15h22

  • Patricio M

    Patricio M Admin

    Ton dernier code est correct :)

    le 10/02/2023 à 08h03

  • DjamilBoudeffa

    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

    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

    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

    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

    Patricio M Admin

    ligne 15 <!-- puis ligne 16 --> 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

    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

    Patricio M Admin

    Oui, je le sais... l

    le 21/10/2022 à 07h54

  • balthazar.emmanuel.fr-52

    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

    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

    Patricio M Admin

    de mon coté, ça passe

    le 29/09/2022 à 08h21

  • valentin.laveau-27

    valentin.laveau-27

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

    le 12/09/2022 à 10h04

  • Patricio M

    Patricio M Admin

    Le dernier code est correct :)

    le 12/09/2022 à 15h02

  • frimouss.graphweb-55

    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

    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

    wilsonjeanclaude15-97

    ligne 15 : </div><!-- mon commentaire, ensuite au debut de la ligne 16: --><div id="body"> mais cela ne fonctionne pas malgré avoir cliquer sur le bouton Reset

    le 15/07/2022 à 09h55

  • meriam

    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

    meriam Admin

    Supprimez ce contenu ==>Ceci est commentaire

    le 15/07/2022 à 10h11

  • nitramate-1991-314-01

    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

    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

    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

    meriam Admin

    de quel commentaire, vous parlez?

    le 03/06/2022 à 13h23

  • borz

    borz

    Bonjour, je ne comprends pas mon erreur

    le 21/05/2022 à 12h35

  • meriam

    meriam Admin

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

    le 24/05/2022 à 09h59

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; }