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

10 Commentaires

  • beaussartpaul-62

    beaussartpaul-62

    Bonjour, cela me dit que j'ai une boucle infinie

    le 06/04/2022 à 10h35

  • meriam

    meriam Admin

    il faut pas copier le commentaire à partir du fichier.

    le 06/04/2022 à 19h26

  • meriam

    meriam Admin

    il faut pas copier le commentaire à partir de l'énoncé.

    le 06/04/2022 à 19h27

  • KOROSI

    KOROSI

    Votre script a mis trop de temps à s'exécuter, auriez-vous une boucle infinie ?

    le 26/08/2021 à 19h45

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 30/08/2021 à 02h53

  • deboval.laurine-89

    deboval.laurine-89

    Bonsoir, le bouton "soumettre" ne fonctionne pas pour cet exercice

    le 17/03/2021 à 16h47

  • meriam

    meriam Admin

    Bonjour, le bouton fonctionne correctement, essayez une autre fois.

    le 18/03/2021 à 08h00

  • greg-17

    greg-17

    Le bouton soumettre ne répond plus !

    le 18/09/2020 à 07h17

  • meriam

    meriam Admin

    Bonjour, le bouton fonctionne correctement, essayez une autre fois.

    le 18/09/2020 à 08h46

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