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 nouvelle page .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.

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.

Illustration de la structure de base

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

Dans le bloc .entete, ajoutez un lien hypertexte sur le nom du site pointant vers la page courante.

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 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.

Suppression des marges du paragraphe

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

Dimensionnement de l'en-tête

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.

Transformation en conteneur flexible

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

Dimensionnement des colonnes

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…

Fenêtre du navigateur trop étroite

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) ;
}
Contenu occupe toute la largeur

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.

Ajout d'une largeur maximale

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.

Animation finale de l'interface fluide

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.