Exercice 8/9

  • Dans le fichier stylesheet.css, ajoutez au sélecteur article les propriétés float: left et width: 50%;
  • Dans le fichier stylesheet.css, ajoutez au sélecteur aside les propriétés float: right et width: 50%;
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 8/9

Bien, le layout commence à prendre forme mais il reste à aligner les blocs article et aside pour qu'ils soient côte à côte.
Dans ce cas précis, vous allez utiliser la méthode float.

Commentaires les mieux notés

    0 Commentaires

      index.html
      stylesheet.css
      <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Float</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%; vertical-align: top; } nav span { background-color: #8BC34A; } section { border: 3px solid #E91E63; padding: 25px; display: inline-block; width: 80%; vertical-align: top; } 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; /*Ajoutez les propriétés nécessaires ici*/ } article span { background-color: #009688; } aside { border: 3px solid #FFC107; height: 500px; /*Ajoutez les propriétés nécessaires ici*/ } aside span { background-color: #FFC107; } .corner1 { position: absolute; top: 0; left: 0; } .corner2 { position: absolute; bottom: 0; right: 0; }