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

  • emre-gur

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

  • mram Administrateur

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

  • marion.fredet-12

    besoin d'aide on me demande d'ajouter 4 proprietés css à nav

  • papagamecodeur-49

    bonjour vous pouvez m'aider il me demande de mettre 4 proprietres css a nav

4 Commentaires

  • 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 02/11/2016 à 00h11

  • mram

    mram Administrateur

    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 à 21h11

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