la mise en page traditionnelle (float, position, …deptinfo.unice.fr › ~renevier › ancien ›...

Intro

Web

-2

01

5-2

01

6

La mise en page traditionnelle (float, position, display)

etLes « flex box »

Intro

Web

-2

01

5-2

01

6

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

Façon CSS2

Augmentée par l’unité rem et la fonction calc

layout CSS2+ flex box

Intro

Web

-2

01

5-2

01

6


• 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


Intro

Web

-2

01

5-2

01

6


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


Intro

Web

-2

01

5-2

01

6


• 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


http://dabblet.com/gist/006222ff322fb02ed96e

Intro

Web

-2

01

5-2

01

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


http://www.w3.org/TR/css3-linebox/#vertical-align-prop

Intro

Web

-2

01

5-2

01

6


• 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-countersexemples : 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


http://www.w3.org/TR/css3-lists/#list-style-property

http://www.w3.org/TR/css-counter-styles-3/#predefined-counters

http://www.w3.org/TR/css3-lists/#list-style-property

http://dabblet.com/gist/43a44270870598f502ba

http://dabblet.com/gist/43a44270870598f502ba

Intro

Web

-2

01

5-2

01

6


• 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


http://dabblet.com/gist/65e5c53205592ae46085

Intro

Web

-2

01

5-2

01

6



Intro

Web

-2

01

5-2

01

6


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


http://validator.w3.org/check?uri=referer

http://www.w3.org/Icons/valid-xhtml11

Intro

Web

-2

01

5-2

01

6


<!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"> <imgsrc="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>

<article>  </article>



</section>

<header> EN-TETE ! on peut y mettre un menu, qui sert dans toutes les pages... </header>

</body> </html>

Intro

Web

-2

01

5-2

01

6



Intro

Web

-2

01

5-2

01

6


• Association du fichier css

• Fond avec couleur dégradée

• Page sur toute la largeur

/* dans la balise head du fichier html */

<link rel="stylesheet" href="css01-layout.css" type="text/css" media="screen,print" />

/* 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; }


Intro

Web

-2

01

5-2

01

6


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;

/* mise en valeur */text-shadow: 1px 1px black;box-shadow: 1px 1px 3px black;}

• 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


Intro

Web

-2

01

5-2

01

6


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


Intro

Web

-2

01

5-2

01

6


section, div.container{ margin: 2.5em 0;}

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;}

• 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

• Les « articles », div(s) de class="content"

– Marge à gauche pour les textes flottants – Couleur de fond transparente– Ombre – Bords arrondis


Intro

Web

-2

01

5-2

01

6


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%;

/* mise en valeur */

box-shadow: 1px 1px 3px black;

}

• 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

– De l’ombre…


Intro

Web

-2

01

5-2

01

6


Gérer facilement des alignements…


Intro

Web

-2

01

5-2

01

6


• 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és1. 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 + flew-wrap = flex-flow

– order

• Flexibilité : flew-grow + flew-shrink + flex-basis = flex• Alignement : justify-content / align-items / align-self / align-content


Intro

Web

-2

01

5-2

01

6


• 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


http://www.w3.org/TR/css3-flexbox/#flex-container

http://dabblet.com/gist/fc3daa5052f4514a44e3

Intro

Web

-2

01

5-2

01

6


• 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



http://dabblet.com/gist/fc3daa5052f4514a44e3

Intro

Web

-2

01

5-2

01

6


• 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



Intro

Web

-2

01

5-2

01

6


• 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


http://dabblet.com/gist/011f764c855144ff5bf1

Intro

Web

-2

01

5-2

01

6


• 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) flew-grow

• Idem s’il n’y a pas assez de place (et rétrécir) flew-shrink

• À partir d’une taille de référence flex-basis


Intro

Web

-2

01

5-2

01

6


• 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émentaireSi un autre élément a un flex-grow de 0, il ne recevra rien

• http://dabblet.com/gist/21f54aa77edc8dd04885


http://dabblet.com/gist/21f54aa77edc8dd04885

Intro

Web

-2

01

5-2

01

6


• Permet de déterminer comment réduire les éléments en cas d’espace manquant


• 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 manquantSi un autre élément a un flex-shrink de 0, il ne sera pas retaillé

• http://dabblet.com/gist/93463d0d73aae793edf6


http://dabblet.com/gist/93463d0d73aae793edf6

Intro

Web

-2

01

5-2

01

6


• Permet de déterminer la taille de référence des éléments, avant tout redimensionnement


• 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


http://dabblet.com/gist/5c6f1b951653fc895aa8

Intro

Web

-2

01

5-2

01

6


• Propriété raccourcie pour ‘flex-grow’, ‘flex-shrink’ et ‘flex-basis’


• 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%


Intro

Web

-2

01

5-2

01

6


• margin: auto & flex

– http://dabblet.com/gist/33edfc345b633434d161

– Permet de distribuer l’espace restant

• Alignement sur l’axe du flex box : justify-content

• Alignement sur l’autre axe :align-items etalign-self


http://dabblet.com/gist/33edfc345b633434d161

Intro

Web

-2

01

5-2

01

6


• 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


http://dabblet.com/gist/2276cc05e685b027a729

Intro

Web

-2

01

5-2

01

6


• 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


Intro

Web

-2

01

5-2

01

6


• Permet de modifier l’alignement d’un élément dans une flex box

• 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


Intro

Web

-2

01

5-2

01

6


• 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


la mise en page traditionnelle (float, position, …deptinfo.unice.fr › ~renevier › ancien ›...

Documents