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

15 Commentaires

  • xavier.servas-77

    xavier.servas-77

    Est-ce que ce serait possible de désactiver l'item du chat "Salut! Prêt pour aujourd'hui?" qui s'affiche à chaque nouvelle page, cache le texte, de l'exercice/leçon/commentaires et devient rapidement très énervant? Au moins l'afficher à la première connection de la journée et l'enlever ensuite....

    le 28/10/2021 à 10h04

  • meriam

    meriam Admin

    Bonjour, votre remarque va être prise en considération.

    le 28/10/2021 à 11h18

  • meriam

    meriam Admin

    N'hésitez pas à demander de l'aide si vous trouvez des problèmes dans les exercices suivants.Bon travail.

    le 28/10/2021 à 11h18

  • ferreira-celine2-75

    ferreira-celine2-75

    Bonjour, doit on vraiment ajouter vertical-align: top; au sélecteur section vu qu'en le mettant uniquement sur le sélecteur nav le résultat voulu est obtenu?

    le 29/09/2021 à 13h21

  • meriam

    meriam Admin

    Bonjour, la propriété vertical-align permet d'aligner les bloc verticalement.

    le 29/09/2021 à 14h52

  • iulianaviolettacarare-40

    iulianaviolettacarare-40

    desolée,pouvez-vous m'aider svp!

    le 28/04/2021 à 09h54

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 28/04/2021 à 11h41

  • iulianaviolettacarare-40

    iulianaviolettacarare-40

    je n'arrive pas avec l'exercice

    le 21/04/2021 à 08h02

  • meriam

    meriam Admin

    Bonjour, pour le 2ème sélecteur supprimez ce code =vertical-align.

    le 21/04/2021 à 16h50

  • jeangrey1992

    jeangrey1992

    cest bon ca avait beugué merci

    le 02/12/2020 à 16h16

  • jeangrey1992

    jeangrey1992

    "Il vous manque la règle css pour les balises span dans le header" je ne comprend pas bien l'exercice

    le 02/12/2020 à 16h14

  • meriam

    meriam Admin

    il faut ajouter l'accolade fermante du sélecteur nav

    le 02/12/2020 à 22h58

  • mram

    mram Admin

    C'est corrigé, merci.

    le 17/03/2017 à 17h14

  • carole.cailleux

    carole.cailleux

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

    le 13/03/2017 à 08h41

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>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; }
http://localhost:8080