Positionnement flottant et fixe : Pas à pas 01 CSS04

Cet exercice consiste a définir une maquette de page pas à pas en utilisant le positionnement flottant.

Avant de commencer l’exercice

La page HTML de base est structuré en 5 zones en utilisant des id. Voici un schéma permettant de comprendre les différentes zones mises en place à l’intérieur de la partie. Des couleurs d’arrière-plan ont été ajoutées aux zones pour pouvoir en visualiser les limites.

Aperçu des blocs initiaux

Consignes de l’exercice

Préparation de l’exercice

Créez un dossier racine locale qui contiendra tous les fichiers de l’exercice.

Téléchargez les fichiers de base nécessaires pour commencer l’exercice :

Placez les deux fichiers téléchargés à la question précédente dans votre dossier racine local.

Ouvrez les deux fichiers .html et .css dans votre logiciel d’édition et la page .html dans votre navigateur.

Initialisation des marges

CSS : En utilisant le sélecteur universel * :

  • Initialisez les marges internes de tous les éléments à 0px : padding
  • Initialisez les marges externes de tous les éléments à 0px : margin
* {
    margin: 0px ;
    padding: 0px ; 
}

Positionnement de l’en-tête

CSS : En utilisant le sélecteur #entete, ajoutez une hauteur à l’en-tête de 100px : height

Positionnement du menu du site et du contenu

CSS : En utilisant le sélecteur #colonne_menu :

  • Positionnez le menu en flottement à gauche : float : left ;
  • Ajoutez un largeur de 200 px : width

CSS : En utilisant le sélecteur #colonne_contenu, ajoutez une marge à gauche équivalente à la largeur du menu : margin-left

Positionnement du pied de page

CSS : En utilisant le sélecteur #pieddepage :

  • Positionnez le pied de page en fixe à 0px du bas de la page :
    • position: fixed ;
    • bottom: 0px ;
  • Ajoutez une hauteur au pied de page de 30px et une largeur de 100 %

Faites défiler la page pour constater que le pied de page est toujours visible. Vous devriez avoir le résultat suivant :

Aperçu du premier positionnement

Changement de position du menu

CSS : Modifiez les réglages du menu et du contenu afin de positionner le menu à droite de la page.

Vous devriez avoir le résultat suivant :

Changement de position du menu

Problème avec le footer

Réduisez la taille de la fenêtre de votre navigateur jusqu’à ce que vous ayez besoin de faire défiler la page avec un ascenseur pour la consulter dans son intégralité.

CSS : Le pied de page fixe vous empêche de consulter la dernière ligne du contenu. Faites en sorte de résoudre le problème.

Correction

Les fichiers de correction sont téléchargeables ci-dessous :

Sauf mention contraire*, l'article Positionnement flottant et fixe : Pas à pas 01 [CSS04] 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.