Pour vous aider vous avez vos mémentos de cours dont le mémento CSS, la documentation w3school et la documentation Mozilla Developer Network (MDN).
Positionnement CSS | Description | Dé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).
Positionnements CSS
Boîtes positionnées en absolu.
Boîte bleue
Un élément positionné de façon relative est un élément dont la propriété de position calculée est relative. Dans ce cas, les propriétés top ou bottom indiquent le décalage vertical à appliquer et left ou right indiquent le décalage horizontal.
Boîte jaune
Un élément positionné de façon absolue est un élément dont la propriété de position calculée est absolute. Dans ce cas, les propriétés top, bottom, right et left indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages.
Boîte verte
La propriété float indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur.
Boîte rose
La source de ce document est https://developer.mozilla.org/fr/docs/Web/CSS/position
div#boites{ /* Alignement justifié du texte */ /* Marges internes de 20px */ /* Bordure de 2px continue bleue */ /* Largeur de 600px : width: 600px;*/ /* Hauteur de 600px : height: 600px;*/ /* Positionné en absolu : position: absolute; (Les boîtes seront positionnées par rapport à leur premier ancêtre positionné.)*/ }
/* Coin supérieur gauche */ div#boites > .boitebleue { background-color: #ADDFDE; position: absolute; width: 300px; height: 300px; top: left: } /* Coin inférieur gauche */ div#boites > .boitejaune { background-color: yellow; position: absolute; width: 300px; height: 300px; top: left: } /* Coin supérieur droit */ div#boites > .boiteverte { background-color: #A5DF39; width: 300px; height: 300px; position: absolute; top: right: } /* Coin inférieur droit */ div#boites > .boiterose { background-color: pink; width: 300px; height: 300px; position: absolute; top: right: }
Pour les couleurs ont été pris pour la boîte bleue la couleur #ADDFDE; pour la jaune : yellow; pour la verte : #A5DF39 et pour la rose : pink.
La boîte bleue dans le coin supérieur gauche est positionnée à 20 px du bord haut et 20 px du bord gauche.
La boîte verte dans le coin supérieur droit est positionnée à 20 px du bord haut et 20 px du bord droit.
La boîte rose dans le coin inférieur droit est positionnée 300px plus bas que la boîte verte, donc à 320 px du bord haut et 20 px du bord droit.
La boîte jaune est positionnée au-dessous de la boîte bleue (i.e. 300 px plus bas que la boîte bleue).
Les blocs positionnés en absolu se placent par rapport à leur premier ancêtre positionné (sinon le body par défaut).
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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.
Créez une page html contenant le code suivant dans son body.
Boîte n°1
Boîte n°2
Boîte n°3
Boîte n°4
Boîte n°5
Boîte n°6
Boîte n°7
Boîte n°8
Boîte n°9
Boîte n°10
Je ne suis pas une boîte.
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.
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: }
div {text-align:center;} div#global { margin-left: auto; margin-right: auto; width: 600px; } div#entete { width:600px; height:50px; background-color:#ADDFDE; } div#menu { width:100px; height:400px; } div#menu_haut { width:100px; height:200px; background-color:#A5DF39; } div#menu_bas { width:100px; height:200px; background-color:pink; } div#contenu { width:500px; height:400px; background-color:yellow; } div#bloc_haut { width:150px; height:150px; background-color:silver; } div#bloc_bas { width:150px; height:50px; background-color:red; } div#pied_page { width:600px; height:50px; background-color:navy; }
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.
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
on peut écrire :
De même, vous pouvez utiliser les balises <header>, <footer>, <article>, <section>, ... (exemples)
Menu vertical
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
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 :
nav li a { display: block; }
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 */ }
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; */ }
nav li a:hover { background-color: #3e92cc; color: white; /*fff*/ }
nav li a.active { background-color: #0a2463; color: white; }
Si votre page active est la page accueil, vous devez modifier le HTML ainsi :
[...]
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 ; } nav li { text-align: center; border-bottom: 1px solid ; } 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.
Vous devez créer un habillage menuHorizontal.css permettant cette fois d'obtenir un 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 là par exemple pour plus d'infos.
Les deux choses importantes qui changent par rapport à l'habillage vertical sont :
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
Vous allez modifier votre menu pour qu'il apparaisse comme ceci
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.
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.