Positionnement fixe [CSS19]

Plusieurs petits exercices consistant à tester les principes du positionnement fixe en CSS en reproduisant des modèles.

Pour rappel, le positionnement fixe consiste à positionner un élément HTML par rapport à la fenêtre du navigateur. Ce positionnement s’effectue avec les propriétés display, top, bottom, left et right.

Deux points à retenir lorsqu’un élément est positionné en fixe :

L’élément sort du flux HTML, l’espace qu’il occupait dans le flux est donc libéré.
Les éléments de type bloc n’ont plus une largeur de 100% par défaut.

Préparation de l’exercice

Créez un dossier racine à l’emplacement de votre choix.

Créez un fichier html intitulé position-css19.html avec la structure de base.

Voici la structure de base d’une page HTML.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
    </head>
    <body>

    </body>
</html>

<!doctype html><html lang="fr">    <head>        <meta charset="utf-8">        <title>Titre de la page</title>    </head>    <body>    </body></html>

Créez un fichier css intitulé style.css et liez-le à la page position-css19.html.

Le code ci-dessous doit être placé dans l’en-tête <head> de la page HTML. Il est nécessaire de personnaliser la valeur de l’attribut href afin qu’elle corresponde à l’emplacement et au nom du fichier CSS à lier.

<link  rel="stylesheet" type="text/css" href="style.css">

<link  rel="stylesheet" type="text/css" href="style.css">

Exercice 1 : en-tête (pas à pas)

HTML : Ajoutez suffisamment de contenu dans la page pour quelle puisse défiler. Pour cela, utiliser du lorem ipsum : Lorem Ipsum

HTML : En haut de la page, ajouter un élément de type bloc contenant le titre « Position fixe ». Ce bloc servira de bloc d’en-tête.

<div>Position fixe</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum lacus ac sem dictum luctus. Praesent rutrum malesuada scelerisque. Donec consectetur condimentum semper. Quisque sed massa sit amet nisi sagittis maximus. Vestibulum facilisis et risus ut euismod. Vivamus consectetur ornare orci ut vehicula. Mauris quis suscipit ligula.</p>

<div>Position fixe</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum lacus ac sem dictum luctus. Praesent rutrum malesuada scelerisque. Donec consectetur condimentum semper. Quisque sed massa sit amet nisi sagittis maximus. Vestibulum facilisis et risus ut euismod. Vivamus consectetur ornare orci ut vehicula. Mauris quis suscipit ligula.</p>

HTML : Ajoutez une classe CSS au bloc d’en-tête afin de pouvoir le positionner en CSS par la suite.

<div class="header">Position fixe</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum lacus ac sem dictum luctus. Praesent rutrum malesuada scelerisque. Donec consectetur condimentum semper. Quisque sed massa sit amet nisi sagittis maximus. Vestibulum facilisis et risus ut euismod. Vivamus consectetur ornare orci ut vehicula. Mauris quis suscipit ligula.</p>

<div class="header">Position fixe</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum lacus ac sem dictum luctus. Praesent rutrum malesuada scelerisque. Donec consectetur condimentum semper. Quisque sed massa sit amet nisi sagittis maximus. Vestibulum facilisis et risus ut euismod. Vivamus consectetur ornare orci ut vehicula. Mauris quis suscipit ligula.</p>

CSS : Ajoutez une couleur d’arrière-plan opaque à 50% au bloc d’en-tête afin de pouvoir le visualiser.

.header {
  background-color: rgba(235, 210, 52, 0.5);
}

.header {  background-color: rgba(235, 210, 52, 0.5);}

CSS : Réglez la hauteur du bloc d’en-tête pour qu’il fasse 100px.

.header {
  background-color: rgba(235, 210, 52, 0.5);
  height: 100px;
}

.header {  background-color: rgba(235, 210, 52, 0.5);  height: 100px;}

CSS : Positionnez le bloc d’en-tête en fixe.

.header {
  position: fixed;
  background-color: rgba(235, 210, 52, 0.5);
  height: 100px;
}

.header {  position: fixed;  background-color: rgba(235, 210, 52, 0.5);  height: 100px;}

CSS : Positionnez le bloc d’en-tête dans le coin en haut à gauche du navigateur.

.header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(235, 210, 52, 0.5);
  height: 100px;
}

.header {  position: fixed;  top: 0;  left: 0;  background-color: rgba(235, 210, 52, 0.5);  height: 100px;}

CSS : Dimensionnez le bloc d’en-tête pour qu’il occupe 100% de la place disponible.

.header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(235, 210, 52, 0.5);
  height: 100px;
  width: 100%;
}

.header {  position: fixed;  top: 0;  left: 0;  background-color: rgba(235, 210, 52, 0.5);  height: 100px;  width: 100%;}

CSS : Ajoutez une marge supérieure de 110px au corps de la page pour que le contenu débute en dessous du bloc d’en-tête.

body {
  margin-top: 110px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(235, 210, 52, 0.5);
  height: 100px;
  width: 100%;
}

body {  margin-top: 110px;}.header {  position: fixed;  top: 0;  left: 0;  background-color: rgba(235, 210, 52, 0.5);  height: 100px;  width: 100%;}

Si ce n’est pas déjà fait, testez le défilement de la page.

Exercice 2 : boutons de navigation interne (basé sur un modèle)

Créer un nouveau fichier position-css19-2.html auquel vous liez le fichier css.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le.

Pour savoir comment créer les triangles, vous pouvez consulter l’animation suivante Comment créer un triangle en CSS ?

Sauf mention contraire*, l’article Positionnement fixe CSS19 et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Positionnement fixe CSS19

Préparation de l’exercice

Exercice 1 : en-tête (pas à pas)

Exercice 2 : boutons de navigation interne (basé sur un modèle)

Commentaires

Exercice 1 : en-tête (pas à pas)

Exercice 2 : boutons de navigation interne (basé sur un modèle)