Exercice 21/25

  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 21/25

Les exercices qui suivent vont vous permettre de réviser les notions essentielles sur le positionnement en CSS.

Sur la base de la structure HTML et du CSS qui vous sont données, l'objectif sera de repositionner les blocs afin de créer une mise en page de base avec un en-tête, un menu, le corps de page et le pied de page

Ce sera aussi l'occasion de voir quelques astuces supplémentaires utiles à la création d'un layout en CSS.

Commentaires les mieux notés

5 Commentaires

  • ayoubbrahim68-35

    ayoubbrahim68-35

    c'est vrai qu'il ya une faute mais c'est quand mm accepeter par le correcteur automatique

    le 10/11/2020 à 18h05

  • meriam

    meriam Admin

    Bonjour, de quelle faute vous parlez?

    le 11/11/2020 à 07h40

  • benon.thierry-92

    benon.thierry-92

    ça fait un an quand même @_@ il faut la corriger cette faute

    le 16/08/2018 à 09h00

  • mram

    mram Admin

    Quelle faute ?

    le 17/08/2018 à 02h45

  • adrien.pusel

    adrien.pusel

    hey il y a une faute de frappe : Sur la base de la structure HTML et du CSS qui >> vont sont << donnés, l'objectif sera de

    le 09/02/2017 à 18h24

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>Rappel 1 sur 5</title> </head> <body> <div id="header"> <span class="corner1">&lt;div id="header"&gt;</span> <span class="corner2">&lt;/div&gt;</span> </div> <div id="menu"> <span class="corner1">&lt;div id="menu"&gt;</span> <span class="corner2">&lt;/div&gt;</span> </div> <div id="body"> <span class="corner1">&lt;div id="body"&gt;</span> <span class="corner2">&lt;/div&gt;</span> </div> <div id="footer"> <span class="corner1">&lt;div id="footer"&gt;</span> <span class="corner2">&lt;/div&gt;</span> </div> </body> </html>
#header, #menu, #body, #footer { position: relative; } span { padding : 1px; } #header { border: 3px solid #2196F3; height: 80px; /* Ajoutez la propriété nécessaire ici */ } #header span { background-color: #2196F3; } #menu { border: 3px solid #8BC34A; height: 500px; } #menu span { background-color: #8BC34A } #body { border: 3px solid #E91E63; height: 500px; } #body span { background-color: #E91E63; color: #ffffff; } #footer { border: 3px solid #673AB7; height: 50px; } #footer span { background-color: #673AB7; color: #ffffff; } .corner1 { position: absolute; top: 0; left: 0; } .corner2 { position: absolute; bottom: 0; right: 0; }
http://localhost:8080