Positionnement flottant : Pas à pas 02 CSS05

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

Avant de commencer l’exercice

La page HTML de base fournie est structurée en 6 zones délimitées par des éléments de type <div></div> et identifiées par des class.

Aperçu du document avant de commencer l'exercice

Consignes de l’exercice

Préparation de l’exercice

Créez un dossier racine locale.

Téléchargez les fichiers de travail ci-dessous :

Placez tous les fichiers téléchargés dans le dossier racine locale.

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

Initialisation de la page

La totalité de l’exercice se fait en CSS, vous n’avez pas besoin de modifier le code HTML.

CSS : En utilisant le sélecteur universel * :

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

Le sélecteur universel * permet d’appliquer des propriétés CSS à l’ensemble des balises HTML, il signifie toutes balises HTML. C’est l’équivalent de ce que vous pourriez faire avec le sélecteur div, p, h1, h2, h3, etc... { } en listant de manière exhaustive toutes les balises HTML existantes.
Dans cette question, le sélecteur est utilisé afin de supprimer toutes les marges internes et externes qui ont pu être définies dans la feuille de style par défaut du navigateur.

CSS : En utilisant le sélecteur .page :

  • Ajoutez une largeur à l’élément page pour dimension l’ensemble du contenu : width : 950px ;
  • Ajoutez des marges automatiques pour centrer l’ensemble du contenu : margin : auto ;

Positionnement de la zone d’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

CSS : En utilisant le sélecteur .colonne_menu, ajoutez une hauteur de 40px au menu.

CSS : En utilisant le sélecteur .colonne_menu li, supprimez les puces de la liste utilisée pour le menu : list-style: none ;

CSS : En utilisant le sélecteur adapté modifiez les liens du menu :

  • Ajoutez une bordure : border : 1px solid red ;

La bordure est juste là pour visualiser les modifications lors des manipulations CSS. Il est fortement recommandé d’ajouter une bordure de couleur ou une couleur d’arrière-plan pour faciliter la compréhension des paramètres CSS que vous appliquez.

  • Affichez les liens du menu sous forme de bloc : display: block ;
  • Positionnez les liens en flottant à gauche : float: left ;
  • Ajoutez une largeur aux liens de 100px
  • Ajoutez une hauteur aux liens de 40px
  • Centrez le texte dans les liens : text-align: center ;
  • Définissez une hauteur de ligne de 40px : line-height: 40px ;

Le fait d’ajouter une hauteur de ligne équivalente à la hauteur du menu permet de centrer verticalement les liens dans le menu.

  • Supprimez la bordure ajoutée précédemment

Gestion des colonnes

CSS : En utilisant le sélecteur .colonne_pub :

  • Positionnez l’élément en flottant sur la droite
  • Ajoutez une largeur à l’élément de 150px
  • Ajoutez une hauteur à l’élément de 300px

CSS : En utilisant le sélecteur .colonne_contenu :

  • Ajoutez une marge interne à droite de 150px

CSS : En utilisant le sélecteur .colonne_contenu :

  • Supprimez la marge interne pour la transformer en marge externe à droite de 150px

Vous devez obtenir le résultat ci-dessous

Aperçu des colonnes mises en place

Changement de position du menu

CSS : Modifiez les réglages du menu et du contenu afin de positionner le menu sous forme d’une troisième colonne comme illustré sur l’image ci-dessous.

Mise en place sur trois colonnes

Correction

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

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