Mise en page du site Web CSS
Mise en page du site Web
Un site Web est souvent divisé en en-têtes, menus, contenu et pied de page :
Il existe des tonnes de conceptions de mise en page différentes parmi lesquelles choisir. Cependant, la structure ci-dessus est l'une des plus courantes et nous l'examinerons de plus près dans ce didacticiel.
Entête
Un en-tête est généralement situé en haut du site Web (ou juste en dessous d'un menu de navigation supérieur). Il contient souvent un logo ou le nom du site :
Exemple
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Résultat
Header
Barre de navigation
Une barre de navigation contient une liste de liens pour aider les visiteurs à naviguer sur votre site Web :
Exemple
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Résultat
Contenu
La mise en page de cette section dépend souvent des utilisateurs cibles. La mise en page la plus courante est l'une (ou une combinaison de celles-ci) des suivantes :
- 1 colonne (souvent utilisé pour les navigateurs mobiles)
- 2 colonnes (souvent utilisé pour les tablettes et les ordinateurs portables)
- Disposition à 3 colonnes (utilisée uniquement pour les ordinateurs de bureau)
1 colonne :
2 colonnes :
3 colonnes :
Nous allons créer une mise en page à 3 colonnes et la remplacer par une mise en page à 1 colonne sur des écrans plus petits :
Exemple
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Résultat
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Conseil : Pour créer une mise en page à 2 colonnes, définissez la largeur sur 50 %. Pour créer une mise en page à 4 colonnes, utilisez 25 %, etc.
Conseil : Vous vous demandez comment fonctionne la règle @media ? En savoir plus à ce sujet dans notre chapitre CSS Media Queries .
Conseil : Une façon plus moderne de créer des dispositions de colonnes consiste à utiliser CSS Flexbox. Cependant, il n'est pas pris en charge dans Internet Explorer 10 et les versions antérieures. Si vous avez besoin d'un support IE6-10, utilisez des flottants (comme indiqué ci-dessus).
Pour en savoir plus sur le module Flexible Box Layout, lisez notre chapitre CSS Flexbox .
Colonnes inégales
Le contenu principal est la partie la plus importante et la plus importante de votre site.
Il est courant que les largeurs de colonne soient inégales , de sorte que la majeure partie de l'espace est réservée au contenu principal. Le contenu secondaire (le cas échéant) est souvent utilisé comme navigation alternative ou pour spécifier des informations pertinentes pour le contenu principal. Modifiez les largeurs à votre guise, rappelez-vous seulement qu'elles doivent totaliser 100 % :
Exemple
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Résultat
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Bas de page
Le pied de page est placé en bas de votre page. Il contient souvent des informations telles que le droit d'auteur et les coordonnées :
Exemple
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Résultat
Mise en page de site Web réactif
En utilisant une partie du code CSS ci-dessus, nous avons créé une mise en page de site Web réactive, qui varie entre deux colonnes et des colonnes pleine largeur en fonction de la largeur de l'écran :
Avez-vous déjà entendu parler des Espaces W3Schools ? Ici, vous pouvez créer votre site Web à partir de zéro ou utiliser un modèle et l'héberger gratuitement.
Commencez gratuitement ❯* Pas de carte de crédit nécessaire