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

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

  • mram Administrateur

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

  • mathieu.louaintier

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

  • bantasiby1

    Bonjour, pourquoi ça ne marche pas ?

10 Commentaires

  • 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 à 09h58

  • mram

    mram Administrateur

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

    le 07/06/2017 à 13h01

  • mathieu.louaintier

    mathieu.louaintier

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

    le 30/01/2017 à 14h27

  • bantasiby1

    bantasiby1

    Bonjour, pourquoi ça ne marche pas ?

    le 31/05/2017 à 15h23

  • mram

    mram Administrateur

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

    le 31/01/2017 à 14h59

  • simon.fred

    simon.fred

    Bonjour, je souhaiterais seulement signaler qu'on ne pas accéder à l'exercice suivant en cliquant sur le bouton "soumettre ma réponse". je ne sais pas si c'est normal, je le signal dans le cas contraire :) merci

    le 11/06/2016 à 14h11

  • mram

    mram Administrateur

    Bonjour, merci pour le retour c'est noté !

    le 12/06/2016 à 14h39

  • doriane14

    doriane14

    Bonjour en validant cet exercice on saute les deux derniers rappels et on arrive directement à "Créer un layout CSS".

    le 10/01/2017 à 21h46

  • mram

    mram Administrateur

    Merci pour l'information, je fais remonter l'information.

    le 11/01/2017 à 19h20

  • karl.vameck-59

    karl.vameck-59

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

    le 29/03/2019 à 16h09

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