La mise en page traditionnelle (float, position, display) et Les
Façon CSS2 Augmentée par l unité rem et la fonction calc Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 02 / 33
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, 2017-2018 03 / 33
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, 2017-2018 04 / 33
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 http://dabblet.com/gist/006222ff322fb02ed96e Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 05 / 33
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. http://www.w3.org/tr/css3-linebox/#vertical-align-prop 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, 2017-2018 06 / 33
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 http://www.w3.org/tr/css3-lists/# list-style-type : défini l apparance de la puce ou du numéro http://www.w3.org/tr/css-counter-styles-3/#predefined-counters 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 : http://www.w3.org/tr/css3-lists/#list-style-property Si c est «none» : cela n apparait plus comme une liste http://dabblet.com/gist/43a44270870598f502ba Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 07 / 33
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 http://dabblet.com/gist/65e5c53205592ae46085 Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 08 / 33
Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 09 / 33
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/icons/valid-xhtml11" 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, 2017-2018 10 / 33
<!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="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/html/logo/downloads/html5_logo_32.png" 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, 2017-2018 11 / 33
Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 12 / 33
/* 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, 2017-2018 13 / 33
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, 2017-2018 14 / 33
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, 2017-2018 15 / 33
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, 2017-2018 16 / 33
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, 2017-2018 17 / 33
Gérer facilement des alignements Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 18 / 33
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, 2017-2018 19 / 33
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 http://dabblet.com/gist/fc3daa5052f4514a44e3 Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 20 / 33
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) : http://dabblet.com/gist/fc3daa5052f4514a44e3 Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 21 / 33
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, 2017-2018 22 / 33
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 ) http://dabblet.com/gist/011f764c855144ff5bf1 Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 23 / 33
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, 2017-2018 24 / 33
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 http://dabblet.com/gist/21f54aa77edc8dd04885 Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 25 / 33
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é http://dabblet.com/gist/93463d0d73aae793edf6 Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 26 / 33
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) http://dabblet.com/gist/5c6f1b951653fc895aa8 Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 27 / 33
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, 2017-2018 28 / 33
margin: auto & flex http://dabblet.com/gist/33edfc345b633434d161 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, 2017-2018 29 / 33
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 http://dabblet.com/gist/2276cc05e685b027a729 Philippe Renevier Gonin - CSS/Mise en page (02) - Intro Web, 2017-2018 30 / 33
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, 2017-2018 31 / 33
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, 2017-2018 32 / 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, 2017-2018 33 / 33