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

  • joseph.cotza.01-37

    joseph.cotza.01-37

    Merci

    le 19/06/2019 à 12h52

  • c_coool-54

    c_coool-54

    heuuuu premiere fois que je poste un commentaire...

    le 23/10/2019 à 22h51

  • c_coool-54

    c_coool-54

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

    le 24/10/2019 à 00h45

  • 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 à 12h52

  • rayan.melon-20

    rayan.melon-20

    ok enfaite faut coller les deux extrémités au début et à la fin </nav><!--

    le 17/01/2020 à 19h32

20 Commentaires

  • ersox240-7

    ersox240-7

    Bonjour, il y a toujours ce bug..

    le 24/06/2020 à 22h57

  • meriam

    meriam Admin

    Quel est le message d'erreur affiché?

    le 25/06/2020 à 16h10

  • meriam

    meriam Admin

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

    le 09/07/2020 à 14h32

  • francklebillon-50

    francklebillon-50

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

    le 20/06/2020 à 15h03

  • meriam

    meriam Admin

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

    le 09/07/2020 à 14h37

  • pwd.phildavis-32

    pwd.phildavis-32

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

    le 16/06/2020 à 11h23

  • meriam

    meriam Admin

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

    le 16/06/2020 à 12h16

  • 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 à 11h18

  • meriam

    meriam Admin

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

    le 16/06/2020 à 12h17

  • mehdimedjdoub-5

    mehdimedjdoub-5

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

    le 16/06/2020 à 01h18

  • meriam

    meriam Admin

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

    le 16/06/2020 à 09h59

  • pesquetamandine94-38

    pesquetamandine94-38

    bug de commentaire citer plus haut

    le 15/06/2020 à 11h23

  • meriam

    meriam Admin

    Bonjour, votre dernier code fonctionne correctement.

    le 15/06/2020 à 13h10

  • Jiink0-77

    Jiink0-77

    bug et encore bug. help

    le 08/06/2020 à 22h14

  • meriam

    meriam Admin

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

    le 09/06/2020 à 15h34

  • 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 08/06/2020 à 03h14

  • meriam

    meriam Admin

    Bonjour, votre dernier code fonctionne correctement.

    le 08/06/2020 à 14h35

  • sarah.aliouane19-11

    sarah.aliouane19-11

    Il ne faut pas mettre d'espace :)

    le 30/04/2020 à 03h10

  • 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 à 15h06

  • meriam

    meriam Admin

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

    le 30/10/2019 à 09h34

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