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

  • ybdx08

    Bonjour, je ne vois vraiment où est mon erreur. voici mon code:header { border: 3px solid #2196F3; height: 80px; position: fixed; } merci d'avance.

  • lauraquat

    Bonjour, je ne comprends pas mon erreur.

  • mram Administrateur

    Merci d'indiquer le message que vous avez.

  • mram Administrateur

    Ligne 19, il manque le ";" à la fin.

27 Commentaires

  • ybdx08

    ybdx08

    Bonjour, je ne vois vraiment où est mon erreur. voici mon code:header { border: 3px solid #2196F3; height: 80px; position: fixed; } merci d'avance.

    le 14/09/2017 à 10h47

  • mram

    mram Administrateur

    Bonjour, vous avez oublié des propriétés CSS. Avec "position" il faut aussi dire comment le bloc va se positionner avec les ropriétés "top", "bottom", "left", "right" (pas besoin de les mettre toutes). Il faut aussi penser au z-index.

    le 14/09/2017 à 13h58

  • lauraquat

    lauraquat

    Bonjour, je ne comprends pas mon erreur.

    le 08/12/2018 à 12h20

  • meriam

    meriam Administrateur

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

    le 10/12/2018 à 09h44

  • mram

    mram Administrateur

    Merci d'indiquer le message que vous avez.

    le 05/06/2016 à 20h26

  • mram

    mram Administrateur

    Ligne 19, il manque le ";" à la fin.

    le 11/04/2017 à 16h12

  • markitobcn

    markitobcn

    je voudrais savoir si mon code est correct? même s'il me dit que c'est ok, je crois que j'en mis trop à partir e la ligne 16… merci

    le 26/10/2016 à 18h31

  • line.lagarde

    line.lagarde

    je ne comprends pas mon erreur.

    le 05/06/2016 à 20h12

  • bernardraphael13

    bernardraphael13

    "s'affiche ne manière" ------> s'affiche de manière

    le 13/06/2017 à 16h32

  • mram

    mram Administrateur

    Merci c'est corrigé.

    le 21/06/2017 à 13h51

  • 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

  • mram

    mram Administrateur

    Oui en effet, left et right suffisent pour étendre le bloc sur toute la largeur, mais comme il a déjà une hauteur "height", les propriétés "top" et "bottom" sont inutiles.

    le 27/10/2016 à 09h18

  • jerome

    jerome

    voici le message Vérifiez que vous avez ajouté les propriétés "position", "left", "right", "z-index" pour le "header" et que les propriétés de base n'ont pas été modifiées.,Vous devriez avoir <header> avec la règle CSS "left: 0".,Vous devriez avoir <header> avec la règle CSS "right: 0".,Vous devriez avoir <header> avec la règle CSS "z-index: 1".

    le 05/08/2018 à 15h02

  • mram

    mram Administrateur

    Vous n'aviez mis que "position: fixed;" et pas les autres propriétés ...

    le 13/08/2018 à 03h27

  • lolululo-22

    lolululo-22

    Bonjour, J'ai rajouté le code "position", "left", "right" et "z-index" dans "header". Lorsque je clique sur "Soumettre", il y a sa qui apparait "Vérifiez que vous avez ajouté les propriétés "position", "left", "right", "z-index" pour le "header" et que les propriétés de base n'ont pas été modifiées.,Vous devriez avoir <header> avec la règle CSS "position: fixed".". Je ne comprends pas ou est mon erreur.

    le 29/05/2018 à 10h02

  • mram

    mram Administrateur

    Bonjour, la propriété "top" est au mauvais endroit.

    le 02/06/2018 à 04h30

  • 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 Administrateur

    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

  • leger02

    leger02

    Bonjour mram, je ne comprend pourquoi cela bloque... J'ai peut etre supprimé des balises sans faire attention, help !

    le 06/09/2017 à 13h39

  • leger02

    leger02

    j'avais oublié un " ; " ..... -____- sorry !

    le 06/09/2017 à 13h41

  • mram

    mram Administrateur

    Bonjour, oui il mnaquait bien le ";" après "height: 80px" . Il est obligatoire il ne faut pas l'oublier.

    le 12/09/2017 à 15h23

  • belespoir38

    belespoir38

    header { border: 3px solid #2196F3; height: 80px; position: fixed; left: 0; right: 0; z-index: 1; On demande de fixer HEADER, je ne comprends pas pourquoi ajouter les autres commandes, mettre en premier... Pourriez-vous me l'expliquer, s'il vous plait ?

    le 08/01/2018 à 21h16

  • mram

    mram Administrateur

    Bonjour, de quoi parlez-vous ? Quelles autres commandes ?

    le 12/01/2018 à 01h50

  • jerome

    jerome

    bonjour quelle est mon erreur header { border: 3px solid #2196F3; height: 80px; position: fixed; }

    le 01/08/2018 à 21h49

  • mram

    mram Administrateur

    Bonjour, que vous dit le message ?

    le 05/08/2018 à 00h20

  • 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 Administrateur

    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

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