Exercice 23/25
- Dans le fichier
stylesheet.css, ajoutez les propriétésleft: 0etright: 0pour dire audiv"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: 1afin 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.
30 Commentaires
-
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 Admin
Bonjour, votre code est correct.
le 30/08/2021 à 02h55
-
KOROSI
Votre script a mis trop de temps à s'exécuter, auriez-vous une boucle infinie ?le 23/08/2021 à 14h25
-
meriam Admin
Bonjour, votre code est correct.
le 30/08/2021 à 02h55
-
KOROSI
Votre script a mis trop de temps à s'exécuter, auriez-vous une boucle infinie ?le 23/08/2021 à 14h25
-
meriam Admin
Bonjour, votre dernier code est correct.
le 30/08/2021 à 02h54
-
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 Admin
Bonjour, votre dernier code est correct.
le 14/07/2021 à 10h10
-
candice.dudit-88
Bonjour je ne comprend pas mon erreur svple 22/03/2021 à 13h24
-
meriam Admin
Bonjour, vous devez ajouter la propriété z-index:1
le 23/03/2021 à 08h15
-
charlotte_au_fraise16-95
bonjour je ne comprends pas pourquoi je dois ajouter 6 propriétésle 04/02/2021 à 10h01
-
meriam Admin
Bonjour, votre dernier code est correct.
le 04/02/2021 à 12h52
-
meriam Admin
Bonjour, votre dernier code est correct.
le 04/02/2021 à 12h52
-
anthonyfabry38-56
bonjour meriam, je ne peux plus reset et soumettre, cela m empeche d avancerle 04/09/2020 à 12h02
-
meriam Admin
Bonjour, le bouton fonctionne correctement, essayez une autre fois.
le 04/09/2020 à 13h21
-
tritrineyret-85
Je ne comprend pas ?le 10/08/2020 à 11h05
-
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
#header { border: 3px solid #2196F3; height: 80px; position: fixed; display:block; z-index:1; }le 10/08/2020 à 06h52
-
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
Eratum : de mettre (0). Et c'est ce que j'ai fait...le 29/03/2019 à 14h09
-
mram Admin
C'est z-index avec un "z" minuscule.
le 07/06/2017 à 09h01
-
bantasiby1
Bonjour, pourquoi ça ne marche pas ?le 31/05/2017 à 11h23
-
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 Admin
Vous devriez. Vous avez page blanche dans l'onglet "résultats" ??
le 31/01/2017 à 12h59
-
mathieu.louaintier
bonjour pourquoi je n ai pas le tableau affichage résultats? Merci.le 30/01/2017 à 12h27
Commentaires les mieux notés