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

  • pizzutoandrea3

    help

  • pizzutoandrea3

    ca bloque

  • emacsfreeman

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

  • atif.souidi

    l'exercice est deja fait.

11 Commentaires

  • pizzutoandrea3

    pizzutoandrea3

    help

    le 05/06/2017 à 02h06

  • pizzutoandrea3

    pizzutoandrea3

    ca bloque

    le 06/06/2017 à 00h51

  • emacsfreeman

    emacsfreeman

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

    le 20/09/2016 à 10h00

  • atif.souidi

    atif.souidi

    l'exercice est deja fait.

    le 20/09/2016 à 15h59

  • mram

    mram Administrateur

    Il y a une erreur lignes 3 et 7.

    le 08/06/2017 à 11h28

  • radia.mercha

    radia.mercha

    Ca ne veut pas passer à l'exercice suivant!

    le 30/05/2017 à 22h33

  • radia.mercha

    radia.mercha

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

    le 30/05/2017 à 22h35

  • laetitia.v77

    laetitia.v77

    ca bloque aussi chez moi..

    le 03/03/2018 à 15h38

  • laetitia.v77

    laetitia.v77

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

    le 03/03/2018 à 15h43

  • p.llorca.pl

    p.llorca.pl

    impossible de soumettre ma réponse ça bug

    le 16/06/2017 à 11h59

  • mram

    mram Administrateur

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

    le 21/06/2017 à 16h21

  • 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 à 14h29

  • mram

    mram Administrateur

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

    le 21/06/2017 à 16h27

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