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.
Consignes de l’exercice
Préparation de l’exercice
Créez un dossier racine locale.
Téléchargez les fichiers de travail ci-dessous :
Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.
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
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.
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
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.