Agencement de site web CSS

Website layout

Websites are usually divided into header, menu, content, and footer:

There are many different layout designs to choose from. However, the above structure is one of the most common structures, and we will study it carefully in this tutorial.

Header

The header (header) is usually located at the top of the website (or just below the top navigation menu). It usually contains a logo or the name of the website:

Exemple

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Résultat :

Header

Essayer par vous-même

Navigation bar

The navigation bar contains a list of links to help visitors browse your website:

Exemple

/* Navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar link */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Link - changes color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Résultat :

Essayer par vous-même

Content

The layout to use usually depends on your target users. The most common layouts are one of the following (or a combination of them):

  • 1-colonneMise en page (généralement utilisée pour les navigateurs mobiles)
  • 2-colonnesMise en page (généralement utilisée pour les tablettes et les ordinateurs portables)
  • 3-colonnesMise en page (seulement pour les ordinateurs de bureau)

1-colonne :

2-colonnes :

3-colonnes :

Nous allons créer un layout à trois colonnes et le modifier en un layout à une colonne sur les écrans plus petits :

Exemple

/* Créez trois colonnes égales qui flottent côte à côte */
.column {
  float: left;
  width: 33.33%;
}
/* Nettoyez le flottement après les colonnes */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Mise en page responsive - Faites empiler les trois colonnes au lieu de les aligner côte à côte sur les écrans plus petits (largeur de 600 pixels ou moins) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Résultat :

Manuel de référence complet des technologies de site web

Notre manuel de référence couvre tous les aspects des technologies de site web.

Il inclut les technologies standards W3C : HTML, CSS, XML. Et d'autres technologies, telles que JavaScript, PHP, SQL, etc.

Outil de test d'instance en ligne

Sur CodeW3C.com, nous proposons plus de mille exemples.

En utilisant notre éditeur en ligne, vous pouvez modifier ces exemples et expérimenter avec le code.

Méthode d'apprentissage rapide et facile

Un temps est un argent que l'on ne peut pas acheter, c'est pourquoi nous vous offrons du contenu d'apprentissage rapide et facile à comprendre.

Ici, vous pouvez obtenir toute l'information dont vous avez besoin de manière claire et accessible.

Essayer par vous-même

Astuce :Pour créer un layout à deux colonnes, changez la largeur à 50 %. Pour créer un layout à quatre colonnes, utilisez 25 %.

Astuce :Voulez-vous savoir comment fonctionne la règle @media ? Lisez notre Requêtes médiatiques CSS Apprenez plus de connaissances connexes dans ce chapitre.

Astuce :Une méthode plus moderne pour créer une mise en page de colonnes est d'utiliser CSS Flexbox. Cependant, Internet Explorer 10 et les versions antérieures ne le prennent pas en charge. Si vous avez besoin de la prise en charge d'IE6-10, utilisez les flottants (comme indiqué ci-dessus).

Pour en savoir plus sur le module de mise en page Flexible Box, lisez notre Flexbox CSS Tutoriel.

Colonnes inégales

Le contenu principal (main content) est la partie la plus grande et la plus importante de votre site web.

Il est courant que les largeurs des colonnes ne soient pas égales, car la plupart de l'espace est réservé au contenu principal. Le contenu secondaire (le cas échéant) est généralement utilisé comme navigation de remplacement ou pour spécifier des informations liées au contenu principal. Vous pouvez modifier la largeur à votre guise, à condition de vous souvenir que son total doit être de 100% :

Exemple

.column {
  float: left;
}
/* Colonnes latérales */
.column.side {
  width: 25%;
}
/* Colonne centrale */
.column.middle {
  width: 50%;
}
/* Mise en page responsive - Faites empiler les trois colonnes au lieu de les aligner côte à côte */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Résultat :

Manuel de référence complet des technologies de site web

Notre manuel de référence couvre tous les aspects des technologies de site web.

Il inclut les technologies standards W3C : HTML, CSS, XML. Et d'autres technologies, telles que JavaScript, PHP, SQL, etc.

Outil de test d'instance en ligne

Sur CodeW3C.com, nous proposons plus de mille exemples.

En utilisant notre éditeur en ligne, vous pouvez modifier ces exemples et expérimenter avec le code.

Méthode d'apprentissage rapide et facile

Un temps est un argent que l'on ne peut pas acheter, c'est pourquoi nous vous offrons du contenu d'apprentissage rapide et facile à comprendre.

Ici, vous pouvez obtenir toute l'information dont vous avez besoin de manière claire et accessible.

Essayer par vous-même

Pied de page

Le pied de page est situé en bas de la page. Il contient généralement des informations telles que les droits d'auteur et les coordonnées de contact :

Exemple

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Résultat :

Pied de page

Essayer par vous-même

Mise en page de site web réactif

En utilisant le code CSS ci-dessus, nous avons créé une mise en page de site web adaptative qui bascule entre deux colonnes et une colonne pleine largeur en fonction de la largeur de l'écran :

Essayer par vous-même