Positionnement relatif, absolu et fixe CSS19

Cet exercice consiste à reproduire des modèles en positionnant des éléments html en absolu ou en relatif.

Consignes de l’exercice

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 suivante :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Positionnements relatifs et absolus</title>
    </head>
    <body>


    </body>	
</html>

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

Décalage de titre

Observez attentivement l’exemple ci-dessous (faites varier la largeur de la fenêtre si nécessaire), puis reproduisez-le sur la page position-css19.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Titre avec lettres en cascade

Vous pouvez choisir de créer un nouveau fichier position-css19-2.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.

Observez attentivement l’exemple ci-dessous, puis essayez de le reproduire.

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Dans tous les coins

Vous pouvez choisir de créer un nouveau fichier position-css19-3.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.

Observez attentivement l’exemple ci-dessous, puis essayez de le reproduire.

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Imbrication de blocs

Vous pouvez choisir de créer un nouveau fichier position-css19-4.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-4.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Smiley

Vous pouvez choisir de créer un nouveau fichier position-css19-5.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-5.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Vous pouvez choisir de créer un nouveau fichier position-css19-6.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-6.html en reexploitant le code de l’exercice précédent.

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Boutons de navigation internes

Vous pouvez choisir de créer un nouveau fichier position-css19-7.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-7.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

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

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.