La mise en page traditionnelle (float, position, display) et Les «flex box»

Transcription

1 La mise en page traditionnelle (float, position, display) et Les

2 Façon CSS2 Augmentée par l unité rem et la fonction calc Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

3 Nous les avons déjà vu Avec display En changeant le type d affichage, il est possible de modifier la mise en page Avec flex (c.f. sous partie suivante) Rappelez vous les «a» dans les menus Avec float Mettre des éléments sur le côté Devrait s enrichir prochainement (dans le cadre du multi-colonne) Rappelez vous les menus Avec position Relative (pour un changement local) fixed / absolute pour un positionnement général Absolute dans un fixed / relative / absolute : pour position un élément dans un élément Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

4 Indique le type d affiche de l élément S applique à tous les éléments Valeur par défaut : inline Pas d héritage Cette propriété n est pas prise en compte dans les animations CSS Valeurs possibles, 1 parmi : inline comme un morceau de phrase block comme un block (p, h1, etc.) inline-block à l intérieur comme un block, à l extérieur traité comme un inline list-item comme un item de liste none l élément n apparait pas, ne prend pas de place, comme s il n existait pas Etc. Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

5 Ouvre des propriétés non possible à des propriétés qui ne s appliquaient pas (changement de catégorie) display: inline-block sur des «blocks» => ils s aligneront sur une ligne (c.f. vertical-align, normalement pas pour les blocks), en gardant leur structure interne display: block sur des «inlines» => change complétement l organisation initiale Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

6 Indique l alignement vertical, notation raccourci pour alignment-baseline, alignment-adjust, baseline-shift et dominant-baseline S applique aux éléments inline ou aux cellules des table (td, th) Valeur par défaut : voir les propriétés Chaque élément n hérite pas de la largeur de l élément parent (pas systématiquement) Cette propriété est prise en compte dans les animations CSS (sauf si la valeur d arrivée ou de départ est auto) c.f. Les valeurs possibles, une valeur qui peut être : auto use-script baseline sub super top text-top central middle bottom text-bottom <percentage> <length> top : aligne la limite supérieur de la ligne d écriture de l élément avec celle de son parent (de la ligne du haut) bottom : aligne la limite bas de la ligne d écriture de l élément avec celle de son parent (de la ligne du bas) middle : aligne le milieu de la ligne d écriture de l élément avec celle de son parent baseline : aligne les «alpabetic» (de la ligne du bas) Etc. Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

7 S applique aux items d une listes Règle sur la liste ou sur les items Ou sur les éléments avec display: list-item; Permet de définir l apparence pour les items d une liste Notation raccourcie pour list-style-type, list-style-image et list-style-position En pleine refonte list-style-type : défini l apparance de la puce ou du numéro exemples : upper-roman,lower-alpha, square, etc. list-style-image : une image (désignée par la fonction url() ) list-style-position : inside ou outside Valeur par défaut : disc none outside (pas d image, un cercle plein à l extérieur de la liste) Il y a héritage Cette propriété n est pas prise en compte dans les animations CSS Valeur : Si c est «none» : cela n apparait plus comme une liste Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

