Exercice 4/9

  • Dans le fichier stylesheet.css, ajoutez les propriétés nécessaires (vues dans les exercices de rappel) afin de fixer le header;
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 4/9

Maintenant que vous avez une copie de travail propre, vous allez pouvoir commencer à mettre en forme votre layout de site web.

Dans cet exercice, vous allez devoir faire en sorte que le header s'affiche de manière fixe en haut de la page.

Vous allez avoir besoin des propriétés css suivantes : position, left, right et z-index

Commentaires les mieux notés

  • gaetan.moisan9444-62

    gaetan.moisan9444-62

    ceci est le bon code

    le 06/02/2020 à 12h00

  • drif.zakaria-84

    drif.zakaria-84

    il ne suffit pas de mettre la propriété:fixed

    le 09/02/2020 à 21h28

  • drif.zakaria-84

    drif.zakaria-84

    header { border: 3px solid #2196F3; height: 80px; position:fixed; left:0; right:0; z-index:1;

    le 09/02/2020 à 21h29

  • chardrele_ndoulou-55

    chardrele_ndoulou-55

    c'est trouvé mon erreur

    le 08/11/2018 à 19h50

  • oliver-thomas

    oliver-thomas

    je ne comprend pas... j'ai l'impression que mon code est correct pourtant ! Mais impossible de le validé !

    le 10/04/2017 à 16h59

20 Commentaires

  • drif.zakaria-84

    drif.zakaria-84

    header { border: 3px solid #2196F3; height: 80px; position:fixed; left:0; right:0; z-index:1;

    le 09/02/2020 à 21h29

  • drif.zakaria-84

    drif.zakaria-84

    il ne suffit pas de mettre la propriété:fixed

    le 09/02/2020 à 21h28

  • gaetan.moisan9444-62

    gaetan.moisan9444-62

    ceci est le bon code

    le 06/02/2020 à 12h00

  • theosylvoz-5

    theosylvoz-5

    Ok, les balises left et right definissent les pixels a soustraire de la marge de droite ou de gauche, etait-ce inutile de mettre la fonction width: 100% ? Ou se sont les regles de validation de l'exercice qui rendait mon code faux

    le 31/05/2019 à 17h36

  • meriam

    meriam Admin

    pour fixer le header avec la position fixed, vous devez utiliser les propriétés left et right pour définir la marge droite et gauche.

    le 05/06/2019 à 04h34

  • lauraquat

    lauraquat

    le message est Vous devez modifier la propriété css left de la balise header par la bonne valeur (0)

    le 08/12/2018 à 12h21

  • meriam

    meriam Admin

    Bonjour, la valeur de la propriété left et right doit être 0, vous avez mis left:10px pour la propriété right:10px .

    le 10/12/2018 à 09h55

  • lauraquat

    lauraquat

    Bonjour, je ne comprends pas mon erreur.

    le 08/12/2018 à 12h20

  • meriam

    meriam Admin

    modifiez les propriétés css left, et right de la balise header par la bonne valeur 0

    le 10/12/2018 à 09h44

  • chardrele_ndoulou-55

    chardrele_ndoulou-55

    c'est trouvé mon erreur

    le 08/11/2018 à 19h50

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Fixer le header</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; /*Ajoutez les propriétés nécessaires ici*/ } header span { background-color: #2196F3; } nav { border: 3px solid #8BC34A; height: 500px; } nav span { background-color: #8BC34A; } section { border: 3px solid #E91E63; padding: 25px; } 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; }