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

96 Commentaires

  • chafiahamdaoui1996-73

    chafiahamdaoui1996-73

    Bonjour, je. n'arrive pas à valider cette exercice, je ne vois pas ou est l'erreur. Il me dit "Vous ne devez modifier que 6 propriété css de la balise header"

    le 06/03/2023 à 10h29

  • Patricio M

    Patricio M Admin

    Ton dernier code est bon!!

    le 07/03/2023 à 08h23

  • hadjerbenhadid86-74

    hadjerbenhadid86-74

    BOnjour, qsq'il memanque svp

    le 01/03/2023 à 04h30

  • Patricio M

    Patricio M Admin

    Tu as une proprieté en trop dans le header, nav, footer, section, etc, etc

    le 01/03/2023 à 08h57

  • nasschabane-55

    nasschabane-55

    Je viens de trouver mon erreur. Merci

    le 22/11/2022 à 15h12

  • Patricio M

    Patricio M Admin

    Cool, super! Trouver son propre erreur augmente le moral :)

    le 23/11/2022 à 08h06

  • veroniquedouce-83

    veroniquedouce-83

    Bonjour, je n'ai pas très bien compris l'exercice et j'ai une erreur. Pouvais-vous m'aider ? Merci

    le 22/08/2022 à 16h14

  • Patricio M

    Patricio M Admin

    Ve'ronique, header, nav, footer, section, article, aside en position relative

    le 23/08/2022 à 11h56

  • wilsonjeanclaude15-97

    wilsonjeanclaude15-97

    header, nav, footer, section, article, aside { position: fixed; left: 0; right: 0; z-index: 0; border: 3px solid #cccccc; box-sizing: border-box; }

    le 15/07/2022 à 09h00

  • meriam

    meriam Admin

    La valeur de z-index doit être 1

    le 15/07/2022 à 10h08

  • wilsonjeanclaude15-97

    wilsonjeanclaude15-97

    Bonjour mon code est-il correct ?

    le 15/07/2022 à 09h00

  • meriam

    meriam Admin

    Bonjour, il vous manque la propriété z-index qui permet de définir le « z-order » d'un élément

    le 15/07/2022 à 10h07

  • meriam

    meriam Admin

    Lorsque des éléments se chevauchent, le z-order détermine l'ordre des différentes couches que formeront les éléments. Généralement, un élément couvrira un autre élément si sa valeur de z-index est supérieure à celle du deuxième élément.

    le 15/07/2022 à 10h07

  • maelie.tshibola-85

    maelie.tshibola-85

    Bonjour, le message d'erreur suivant s'affiche et je ne comprends pas ce qu'il faut faire "Il vous manque la règle css pour les balises span dans le header"

    le 01/04/2022 à 14h49

  • meriam

    meriam Admin

    vous devez supprimer la propriété z-index du sélecteur header span {}

    le 05/04/2022 à 20h16

  • iulianaviolettacarare-40

    iulianaviolettacarare-40

    pas vraiment compris l'exercice!

    le 21/04/2021 à 07h48

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 21/04/2021 à 16h48

  • foxmehdi-74

    foxmehdi-74

    Ça remarche, merci ne pas tenir compte de mon message précédent.

    le 27/03/2021 à 08h13

  • foxmehdi-74

    foxmehdi-74

    Bonjour, je clic sur "soumettre" pour valider mon exercice mais il ne se passe rien. Y'a t'il un bug ?

    le 26/03/2021 à 22h18

  • meriam

    meriam Admin

    Bonjour, le bouton fonctionne correctement.

    le 28/03/2021 à 20h24

  • lswebconf-37

    lswebconf-37

    Je pensais que header serait au dessus sans devoir utiliser z-index. Pourquoi est-il dessous sans z-index?

    le 25/03/2021 à 17h11

  • meriam

    meriam Admin

    La propriété z-index définit le « z-order » d'un élément positionné .Lorsque des éléments se chevauchent, le z-order détermine l'ordre des différentes couches que formeront les éléments.

    le 25/03/2021 à 17h25

  • fred.glemeau94-21

    fred.glemeau94-21

    bonsoir , y'a t-il un souci avec le code ?

    le 02/03/2021 à 01h33

  • meriam

    meriam Admin

    Bonjour, votre code est correct.

    le 02/03/2021 à 12h24

  • rosirisf77-81

    rosirisf77-81

    bonjour, que est ce qui ne vas pas dans mon code? j'ai toujours ca, Il vous manque la règle css pour les balises span dans le header

    le 20/12/2020 à 18h29

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 23/12/2020 à 10h14

  • cyril_hoareau-99

    cyril_hoareau-99

    Bonjour, j'ai réussi l'exercice, mais sans trop le comprendre en fait. La position: fixed permet d'ancré l'en-tête sur la page HTML, mais par contre je n'est pas compris pour le left, le right et le z-index leur utilité, ni comment on est censé trouver leur valeur (0 / 0 / 1 en l'occurence) Merci

    le 14/12/2020 à 06h20

  • meriam

    meriam Admin

    Bonjour, la valeur fixed permet de fixer un élément sur un document html (l'élément ne bouge pas même si défile la page, mais pour fixer un élément, vous devez utiliser les propriétés de décalage left, right, bottom, top )

    le 14/12/2020 à 14h25

  • meriam

    meriam Admin

    L'élément doit occuper toute la largeur disponible pour ce la vous devez mettre left:0 er right:0

    le 14/12/2020 à 14h27

  • rosirisf77-81

    rosirisf77-81

    ca donne toujours ca, Il vous manque la règle css pour les balises span dans le header

    le 07/12/2020 à 17h43

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 09/12/2020 à 10h33

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