Création d'une interface fluide [CSS25]

Cet exercice, pas à pas, consiste à créer une interface de site web simple et fluide sur une colonne avec un menu horizontal.

Consignes de l’exercice

Préparation de l’exercice

Créez un nouveau dossier sur votre ordinateur à l’emplacement de votre choix qui servira de dossier racine. Ce dossier devra contenir tous les fichiers de votre exercice. Nommez-le correctement en respectant les règles de nommage d’un fichier sur Internet.

Créez une nouvelle page HTML nommée exocss25.html avec la structure de base suivante :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Exemple interface</title>
    </head>
    <body>
    </body>
</html>

Créez un nouveau fichier CSS vierge.

Liez le fichier CSS que vous venez de créer à votre page HTML.

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.

<link  rel="stylesheet" type="text/css" href="style.css">

Création du contenu de la page web

En utilisant des éléments de type <div></div>, recréez (dans la page web) la structure illustrée par l’image ci-dessous. Attribuez la classe indiquée sur l’illustration à chaque élément.

Les éléments HTML <div></div> sont vides, vous ne verrez donc rien lorsque vous testerez la page sur un navigateur.

Si avez eu besoin d’afficher cette solution pour comprendre et pas uniquement pour vous rassurer. Il est fortement recommandé de revoir les bases d’imbrication, en faisant ou refaisant notamment l’exercice Imbrication de blocs HTML

<div class="page">
    <div class="entete">
    </div>
    <div class="menu">
    </div>
    <div class="contenu">
    </div>
    <div class="piedpage">
    </div>
</div>

Dans le bloc .entete, insérez un paragraphe contenant le nom du site.

<div class="entete">
    <p>Titre du site</p>
</div>

Dans le bloc .entete, ajoutez un lien hypertexte sur le nom du site pointant vers la page courante. Il s’agit de faire comme si vous alliez construire un site complet, le nom du site pointe systématiquement vers la page d’accueil.

<div class="entete">
    <p><a href="interface1.html">Titre du site</a></p>
</div>

Dans le bloc .menu, ajoutez une liste non-ordonnée contenant trois liens hypertextes permettant de naviguer entre les différentes pages d’un futur site ainsi qu’un lien vers la page d’accueil. Les pages du site n’existant pas, vous utilisez le symbole # à la place de l’adresse des différentes pages du site.

Dans la mesure où nous ne connaissons pas l’adresse des pages 1, 2 et 3 puisqu’elles n’existent pas. Nous pouvons utiliser le symbole # comme valeur de l’attribut href. L’avantage de cette méthode permet d’avoir des liens sur lesquels vous pourrez cliquer sans pour autant obtenir une erreur 404 (fichier introuvable).

Pour ce qui est du lien vers la page d’accueil, nous le connaissons, il s’agit du même que celui appliqué sur le titre du site.

<div class="menu">
    <ul>
        <li><a href="exocss25.html">Accueil</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
</div>

Dans le bloc .contenu, ajoutez :

Un titre de niveau 1 ;
Plusieurs paragraphes un peu longs (utilisez du Lorem Ipsum).

Vous avez vraiment besoin d’aide pour cette question ?

<div class="contenu">
    <h1>Accueil</h1>
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>

Dans le bloc .piedpage, ajoutez une ligne de texte.

<div class="piedpage">Copyright 2019 - Dave Vloppeur & Foued Masteur</div>

Préparation du contenu

Afin de distinguer facilement les cinq blocs principaux de contenu, ajoutez une couleur d’arrière-plan différente pour chacun des blocs : .page, .entete, .menu, .contenu et .piedpage. Ces couleurs sont temporaires, vous les changerez dans la suite de l’exercice.

Aperçu des couleurs d'arrière-plan des blocs

.page {
    background-color: green;
}
.entete {
    background-color: orange;
}
.menu {
    background-color: pink;
}
.contenu {
    background-color: cadetblue;
}
.piedpage {
    background-color: firebrick;
}

Supprimez les marges de l’élément body afin de supprimer les bordures blanches tout autour de l’élément .page.

body {
  margin: 0;
}

Réglages de l’en-tête

Supprimez les marges externes du paragraphe présent dans l’en-tête avec le sélecteur .entete p.

.entete p {
  margin: 0;
}

Modifiez l’élément .entete afin de correspondre au modèle de l’image ci-dessous. Pour cela, vous devez régler la hauteur et les marges internes.

.entete {
  background-color: orange;
  padding: 10px;
  height: 50px;
}

Modifiez l’élément .entete et/ou son contenu afin de correspondre au modèle de l’image ci-dessous. Le lien hypertexte doit rester fonctionnel.

Pour centrer verticalement un texte affiché sur une seule ligne, il suffit d’appliquer la propriété line-height sur le texte. La valeur à saisir doit alors correspondre à la hauteur du conteneur.

.entete {
  background-color: orange;
  padding: 0.625rem;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.8rem;
}
.entete a {
  text-decoration: none;
  color: #000000;
}

Réglages du menu

L’objectif va être de modifier la mise en forme de la liste à puce utilisée pour le menu avant de traiter les liens.

Sélectionnez les lignes de la liste contenues dans menu avec le sélecteur .menu li et utilisez la propriété CSS display qui permet de changer le comportement d’un élément HTML. La valeur à utiliser sera dans ce cas là inline-block.

.menu li {
  display: inline-block;
}

Supprimez les marges internes et externes de la liste contenue dans menu.

.menu ul {
  margin: 0;
  padding: 0;
}

