Création d'une interface fluide 2 [CSS26]

Cet exercice, pas à pas, consiste à créer une interface de site web simple avec un menu vertical dans une colonne à droite et un contenu fluide.

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 page .html avec la structure de base.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</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 la structure illustrée par l’image ci-dessous. Attribuez la classe indiquée sur l’illustration à chaque élément.

<div class="page">
    <div class="entete"></div>
    <div class="colonnes">
        <div class="menu"></div>
        <div class="contenu"></div>
    </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.

<div class="entete">
    <p><a href="index.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.

Dans la mesure où les pages vers lesquelles devraient pointer les éléments du menu n’existent pas, vous pouvez mettre le symbole # comme contenu de l’attribut href pour vos liens. Cela permettra d’avoir des liens complets mais qui ne renverront pas vers une erreur 404 si vous cliquez dessus par mégarde.

<div class="menu">
    <ul>
        <li><a href="index.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 long (utilisez du Lorem Ipsum).

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

Réglages de l’interface web

Afin de distinguer facilement les six blocs principaux de contenu, ajoutez une couleur d’arrière-plan différente pour chacun des blocs : .page, .entete, .colonnes, .menu, .contenu et .piedpage.

Mise en valeurs des différents blocs avec une couleur

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

Une bande blanche persiste au-dessus de l’élément .entete. Celle-ci est liée aux marges de l’élément <p></p> compris à l’intérieur de l’élément .entete. Supprimez donc les marges de cet élément .entete p.

Gérez l’élément .entete afin qu’il ressemble à l’illustration ci-dessous :

Transformez l’élément .colonnes en élément flexible afin d’afficher ses deux éléments enfants .menu et .contenu sous la forme de colonnes.

Si vous ne connaissez pas l’affichage flex, veuillez consulter la solution.

.colonnes {
  background-color: darkorchid;
  display: flex;
}

Ajoutez une largeur à la colonne .menu et à la colonne .contenu.

Vous venez de définir une largeur pour les deux colonnes. Selon le modèle de boîte, si vous ajoutez des marges internes et/ou des bordures, la largeur réelle de vos colonnes va changer, dans le modèle de boîte pas défaut, la taille réelle = largeur + marges internes + épaisseur de la bordure.

Utilisez la propriété box-sizing, afin de modifier le comportement du modèle de boîte pour que la largeur définie avec width inclue les bordures et les marges internes.

Ajoutez une marge interne à l’élément .contenu.

Élargissez au maximum la fenêtre de votre navigateur… Vous constatez alors (en fonction des dimensions choisies) que vous avez de l’espace à côté de la zone .contenu.

Agrandissement de la fenêtre du navigateur

Lorsque, à l’inverse, vous réduisez trop la largeur de la fenêtre du navigateur, vous ne pouvez plus lire le texte confortablement…

Pour faire en sorte que l’élément .contenu s’adapte et occupe toute la place disponible, il faut pouvoir le régler afin qu’il occupe : toute la largeur moins la largeur du menu.

Pour cela, est possible de définir la largeur en utilisant la fonction calc(). Appliquez donc cette méthode en vous inspirant de l’exemple d’utilisation de calc() ci-dessous :

.exemple {
    width: calc(80% - 300px) ;
}

Manipulez la largeur de la fenêtre du navigateur. Vous voyez maintenant que la largeur de .contenu va s’adapter en fonction de la largeur de la fenêtre du navigateur !

Le problème maintenant est que les lignes peuvent devenir trop longues si on élargit la fenêtre au maximum. Des lignes trop longues ne permettant pas une lecture confortable, il faut encore régler le problème…

Définissez donc une largeur maximale pour l’élément .contenu afin d’éviter ce problème.

Sur écran large, nous avons toujours une large place disponible sur la droite du .contenu. Vous allez maintenant essayer de centrer .contenu dans l’espace disponible. Pour cela, il faut suivre les 6 questions suivantes.

Supprimez la largeur maximale sur .contenu.

Dans le code html, insérez à l’intérieur de .contenu, un nouvel élément <div> qui va englober la totalité des éléments de .contenu.

Ajoutez la classe .contenu-interieur au nouvel élément <div> que vous venez d’ajouter.

Ajoutez une couleur d’arrière-plan à.contenu-interieur.

Dimensionnez la largeur de .contenu-interieur en donnant une largeur maximale ainsi qu’une largeur minimale (pour que le contenu ne puisse pas être moins large que le menu).

Enfin, pour centrer .contenu-interieur, ajoutez-lui des marges automatiques à gauche et à droite.

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.

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.

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