Exercice 2/9

  • Dans le fichier stylesheet.css (lignes 3 et 7), supprimez seulement le mot clé !important. Ainsi, les propriétés correspondantes seront écrasées par les nouvelles valeurs définies plus bas dans le code;
  • La balise section contient un article et un aside mais la structure parent/enfant ne se voit pas bien. Dans le fichier stylesheet.css ajoutez la propriété padding: 25px au selecteur section pour y voir plus clair;
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 2/9

La structure HTML de base est déjà en place, il n'y a pas besoin d'y toucher. Le code CSS de base est aussi en place.

Pour l'instant cela ne ressemble pas à un layout. Tous les blocs sont par défaut en gris, il est donc difficile de les distinguer.
Dans cet exercice vous allez mettre un peu de couleur pour y voir plus clair.

En fait, toutes les couleurs sont déjà définies dans le code CSS mais elles ne sont pas interprétées car elles sont écrasées par les valeurs indiquées lignes 3 et 7.

Note :
Dans un code CSS, les propriétés sont interprétées dans l'ordre dans lequel elles sont déclarées. Si une même propriété est définie plusieurs fois pour un même élément HTML, c'est la dernière valeur déclarée qui sera retenue. Ceci est vrai sauf si la première propriété contient le mot clé !important.

C'est le cas dans cet exercice : on déclare d'abord une couleur pour toutes les balises (lignes 3 et 7), puis on redéfini par la suite une nouvelle couleur pour chacune de ces balises.

Commentaires les mieux notés

21 Commentaires

  • pofatu-54

    pofatu-54

    Je n'arrive plus à avancé, le layout n'affiche plus comme au début et le bouton soumettre ne fonctionne pas non plus ? Need help

    le 25/02/2023 à 00h00

  • Patricio M

    Patricio M Admin

    Le souci a été réglé!

    le 27/02/2023 à 11h12

  • gu3riore-29

    gu3riore-29

    Bonjour, l'exercice est buggé, impossible de cliquer sur soumettre pour ma part

    le 24/11/2020 à 12h21

  • meriam

    meriam Admin

    Bonjour, le bouton "soumettre" fonctionne correctement. Est ce que vous avez un message d'erreur??

    le 24/11/2020 à 13h38

  • myriammange-77

    myriammange-77

    a quoi sert &lt et &gt dans le HTML,

    le 18/10/2020 à 04h10

  • meriam

    meriam Admin

    Bonjour, &lt pour le chevron ouvrant et &gt pour le chevron fermant >

    le 19/10/2020 à 09h56

  • laetitia.v77

    laetitia.v77

    ah c'est bon j'avais enlevé un ;

    le 03/03/2018 à 13h43

  • laetitia.v77

    laetitia.v77

    ca bloque aussi chez moi..

    le 03/03/2018 à 13h38

  • p.llorca.pl

    p.llorca.pl

    je ne peux plus avancer "soumettre" ne fonctionne pas merci de rectifier ce problême

    le 16/06/2017 à 10h29

  • mram

    mram Admin

    Bonjour, ça devrait fonctionner désormais. Merci de l'indiquer si ce n'est toujours pas le cas.

    le 21/06/2017 à 12h27

  • p.llorca.pl

    p.llorca.pl

    impossible de soumettre ma réponse ça bug

    le 16/06/2017 à 07h59

  • mram

    mram Admin

    Quelle erreur avez-vous ? Votre code est correct à priori.

    le 21/06/2017 à 12h21

  • mram

    mram Admin

    Il y a une erreur lignes 3 et 7.

    le 08/06/2017 à 07h28

  • pizzutoandrea3

    pizzutoandrea3

    ca bloque

    le 05/06/2017 à 20h51

  • pizzutoandrea3

    pizzutoandrea3

    help

    le 04/06/2017 à 22h06

  • Ok, résolu. Un espace en trop j'avais mis.

    le 30/05/2017 à 18h35

  • Ca ne veut pas passer à l'exercice suivant!

    le 30/05/2017 à 18h33

  • atif.souidi

    atif.souidi

    l'exercice est deja fait.

    le 20/09/2016 à 11h59

  • emacsfreeman

    emacsfreeman

    J'ai suivi les instructions et pourtant il m'affiche un message d'erreur

    le 20/09/2016 à 06h00

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>La structure de base</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>
header, nav, footer, section, article, aside { position: relative; border: 3px solid #cccccc !important; } span { padding : 1px; background-color: #cccccc !important; } 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; } 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; }