Exercice 7/9

  • Dans le fichier stylesheet.css, ajoutez la propriété vertical-align: top aux balises nav et section;
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 7/9

Vous remarquez que les deux blocs positionnés en inline-block sont alignés vers le bas sur l'axe vertical. C'est le comportement par défaut mais ce n'est pas très esthétique.

Il est préférable que les blocs soient alignés vers le haut et pour cela il faut utiliser la propriété vertical-align.
De manière générale, dès que vous positionnez des éléments avec inline-block il faudra aussi préciser comment ils s'alignent entre eux avec vertical-align.

Commentaires les mieux notés

  • carole.cailleux

    Il y a une faute : il faut écrire "dès que vous positionnez des éléments".

  • mram Administrateur

    C'est corrigé, merci.

2 Commentaires

  • carole.cailleux

    carole.cailleux

    Il y a une faute : il faut écrire "dès que vous positionnez des éléments".

    le 13/03/2017 à 10h41

  • mram

    mram Administrateur

    C'est corrigé, merci.

    le 17/03/2017 à 19h14

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Vertical-align</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; display: inline-block; width: 20%; /*Ajoutez la propriété nécessaire ici*/ } nav span { background-color: #8BC34A; } section { border: 3px solid #E91E63; padding: 25px; display: inline-block; width: 80%; /*Ajoutez la propriété nécessaire 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; }