8 Couplé avec top, left, right, bottom Mais aussi z-index relative, absolute (peut disparaître en scrollant), fixed (toujours visible) Le plus Un élément B en position: absolute Dans un élément A en position: {relative, absolute ou fixed } Placement de B dans A (et non plus par rapport au document Permet de faire des hiérarchies contenant / contenu et de déplacer des blocks Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

9 Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

10 <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" <head> <title>cours Web, L3I parcours MIAGE, UNS</title> <style type="text/css"> p.fl:first-letter { font-size:2em;float:left; } p.fl:first-line { font-style: italic; font-weight:bold; } </style> </head> <body> <div class="footer"> <div style="float:right;"> <a href=" <img src=" alt="valid XHTML 1.1 style="border:0;width:88px;height:31px" /> </a> Ce texte est en bas<br />de la fenêtre... </div> <div class="container"> <div class="content"> Texte à droite<br />de la page<br /> <p><span style="font-size:2em;">p</span>remiere lettre dans un span modifiant ainsi son apparence par rapport au reste du paragraphe</p> <!-- --> </div> <div class="left"> Texte à gauche<br />de la page </div> <!-- --> </div> <div class="header"> EN-TETE! on peut y mettre un menu, qui sert dans toutes les pages... </div> </body></html> Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

11 <!doctype html> <html> <head> <meta charset="utf-8"> <title>cours Web, UNS</title> <style> p.fl:first-letter { font-size:2em;float:left; } p.fl:first-line { font-style: italic; font-weight:bold; } </style> </head> <body> <footer> <aside> <a href=" <img src=" alt="valid HTML 5" /> </a> </aside> Ce texte est en bas<br />de la fenêtre... </footer> <section> <article> Texte à droite<br /> de la page<br /> <p><span style="font-size:2em;">p</span>remiere lettre dans un span modifiant ainsi son apparence par rapport au reste du paragraphe</p> <p class="fl">voici un paragraphe de class CSS fl, pour first-letter et first-line. Ainsi l'apparance change pour la premiere lettre et la premiere phrase. Notez le cote flottant de la lettre pour etre encaissee dans le texte</p> </article> <aside> Texte à gauche<br /> de la page </aside> </section> <article> <!-- etc. --> </article> <!-- etc. --> <header> EN-TETE! on peut y mettre un menu, qui sert dans toutes les pages... </header> </body> </html> Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

12 Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

13 /* dans la balise head du fichier html */ <link rel="stylesheet" href="css01-layout.css" type="text/css" media="screen,print" /> Association du fichier css /* dans css01-layout.css */ body { background-image: linear-gradient(left, rgb(255,255,255) 7%, rgb(252,252,189) 100%); /* pour coller à gauche et à droite */ margin-left: 0; } margin-right: 0em; Fond avec couleur dégradée Page sur toute la largeur Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

14 header, div.header { /* positionnement */ position:fixed; width:100%; top:0; height:2.4em; color: white; background-color: gray; /* arrondi en bas uniquement */ border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; padding-left: 1em; /* transparence */ opacity: 0.5; Concerne les balises header et/ou les div de class="header" Un positionnement fixé dans la page (scroll) Sur toute la largeur (ou un peu plus ) En haut Avec une hauteur limitée Effet graphique Désignation des coins arrondis Espacement pour que le texte ne soit pas dans les arrondis De la transparence Un peu d ombre /* mise en valeur */ text-shadow: 1px 1px black; box-shadow: 1px 1px 3px black; } Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

15 footer, div.footer { position:fixed; bottom:0; /* différence entre width 100% et left/right 0 */ left: 0; right: 0; color: blue; height:2.4em; color: white; background-color: gray; /* arrondi en haut uniquement */ border-top-left-radius: 1em; border-top-right-radius: 1em; padding-left: 1em; /* transparence */ opacity: 0.5; /* mise en valeur */ text-shadow: 1px 1px black; box-shadow: -1px -1px 3px black; } Concerne les balises footer et/ou la div de class="footer" Un positionnement fixé dans la page (scroll) En Bas Sur toute la largeur Avec une hauteur limitée Effet graphique Désignation des coins arrondis Espacement pour que le texte ne soit pas dans les arrondis De la transparence Un peu d ombre Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

16 section, div.container { margin: 2.5em 0; } Partie centrale, la balise section ou la div de class="container" De l espace en haut et en bas pour voir les entêtes et pieds de page article, div.content { margin-left: 20%; background-color: rgba(187,255,255,0.5); box-shadow: 1px 1px 3px black; border-radius: 1em; /* padding lié aux bords arrondis */ padding: 1em; /* espacement */ margin-bottom: 1em; } Les «articles», div(s) de class="content" Marge à gauche pour les textes flottants Couleur de fond transparente Ombre Bords arrondis Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

17 aside, div.left { width:20%; background-color: rgb(230,230,230); float: left; /* arrondi à droite uniquement */ border-bottom-right-radius: 50%; border-top-right-radius: 50%; Les «boites», balise aside et/ou div(s) de class="left" Largeur fixée Boite flottante, à placer dans le html avant ce qui sera sur la droite Arrondis que sur le côté droit /* mise en valeur */ box-shadow: 1px 1px 3px black; } De l ombre Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

18 Gérer facilement des alignements Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

19 Permets de faire des «flow» de données, en ligne ou en colonne Supporte des tailles différentes Contrôle sur la réorganisation par rapport à l idéal Se décompose en différentes propriétés 1. display : flex ; (pour le contenant) Pour safari : display: -webkit-flex; /* display : inline-flex ; (pour faire comme si c était le contenu d un contenant «flex») : statut automatiquement gagné si le parent est display: flex */ 2. Des propriétés spéciales flex-direction + flex-wrap = flex-flow order Flexibilité : flex-grow + flex-shrink + flex-basis = flex Alignement : justify-content / align-items / align-self / align-content Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

20 Permet de dire l orientation (horizontal ou vertical) S applique aux flex containers (display: flex) Valeur par défaut : row Il n y a pas héritage Cette propriété n est pas prise en compte dans les animations CSS Valeurs possibles, 1 parmi : row row-reverse column column-reverse Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

21 Permet de savoir s il peut y avoir plusieurs lignes (ou colonnes) S applique aux flex containers (display: flex) Valeur par défaut : nowrap Il n y a pas héritage Cette propriété n est pas prise en compte dans les animations CSS Valeurs possibles, 1 parmi : nowrap wrap wrap-reverse nowrap : reste sur une ligne (ou colonne) wrap : ajout de ligne (ou colonne) possible, dans le sens de lecture wrap-reverse : ajout de ligne (ou colonne) possible, dans le sens opposé à celui de lecture Même exemple (il faut redimensionner votre fenêtre) : Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

22 Notation raccourcie pour flex-direction + flex-wrap S applique aux flex containers (display: flex) Valeur par défaut : row nowrap Il n y a pas héritage Cette propriété n est pas prise en compte dans les animations CSS Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

23 Permet de contrôler l ordre de positionnement des boites S applique aux éléments contenu dans un flex container (display : inline-flex ou positionnement absolu dans le container) Valeur par défaut : 0 Il n y a pas héritage Cette propriété n est pas prise en compte dans les animations CSS Valeurs possibles : 1 entier Cette valeur permet de regrouper les éléments avec la même valeurs Les éléments sont ensuite affiché par groupe, en commençant par celui avec le n le plus petit Interaction avec l affichage inverse : l ordre d affichage est conservé (le premier groupe sera le dernier ) Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

24 Il peut arriver qu il y ait trop d espace, comme dans l exemple précédent on peut le répartir (et déformer les élémets) flex-grow Idem s il n y a pas assez de place (et rétrécir) flex-shrink À partir d une taille de référence flex-basis Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

25 Permet de déterminer comment agrandir les éléments en cas d espace restant S applique aux éléments contenu dans un flex container (display : inline-flex) Valeur par défaut : 0 Il n y a pas héritage Cette propriété est prise en compte dans les animations CSS, sauf pour le passage vers ou depuis 0 Valeurs possibles : 1 nombre (positif) En cas d espace supplémentaire, celui-ci est réparti entre les éléments de manière pondérée. Si la somme des flex-grow vaut 10 et que celui d un élément vaut 5 il recevra la moitié de l espace supplémentaire Si un autre élément a un flex-grow de 0, il ne recevra rien Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

26 Permet de déterminer comment réduire les éléments en cas d espace manquant S applique aux éléments contenu dans un flex container (display : inline-flex) Valeur par défaut : 1 Il n y a pas héritage Cette propriété est prise en compte dans les animations CSS, sauf pour le passage vers ou depuis 0 Valeurs possibles : 1 nombre (positif) En cas d espace insuffisant, celui-ci est trouvé parmi les éléments de manière pondérée. Si la somme des flex-shrink vaut 10 et que celui d un élément vaut 5 il donnera la moitié de l espace manquant Si un autre élément a un flex-shrink de 0, il ne sera pas retaillé Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

27 Permet de déterminer la taille de référence des éléments, avant tout redimensionnement S applique aux éléments contenu dans un flex container (display : inline-flex) Valeur par défaut : auto Il n y a pas héritage Cette propriété est prise en compte dans les animations CSS Valeurs possibles : auto ou une largeur (positive) Les pourcentages sont par rapport à la dimension du contenu du parent concernée par le flex layout (vertical <->height ; horizontal <->width) Auto : se base sur les dimensions «usuelles» de l élément 0 : l élément n a pas de dimension (mais peu grandir avec flex-grow) Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

28 Propriété raccourcie pour flex-grow, flex-shrink et flex-basis S applique aux éléments contenu dans un flex container (display : inline-flex) Valeur par défaut : 0 1 auto (c.f. les propriétés) Il n y a pas héritage Cette propriété est prise en compte dans les animations CSS (c.f. les propriétés) Valeurs possibles : none ( 0 0 auto) < flex-grow > < flex-shrink >? < flex-basis > flex-grow > si non précisé, = 1 flex-shrink > si non précisé, = 1 flex-basis > si non précisé, = 0% Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

29 margin: auto & flex Permet de distribuer l espace restant Alignement sur l axe du : justify-content Alignement sur l autre axe : align-items et align-self Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

30 Alignement selon l orientation S applique aux containers «display: flex» Valeur par défaut : flex-start Il n y a pas héritage Cette propriété n est pas prise en compte dans les animations CSS Valeurs possibles, une parmi : flex-start flex-end center space-between space-around Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

31 Alignement selon l autre orientation S applique aux containers «display: flex» Valeur par défaut : stretch Il n y a pas héritage Cette propriété n est pas prise en compte dans les animations CSS Valeurs possibles, une parmi : flex-start flex-end center baseline stretch Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

32 Permet de modifier l alignement d un élément dans une S applique aux éléments contenu «display: inline-flex» Valeur par défaut : auto Il n y a pas héritage Cette propriété n est pas prise en compte dans les animations CSS Valeurs possibles : auto flex-start flex-end center baseline stretch idem que précédemment auto pour garder la valeur spécifiée dans le container Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33

33 Pour aligner les éléments à l intérieur du contenant, en cas d espace supplémentaire S applique aux containers «display: flex» Valeur par défaut : stretch Il n y a pas héritage Cette propriété n est pas prise en compte dans les animations CSS Valeurs possibles : flex-start flex-end center space-between space-around stretch Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, / 33