TP M1106 n°2 - Partie 2 sur 2 - Durée 2h

Habillage CSS 3 : Positionnements CSS | Menus

Logos html 5 css 3

Objectifs

Rappels

Positionnements CSS (complétez le mémento du cours chaque fois que nécessaire)

Positionnement CSSDescriptionDémo
Dans le flux Reste dans le flux. C'est le comportement de base sans modification CSS.
Relatif Décalage par rapport au flux (L'espace initiale occupé par le bloc reste). On utilise position: relative; pour activer le positionnement relatif puis on applique des propriétés top, right, bottom ou left pour décaler le bloc.Démo MDN
Absolu Sort du flux (L'espace initiale occupé par le bloc disparaît). On utilise position: absolute; pour activer le positionnement absolu puis le bloc se place par rapport au premier ancêtre positionné (i.e. le bloc positionné le contenant) à partir des propriétés top, right, bottom ou left.Démo MDN
Fixe Sort du flux (L'espace initiale occupé par le bloc disparaît). On utilise position: fixed; pour activer le positionnement fixe puis le bloc se place à une position fixe du navigateur à partir des propriétés top, right, bottom ou left.Démo MDN
Flottant Sort du flux (L'espace initiale occupé par le bloc disparaît). Le bloc se place alors à gauche (ou respectivement à droite) du bloc qui le contient avec l'emploi de la propriété float: left; (ou respectivement float: right;). La propriété clear: both; permet au bloc suivant de ne plus être soumis aux flottements précédents et de se placer en dessous des flottants précédents.Démo MDN

Vous pouvez remarquer que sur le site de démo MDN sur les positionnnements, vous voyez qu'il y a un autre positionnement sticky (adhérent) dont nous n'avons pas parlé et qui agit comme un fixed dès qu'il ne serait plus visible lorsque vous descendez l'ascenseur de la fenêtre de votre navigateur par exemple (Lire les explications de la démo).

Placement de blocs avec le positionnement en absolu

Le paragraphe ajouté après les boîtes est dans le flux normal. Il apparaît donc à la suite du titre h2 positionné lui aussi dans le flux normal mais sous les boîtes qui, quant à elles, sont sorties du flux pour se positionner d'une manière absolue dans le div d'identifiant boites lui même positionné à la suite du titre h2.

boites paragraphe ajouté à la fin

Placement de blocs avec le positionnement flottant

Créez une page html contenant le code suivant dans son body.


<p class="flottantegauche">Boîte n°1</p>
<p class="flottantegauche">Boîte n°2</p>
<p class="flottantegauche">Boîte n°3</p>
<p class="flottantegauche">Boîte n°4</p>
<p class="flottantegauche">Boîte n°5</p>
<p class="flottantegauche">Boîte n°6</p>
<p class="flottantegauche">Boîte n°7</p>
<p class="flottantedroite">Boîte n°8</p>
<p class="flottantegauche">Boîte n°9</p>
<p class="flottantedroite">Boîte n°10</p>
<p class="plusflottant">Je ne suis pas une boîte.</p>
 

Associez à cette page une feuille de style css permettant d'obtenir un habillage similaire à celui illustré sur l'image ci-dessous en n'utilisant que des positionnements flottants.

exo boites flottantes

Les bordures bleues sont celles du navigateur dans la figure ci-dessus (ne pas cherchez à les faire en CSS 🤭).


.flottantegauche,.flottantedroite {
  margin: 2px;
  width: 100px;
  text-align: center;
}
.flottantegauche {
  background-color:
  float:
}
.flottantedroite {
  background-color:
  float:
}
.plusflottant {
  clear:
}

Arrangement de blocs fixes avec un positionnement flottant

Les bordures bleues sont celles du navigateur (ne pas cherchez à les faire en CSS 🤭).

Vous avez uniquement besoin d'ajouter des propriétés de positionnement flottant (float:left|right; ou clear:left|right|both;)

Vous avez à placer : deux float:left;, deux float:right; et deux clear:both;

Vous pouvez avoir besoin pour un même bloc de stopper le position flottant (clear:both;) pour qu'il aille sous les précédents puis de démarrer un nouveau positionnement flottant (par exemple à droite avec float:right;).

Vous allez aborder maintenant la création de menus classiques (menu vertical et menu horizontal) utiles pour naviguer sur un site Web.

Un menu vertical : habillage d'une liste de liens

Les exercices à faire sur les menus sont inspirés de ces très bons tutos w3school.

Depuis HTML 5, nous avons des nouvelles balises pour décrire le contenu d'une page dont la balise <nav> (exemple). Ainsi au lieu d'utiliser un div avec un identifiant nav, on peut utiliser la nouvelle balise <nav>, et au lieu d'écrire

<div id="nav">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nouveauté</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">À propos</a></li>
</ul>
</div>
 

on peut écrire :


<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nouveauté</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">À propos</a></li>
</ul>
</nav>

De même, vous pouvez utiliser les balises <header>, <footer>, <article>, <section>, ... (exemples)

<!DOCTYPE html>
<html lang="fr" > 
<head> 
  <meta charset="utf-8" />
  <link rel="stylesheet" href ="menuVertical.css"/> 
  <title> Menu vertical </title>
</head>
<body>

<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nouveauté</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">À propos</a></li>
</ul>
</nav>
    
</body>
</html>

Remarquez que les références des liens renvoient sur la même page. Dans un "vrai" site, vous devriez pointer vers 4 pages différentes, par exemple accueil.html, nouveaute.html, contact.html et apropos.html... Ce sera le cas dans vos projets personnels.

Le but est d'obtenir un menu vertical suivant

menu vertical

Comment trouver des couleurs "allant ensemble" ? Il existe pour cela de nombreux sites, par exemple https://coolors.co (l'accord des couleurs et le web design ne font pas partie des objectifs de ce module).

Vous devez maintenant compléter le fichier menuVertical.css pour réaliser cet habillage.

Voici une manière d'y arriver :

  1. Une chose importante à faire est de transformer les liens en élément de type bloc, cela permet de pouvoir cliquer sur l'ensemble de la zone de lien (et pas seulement sur le texte), et de pouvoir aussi entre autres, spécifier la largeur du "bloc lien".
  2. nav li a {
        display: block;
    }
  3. Complétez ensuite les propriétés pour la liste de liens (ul) du menu (bloc nav)
  4. nav ul {
        /* Enlevez les puces de la liste : list-style-type: none; */
        /* Enlevez également les marges externes : margin: 0; */
        /* Enlevez également les marges internes : padding: 0; */
        /* Largeur à 200px : width: 200px; */
        /* Couleur de fond du menu fixée dans l'énoncé à #E5F9FF */
    }
    Par défaut les marges sont variables suivant les navigateurs. Aussi pour s'assurer de celles-ci il faut les fixer.
  5. Complétez maintenant les propriétés CSS des liens du menu :
  6. nav li a {
        display: block;
        /* Texte en noir : color: 000; (ou black)*/
        /* On enlève les soulignements : text-decoration: none; */
        /* Ajout d'un peu de marge interne (8px en haut et en bas, 16px à droite et à gauche) : padding: 8px 16px; */
    }
  7. Au survol des liens la couleur de fond est #3E92CC et le texte blanc.
  8. nav li a:hover {
        background-color: #3e92cc;
        color: white; /*fff*/
    }
  9. La couleur de fond de la page active est #0A2463 et le texte blanc.
    nav li a.active {
        background-color: #0a2463;
        color: white;
    }

Si votre page active est la page accueil, vous devez modifier le HTML ainsi :

[...]
<li><a class="active" href="#">Accueil</a></li>
[...]

Il est possible de faire en sorte de ne pas changer la couleur de fond de la page active au survol ainsi :

nav li a:hover:not(.active) {
    background-color: #0a2463;
    color: white;
}

Vous pouvez également centrer le texte et ajouter une bordure.


ajouter à nav ul {
    border: 1px solid <couleur bordure>;
}
nav li {
    text-align: center;
    border-bottom: 1px solid <couleur bordure>;
}
nav li:last-child {
    border-bottom: none; /* pour ne pas mettre la bordure du ul et celle du dernier li (double bordure)*/
}

D'autres possibilités mentionnées ici. Le responsive design (ou web adaptatif) sera abordé au TP prochain.

Un menu horizontal : habillage d'une liste de liens avec positionnement flottant des items de listes

Vous devez créer un habillage menuHorizontal.css permettant cette fois d'obtenir un menu horizontal.

menu horizontal

Illustration du résultat attendu pour le menu horizontal.

Pour aligner les items d'une liste, la méthode classique est d'utiliser un positionnement flottant de ces items de listes (float: left;)

On pourrait également aligner des balises <li> en changeant le mode d'affichage bloc par défaut pour le type en-ligne (c'est-à-dire "en changeant le display") avec la propriété display: inline;, mais cela pose un problème d'espace blanc ("white space") à combler, voir par exemple pour plus d'infos.

Les deux choses importantes qui changent par rapport à l'habillage vertical sont :

  1. Le passage en float:left; des balises li
  2. On enlève la taille du ul qui va prendre la largeur de la page mais on doit lui mettre la propriété overflow: hidden; car les items sont flottants et sont donc retirés du flux normal ce qui fait que le ul "ne contient rien" et a donc une hauteur de zéro. Pour éviter qu'il ne "s'effondre", on lui met overflow: hidden; qui déclenche un nouveau contexte de formatage de bloc... (Oui CSS n'est pas si simple...)
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #e5f9ff;
    overflow: hidden;
}

nav li a {
    display: block;
    color: black;
    padding: 8px 16px;
    text-decoration: none;
}

nav li a:hover {
    background-color: #3e92cc;
    color: white;
}

nav li a.active {
    background-color: #0a2463;
    color: white;
}

nav li {
    float:left;
    text-align: center;
}

Enfin pour finir ce TP, vous allez comme pour le formulaire de la première partie, insérer des icônes fontawesome.

Pour ce faire, suivez la même procédure

  1. Ajoutez un lien dans l'en-tête de votre fichier html vers le fichier css des icônes. Par exemple :
  2. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  3. Ajoutez une icône où vous voulez avec la balise <i> avec la classe mentionnée dans le site. Par exemple pour l'accueil ("home"), on utilise généralement une petite maison. Tapez "home" dans la barre de recherche du site https://fontawesome.com/v4.7.0/icons/. Vous devriez accéder à ce lien https://fontawesome.com/v4.7.0/icon/home. Vous voyez alors que vous pouvez ajouter cette icône avec
  4. <i class="fa fa-home" aria-hidden="true"></i>

Vous allez modifier votre menu pour qu'il apparaisse comme ceci

menu horizontal avec icônes

Reprenez ensuite votre menu vertical :

Faites valider vos deux menus (vertical et horizontal) par l'enseignant (Demandez pour partager votre écran via l'outil zoom).

Pour aller plus loin, vous pouvez réaliser des menus déroulant ("dropdown") grâce encore à ces tutos w3schools.

Quizz CSS w3schools - Le retour du come back de la revanche -

logo w3schools M1106 TP1 Fin TP2 quiz css

Finished! Hurrah! 🤟⚡️Si vous avez fini avant la fin, aidez les autres à finir aussi :-) N'oubliez pas de déposer votre archive sur Moodle pour ce TP.