Transformez les liens du menu en éléments de type block afin de pouvoir les dimensionner à volonté. Ajoutez-leur ensuite une bordure et des marges internes et externes pour correspondre au modèle de l’image ci-dessous.

.menu a {
  display: block;
  padding: 0.2rem 0.625rem;
  margin: 0.3rem;
  border: 1px solid #000;
}

.menu {
    background-color: pink;
}
.menu ul {
    margin: 0;
    padding: 0;
}
.menu li {
    display: inline-block;
}
.menu a {
    display: block;
    padding: 0.2rem 0.625rem;
    margin: 0.3rem;
    border: 1px solid #000;
}

Réglages du contenu

Supprimez les marges externes des titres de niveau 1 dans .contenu.

La suppression des marges de l’élément <h1> qui se trouve en haut du bloc contenu a pour effet de supprimer l’espace entre contenu et menu. Nous ne voyons donc plus l’élément page qui les englobe.

.contenu h1 {
  margin: 0;
}

Afin que le texte ne soit pas collé aux bords, ajoutez une marge interne sur l’élément .contenu.

.contenu {
  background-color: cadetblue;
  padding: 10px;
}

Élargissez au maximum la fenêtre de votre navigateur et observez le contenu…

En fonction de la dimension et des réglages de votre écran, vous constaterez plus ou moins facilement que la lecture du texte peut devenir compliquée sur des écrans larges puisque les lignes deviennent beaucoup trop longues (cf. l’image ci-dessous). Il va donc falloir restreindre les dimensions du contenu de la page pour limiter le problème…

Pour le reste des questions de cette partie Réglages de l’interface web, pensez à manipulez la largeur de la fenêtre de votre navigateur lors de vos tests !

Utilisez la propriété CSS max-width sur l’élément .contenu afin d’éviter le problème évoqué précédemment. Une valeur correcte pour le contenu serait de 1000px maximum.

Réglage de la largeur maximale pour le contenu

L’élément contenu est un bloc puisqu’il s’agit d’un élément HTML <div>. Il n’a pas de dimensions explicitement précisées dans le code CSS. Il a donc les dimensions par défaut des blocs, c’est-à-dire que sa largeur est de 100% et sa hauteur est auto (elle s’adapte au contenu).

La propriété max-width permet ici de borner la largeur maximale de contenu. Celui-ci ferra donc 100% de large jusqu’à atteindre la largeur de 1000px. Au delà, si l’on continu à élargir la fenêtre du navigateur, l’élément contenu ne s’élargira plus et aura une dimension fixe de 1000px.

.contenu {
  background-color: cadetblue;
  max-width: 1000px;
  padding: 10px;
}

Pour que le bloc .contenu soit centré au milieu de la fenêtre du navigateur, il faut maintenant lui ajouter des marges externes automatiques à gauche et à droite.

L’ajout de marge automatique à gauche et à droite d’un bloc qui est moins large que son conteneur va permettre de le centrer.

.contenu {
    background-color: cadetblue;
    max-width: 1000px;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
}

Ou en version courte.

.contenu {
    background-color: cadetblue;
    max-width: 1000px;
    padding: 10px;
    margin: 0 auto;
}

Vous pouvez considérer que l’en-tête et le menu sont également trop larges… Si c’est le cas, il serait judicieux de travailler directement sur l’élément .page qui contient la totalité du contenu. Essayez donc d’obtenir le résultat suivant :

Les deux lignes permettant de donner une largeur maximale à l’élément contenu et de le centrer sont tout simplement déplacées dans l’élément page.

.page {
  background-color: green;
  max-width: 1000px;
  margin: 0 auto;
}
.contenu {
  background-color: cadetblue;
  
  
  padding: 10px;
}

Vous pouvez également choisir une solution intermédiaire en mettant des valeurs différentes à l’élément .page et à l’élément .contenu. Reproduisez la mise en forme suivante :

Contraintes différentes pour .page et .contenu

.page {
  background-color: green;
  max-width: 1400px;
  margin: 0 auto;
}
.contenu {
  background-color: cadetblue;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
}

Vous souhaitez contraindre la largeur de l’en-tête et du menu tout en conservant les couleurs d’arrière-plan ? Il faut donc appliquer les réglages aux bons éléments… Reproduisez donc la mise en forme suivante (remarquez que les couleurs de l’en-tête et du menu vont jusqu’aux bords) :

Contraintes et conservation des couleurs d'arrière-plan

.page {
  background-color: green;
  
  
}
.entete {
  background-color: orange;
  max-width: 1400px;
  margin: 0 auto;
}
.menu {
  background-color: pink;
  max-width: 1400px;
  margin: 0 auto;
}
.contenu {
  max-width: 1000px;
  margin: 0 auto;
}

Mise en forme de la page

L’interface est en place, il s’agit donc maintenant de finir la mise en page pour l’adapter à vos goûts.

Définissez une police par défaut pour votre page. Vous pouvez pour cela utiliser Google Font.

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
}

Modifiez les couleurs de la page en définissant un palette de couleurs avec un outil tel que Paletton.com ou Coolors.co.

Ajustez la taille des caractères des différents éléments.

Veillez à ce que les liens du menu changent d’aspect au survol de la souris.

Pour cibler spécifiquement les liens du menu, il est nécessaire d’utiliser le sélecteur .menu a. Pour ajouter l’état survolé, il faut ajouter à la suite du sélecteur la pseudo-classe :hover.

.menu a:hover {
    background-color: red;
}

Sauf mention contraire*, l'article Création d’une interface fluide [CSS25] 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.