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

  • 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

  • benon.thierry-92

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

2 Commentaires

  • 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 à 20h24

  • benon.thierry-92

    benon.thierry-92

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

    le 16/08/2018 à 13h00

  • mram

    mram Administrateur

    Quelle faute ?

    le 17/08/2018 à 06h45

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; }