Exercice 23/25

  • Dans le fichier stylesheet.css, ajoutez les propriétés left: 0 et right: 0 pour dire au div "header" qu'il sera fixé en prenant comme référence les bords gauche et droit de la page web, ainsi il sera forcé de prendre toute la largeur disponible;
  • Ajoutez également la propriété z-index: 1 afin que le "header" se trouve au-dessus des autres éléments HTML;
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 23/25

Le div "header" est maintenant fixé. Le problème est qu'un élément fixé ne prend plus toute la largeur disponible par défaut. Il va falloir préciser que l'on souhaite que le "header" prenne toute la largeur disponible.

Vous remarquez également que le div "header" se trouve visuellement en-dessous des autres éléments HTML. Cela arrive souvent quand on manipule des éléments hors du flux courant. Or il est préférable que le "header" soit visible par dessus tout autre élément HTML étant donné qu'il est fixé en haut de page. Vous allez utiliser la propriété z-index pour cela.

Cette propriété prend comme valeur un nombre entier. Plus il est élevé (par rapport aux autres z-index), plus votre élément HTML se trouvera au dessus des autres, comme un système de calques qui se superposent.

Commentaires les mieux notés

30 Commentaires

  • KOROSI

    KOROSI

    Que signifie ce message d'erreur? : Votre script a mis trop de temps à s'exécuter, auriez-vous une boucle infinie ?

    le 23/08/2021 à 14h27

  • meriam

    meriam Admin

    Bonjour, votre code est correct.

    le 30/08/2021 à 02h55

  • KOROSI

    KOROSI

    Votre script a mis trop de temps à s'exécuter, auriez-vous une boucle infinie ?

    le 23/08/2021 à 14h25

  • meriam

    meriam Admin

    Bonjour, votre code est correct.

    le 30/08/2021 à 02h55

  • KOROSI

    KOROSI

    Votre script a mis trop de temps à s'exécuter, auriez-vous une boucle infinie ?

    le 23/08/2021 à 14h25

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 30/08/2021 à 02h54

  • ibrahimadatt-1

    ibrahimadatt-1

    Bonjour, je ne comprends pas d'où vient mon erreur. Pouvez-vous m'aider s'il-vous-plaît?

    le 12/07/2021 à 16h47

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 14/07/2021 à 10h10

  • candice.dudit-88

    candice.dudit-88

    Bonjour je ne comprend pas mon erreur svp

    le 22/03/2021 à 13h24

  • meriam

    meriam Admin

    Bonjour, vous devez ajouter la propriété z-index:1

    le 23/03/2021 à 08h15

  • charlotte_au_fraise16-95

    charlotte_au_fraise16-95

    bonjour je ne comprends pas pourquoi je dois ajouter 6 propriétés

    le 04/02/2021 à 10h01

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 04/02/2021 à 12h52

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 04/02/2021 à 12h52

  • anthonyfabry38-56

    anthonyfabry38-56

    bonjour meriam, je ne peux plus reset et soumettre, cela m empeche d avancer

    le 04/09/2020 à 12h02

  • meriam

    meriam Admin

    Bonjour, le bouton fonctionne correctement, essayez une autre fois.

    le 04/09/2020 à 13h21

  • tritrineyret-85

    tritrineyret-85

    Je ne comprend pas ?

    le 10/08/2020 à 11h05

  • meriam

    meriam Admin

    Bonjour, si vous utilisez la propriété position, il faut utiliser les propriétés de décalage (left, top,right,bottom), dans notre exemple la propriété left:0 et right :0

    le 10/08/2020 à 12h34

  • tritrineyret-85

    tritrineyret-85

    #header { border: 3px solid #2196F3; height: 80px; position: fixed; display:block; z-index:1; }

    le 10/08/2020 à 06h52

  • meriam

    meriam Admin

    Bonjour, supprimez la propriété display :block et appliquez les propriétés de décalage demandées left et right.

    le 10/08/2020 à 06h56

  • karl.vameck-59

    karl.vameck-59

    Eratum : de mettre (0). Et c'est ce que j'ai fait...

    le 29/03/2019 à 14h09

  • mram

    mram Admin

    C'est z-index avec un "z" minuscule.

    le 07/06/2017 à 09h01

  • bantasiby1

    bantasiby1

    Bonjour, pourquoi ça ne marche pas ?

    le 31/05/2017 à 11h23

  • jovidal

    jovidal

    "on saute les deux derniers rappels et on arrive directement à "Créer un layout CSS"." C'est toujours le cas .. 4 mois plus tard ^^

    le 24/05/2017 à 05h58

  • mram

    mram Admin

    Vous devriez. Vous avez page blanche dans l'onglet "résultats" ??

    le 31/01/2017 à 12h59

  • mathieu.louaintier

    mathieu.louaintier

    bonjour pourquoi je n ai pas le tableau affichage résultats? Merci.

    le 30/01/2017 à 12h27

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Rappel 3 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; position: fixed; } #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; }