Exercice 5/9

  • Dans le fichier stylesheet.css, ajoutez les propriétés nécessaires (vues dans les exercices de rappel) pour que le bloc nav soit en inline-block et avec une largeur de 20%;
  • Dans le fichier stylesheet.css, ajoutez les propriétés nécessaires (vues dans les exercices de rappel) pour que le bloc section soit en inline-block et avec une largeur de 80%;
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 5/9

Dans cet exercice, vous allez faire en sorte que les blocs nav et section soient côte à côte. Pour cela vous allez utiliser la méthode inline-block.

Commentaires les mieux notés

21 Commentaires

  • mihiarii-85

    mihiarii-85

    On me dit que j'ai réussi l'exercice mais je ne vois aucun changement au niveau du rendu. Du coup je fais le chapitre sans vraiment me rendre compte du résultat final :/

    le 10/02/2023 à 13h44

  • perrine.sprimont-84

    perrine.sprimont-84

    Bonjour, Je suis bloquée par cette phrase : Il vous manque la règle css pour les balises span dans le header. Je ne comprends pas ce que cela vient faire dedans :'(

    le 06/11/2022 à 15h33

  • Patricio M

    Patricio M Admin

    Perrine, tu as oublié } dans la SECTION...

    le 07/11/2022 à 08h16

  • essimi.jeffrey

    essimi.jeffrey

    J'ai une erreur : "Il vous manque la règle css pour les balises span dans le header" , es que je dois modifier quelque chose dans le : " header span{} " ?

    le 01/05/2021 à 14h43

  • meriam

    meriam Admin

    Bonjour, vous avez supprimé l'accolade fermante du sélecteur nav.

    le 03/05/2021 à 13h05

  • anthonyveillet21-65

    anthonyveillet21-65

    bonjours le bouton "soumettre" ne marche pas

    le 26/03/2021 à 22h01

  • meriam

    meriam Admin

    Bonjour, le bouton fonctionne correctement.

    le 28/03/2021 à 20h16

  • jeangrey1992

    jeangrey1992

    cest bon jai trouvé

    le 02/12/2020 à 16h12

  • jeangrey1992

    jeangrey1992

    Bonjour. J"ai ce message d'erreur "Vous ne devez modifier que 1 propriété css de les balises span dans la nav" et jai modifier "display:inline-block; width:80%;) dans section et nav

    le 02/12/2020 à 16h12

  • Abby

    Abby

    Indice: Avant "inline-block" il faut ajouter "display", et la largeur s'ajoute après, sur une autre ligne :)

    le 01/09/2020 à 07h24

  • AMINE.BENDJELLAL-39

    AMINE.BENDJELLAL-39

    nav { display: inline-block; width: 20% } section{ display: inline-blockwidth: 80%};

    le 20/04/2020 à 10h36

  • AMINE.BENDJELLAL-39

    AMINE.BENDJELLAL-39

    dans nav :

    le 20/04/2020 à 10h34

  • mram

    mram Admin

    Oui c'est normal, c'est l'exercice suivant qui va y remédier, il y a une astuce à faire dans le HTML.

    le 02/11/2016 à 19h11

  • emre-gur

    emre-gur

    il ne sont pas cote a cote mais l'exercice est bon.. c bizarre je sais pas si c bon ou pas

    le 01/11/2016 à 22h11

Pour publier un commentaire, vous devez vous connecter.
index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Inline-block</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; /*Ajoutez les propriétés nécessaires ici*/ } nav span { background-color: #8BC34A; } section { border: 3px solid #E91E63; padding: 25px; /*Ajoutez les propriétés nécessaires ici*/ } 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; }
http://localhost:8080