Exercice 6/9

  • Dans le fichier index.html, ouvrez (‹!--) les commentaires HTML à la fin de la ligne 15 et fermez-les (--›) au début de la ligne 16;
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 6/9

Vous remarquez que malgré l'ajout des propriétés pour mettre les deux blocs côte à côte, ils sont toujours l'un en-dessous de l'autre.

Cela est dû à un espace invisible qui se créé quand il y a un retour à la ligne entre la balise fermante du nav et du section. Rappelez-vous, pour y remédier il suffit d'ajouter des commentaires HTML à cet endroit précis.

C'est un point important à vérifier quand vous faites un layout avec des blocs disposés en inline-block.

Commentaires les mieux notés

123 Commentaires

  • Maude

    Maude

    Bonjour, j'ai reset plusieurs fois l'exercice mais j'ai toujours une erreur. J'ai bien ajouté <!-- ligne 15 et --> ligne 16. Mon code est-il correct?

    le 15/01/2021 à 08h12

  • meriam

    meriam Admin

    Bonjour, j'ai testé votre code et il fonctionne correctement.

    le 15/01/2021 à 10h43

  • meriam

    meriam Admin

    N'hésitez pas à poser des questions si vous trouvez des problèmes dans les exercices qui suivent. Bon travail.

    le 15/01/2021 à 10h43

  • ersox240-7

    ersox240-7

    Bonjour, il y a toujours ce bug..

    le 24/06/2020 à 18h57

  • meriam

    meriam Admin

    Quel est le message d'erreur affiché?

    le 25/06/2020 à 12h10

  • meriam

    meriam Admin

    Bonjour, le problème est résolu pour cet exo, tu peux le tester pour la validation.

    le 09/07/2020 à 10h32

  • francklebillon-50

    francklebillon-50

    comme exercice précédent ça ne semble pas fonctionner

    le 20/06/2020 à 11h03

  • meriam

    meriam Admin

    Bonjour, le problème est résolu pour cet exo, tu peux le tester pour la validation.

    le 09/07/2020 à 10h37

  • pwd.phildavis-32

    pwd.phildavis-32

    Pourqui ce ne marche pas?! J'ai le meme problem avec le dernier exercise!

    le 16/06/2020 à 07h23

  • meriam

    meriam Admin

    Bonjour, une mise à jour en cours, merci pour votre compréhension.

    le 16/06/2020 à 08h16

  • sebastien.massera-44

    sebastien.massera-44

    Même problème avec les commentaires que dans un exercice précédent? message d'erreur

    le 16/06/2020 à 07h18

  • meriam

    meriam Admin

    une mise à jour en cours, merci pour votre compréhension.

    le 16/06/2020 à 08h17

  • mehdimedjdoub-5

    mehdimedjdoub-5

    j'ai aussi cette erreur, comme dans un précédent exercice

    le 15/06/2020 à 21h18

  • meriam

    meriam Admin

    Votre code est correct. Une mise à jour en cours, merci pour votre compréhension.

    le 16/06/2020 à 05h59

  • pesquetamandine94-38

    pesquetamandine94-38

    bug de commentaire citer plus haut

    le 15/06/2020 à 07h23

  • meriam

    meriam Admin

    Bonjour, votre dernier code fonctionne correctement.

    le 15/06/2020 à 09h10

  • Jiink0-77

    Jiink0-77

    bug et encore bug. help

    le 08/06/2020 à 18h14

  • meriam

    meriam Admin

    Votre code est correct, si ça marche pas encore refaites les commentaires.

    le 09/06/2020 à 11h34

  • gregoryalexiss-52

    gregoryalexiss-52

    Bonsoir, je ne comprend vraiment pas, j'ai tout essayé mais ajouter les commentaires ne fonctionne pas. J'ai rencontré le même problème dans un exercice précédent ( </nav><!-- (à la ligne) --><section> ). Le même message d'erreur cité plus haut apparaît..

    le 07/06/2020 à 23h14

  • meriam

    meriam Admin

    Bonjour, votre dernier code fonctionne correctement.

    le 08/06/2020 à 10h35

  • sarah.aliouane19-11

    sarah.aliouane19-11

    Il ne faut pas mettre d'espace :)

    le 29/04/2020 à 23h10

  • alexisyovo75-14

    alexisyovo75-14

    Il y a un bug je mets les balises de commentaire mais ça m'affiche "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" sachant le mot "enoncé" est écrit avec 2 n et que j'ai fait reset plusieurs fois

    le 28/10/2019 à 13h06

  • meriam

    meriam Admin

    cliquez sur reset et refaites les le commentaire en utilisant les chevrons < et >.

    le 30/10/2019 à 07h34

  • c_coool-54

    c_coool-54

    </nav><!-- --> <section>

    le 23/10/2019 à 20h45

  • c_coool-54

    c_coool-54

    heuuuu premiere fois que je poste un commentaire...

    le 23/10/2019 à 18h51

  • joseph.cotza.01-37

    joseph.cotza.01-37

    Merci

    le 19/06/2019 à 08h52

  • joseph.cotza.01-37

    joseph.cotza.01-37

    bizarre, ce coup-ci cela a fonctionné après un reset, une ressaisie

    le 19/06/2019 à 08h52

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Les commentaires HTML</title> </head> <body> <header> <span class="corner1">&lt;header&gt;</span> <span class="corner2">&lt;/header&gt;</span> </header> <nav> <span class="corner1">&lt;nav&gt;</span> <span class="corner2">&lt;/nav&gt;</span> </nav> <section> <span class="corner1">&lt;section&gt;</span> <span class="corner2">&lt;/section&gt;</span> <article> <span class="corner1">&lt;article&gt;</span> <span class="corner2">&lt;/article&gt;</span> </article> <aside> <span class="corner1">&lt;aside&gt;</span> <span class="corner2">&lt;/aside&gt;</span> </aside> <footer> <span class="corner1">&lt;footer&gt;</span> <span class="corner2">&lt;/footer&gt;</span> </footer> </section> <footer> <span class="corner1">&lt;footer&gt;</span> <span class="corner2">&lt;/footer&gt;</span> </footer> </body> </html>
body { margin: 0; } header, nav, footer, section, article, aside { position: relative; border: 3px solid #cccccc; box-sizing: border-box; } span { padding : 1px; background-color: #cccccc; } header { border: 3px solid #2196F3; height: 80px; position: fixed; left: 0; right: 0; z-index: 1; } header span { background-color: #2196F3; } nav { border: 3px solid #8BC34A; height: 500px; display: inline-block; width: 20%; } nav span { background-color: #8BC34A; } section { border: 3px solid #E91E63; padding: 25px; display: inline-block; width: 80%; } section span { background-color: #E91E63; } footer { border: 3px solid #673AB7; height: 50px; } footer span { background-color: #673AB7; color: #ffffff; } article { border: 3px solid #009688; height: 500px; } article span { background-color: #009688; } aside { border: 3px solid #FFC107; height: 500px; } aside span { background-color: #FFC107; } .corner1 { position: absolute; top: 0; left: 0; } .corner2 { position: absolute; bottom: 0; right: 0; }