Exercice 3/9

  • Dans le fichier stylesheet.css, ajoutez le sélecteur body ainsi que sa propriété margin: 0;
  • Ajoutez également la propriété box-sizing: border-box aux balise : header, nav, footer, section, article et aside (Attention le sélecteur existe déjà);
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 3/9

Maintenant que vous distinguez plus clairement la structure HTML du layout, il faut prendre quelques précautions afin de travailler sur une base propre.

Par défaut, la balise body possède des marges margin de 8px. Quand vous travaillez sur une mise en page web, il est préférable d'annuler ces marges afin de pouvoir travailler sur l'ensemble de l'espace disponible. Il serait dommage de se limiter dès le début dans la création du layout à cause de comportements par défaut non souhaités.

C'est aussi le moment de faire en sorte que tous vos blocs soient dimensionnés tel que vous l'indiquez avec width et ce quelque soit la valeur de leur border et padding qui peuvent changés pendant la création du layout. Ainsi, quand vous dites à un bloc de faire par exemple 100px de large, vous êtes sûr que sa largeur totale sera bien de 100px et pas plus.

Commentaires les mieux notés

  • mram Administrateur

    Bonjour,

    Le script de correction a été optimisé pour mieux géré les propriétés css raccourcies, et ce sur plusieurs exercices qui les utilise, suite aux différents retours utilisateurs. La mise à jour sera déployée prochainement.

    Cordialement.

  • rbarre

    Même problème

  • mram Administrateur

    Dans le fichier .css il y a 2 ajouts à faire : la propriété "margin" pour body (à la ligne 1). Et ligne 5 ajouter la propriété "box-sizing". Le numéro des lignes indiqué dans les instructions est valable avant l'édition du fichier .css . En ajoutant du code avant, la ligne 5 devient la ligne 9 : c'est bien là où il y a le commentaire qu'il faut ajouter la propriété "box-sizing".

  • pascal-ds

    houla ! d'accord... je suggèrerais une modification de l'énoncé dans ce cas, puisqu'il est source d'erreur. Pourquoi ne pas dire "ajouter la propriété box-sizing au x autres sélecteurs " ? (et ne pas mettre de commentaire, libre choix à l'élève de mettre l'instruction où il faut)

17 Commentaires

  • mram

    mram Administrateur

    Bonjour,

    Le script de correction a été optimisé pour mieux géré les propriétés css raccourcies, et ce sur plusieurs exercices qui les utilise, suite aux différents retours utilisateurs. La mise à jour sera déployée prochainement.

    Cordialement.

    le 24/02/2016 à 15h26

  • rbarre

    rbarre

    Même problème

    le 10/03/2016 à 11h09

  • mram

    mram Administrateur

    Dans le fichier .css il y a 2 ajouts à faire : la propriété "margin" pour body (à la ligne 1). Et ligne 5 ajouter la propriété "box-sizing". Le numéro des lignes indiqué dans les instructions est valable avant l'édition du fichier .css . En ajoutant du code avant, la ligne 5 devient la ligne 9 : c'est bien là où il y a le commentaire qu'il faut ajouter la propriété "box-sizing".

    le 19/08/2016 à 15h13

  • pascal-ds

    pascal-ds

    houla ! d'accord... je suggèrerais une modification de l'énoncé dans ce cas, puisqu'il est source d'erreur. Pourquoi ne pas dire "ajouter la propriété box-sizing au x autres sélecteurs " ? (et ne pas mettre de commentaire, libre choix à l'élève de mettre l'instruction où il faut)

    le 20/08/2016 à 10h53

  • mram

    mram Administrateur

    Oui, si c'est vraiment trop confus je mettrai à jour l'énoncé, à voir en fonction des commentaires futurs.

    le 23/08/2016 à 00h06

  • pascal-ds

    pascal-ds

    je ne comprends pas le message d'erreur. Les ajouts concernant le body ont été mis (margin: 0 et border-sizing: border box) à l'endroit indiqué. Mais le correcteur indique que ces instructions devraient y être 7 fois ??? De plus ligne 9 demande d'inscrire la propriété ici, mais il n'y a pas d'instruction à ce sujet... bref, bloqué.

    le 18/08/2016 à 09h10

  • dynaouest

    dynaouest

    Toujours le même souci ?! "vous devriez avoir <body> avec la règle CSS margin: 0;" 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; } header span { background-color: #2196F3; } nav { border: 3px solid #8BC34A; height: 500px; } nav span { background-color: #8BC34A; } section { border: 3px solid #E91E63; padding: 25px; } 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; }

    le 24/02/2016 à 11h34

  • raphael.choisi

    raphael.choisi

    Merci Mram

    le 15/12/2016 à 16h28

  • callum.chiverto

    callum.chiverto

    bonjour, il ne veut pas accepter mon code dans le Body bien qu'il soit pareil que le code manquant exprimé dans le message d'erreur: body { margin: 0; }

    le 24/02/2016 à 14h36

  • mram

    mram Administrateur

    Bonjour,

    Le script de correction a été mis à jour une nouvelle fois et sera mis en production prochainement. Vous pouvez considérer cet exercice comme réussi.

    Cordialement.

    le 12/03/2016 à 01h24

  • line.lagarde

    line.lagarde

    le problème subsiste

    le 05/06/2016 à 20h08

  • mram

    mram Administrateur

    J'ai modifié le script de correction, il sera mis à jour prochainement (de même pour les autres exercices qui affichent ce message).

    le 05/06/2016 à 20h35

  • ghislaine.honore

    ghislaine.honore

    Même problème

    le 21/03/2016 à 20h07

  • raphael.choisi

    raphael.choisi

    Bonjour, lemessage d'erreur persiste: "vérifiez que vous aveZ bien le sélecteur "body" et que les sélecteurs CSS de base n'ont pas été modifiés." ; alors que les ajouts concernant le body ont été mis (margin: 0 et border-sizing: border box) à l'endroit indiqué. Je passe à la suite!

    le 10/12/2016 à 19h05

  • mram

    mram Administrateur

    Oui mais la syntaxe n'est pas très propre. Il faut mettre "margin: 0" à la ligne (voir le reste du code déjà écrit pour prendre exemple). Et il faut un espace avant "border-box", c'est le cas du reste des propriétés CSS. Le code est correct, c'est juste la syntaxe qui n'est pas optimale.

    le 13/12/2016 à 10h58

  • florian.jacob

    florian.jacob

    Vérifiez les blocs de déclarations délimités par les { et }. Vous devriez en avoir 17.

    le 11/06/2018 à 16h41

  • mram

    mram Administrateur

    Bonjour, il faut que "body" soit un sélecteur CSS à part entière, et non pas le rajouter avec les autres à la ligne 1.

    le 19/06/2018 à 04h16

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Reset</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>
/*Ajoutez le sélecteur "body" ici ainsi que sa propriété "margin: 0"*/ header, nav, footer, section, article, aside { position: relative; border: 3px solid #cccccc; /*Ajoutez la propriété nécessaire ici*/ } span { padding : 1px; background-color: #cccccc; } header { border: 3px solid #2196F3; height: 80px; } header span { background-color: #2196F3; } nav { border: 3px solid #8BC34A; height: 500px; } nav span { background-color: #8BC34A; } section { border: 3px solid #E91E63; padding: 25px; } 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; }