Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés :

Transcription

1 CSS positionnement

2 POSITIONNEMENT Rappel balises de type bloc Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : width, height, min-width, ou min-height, padding, margin. Principaux éléments de type bloc : header, section, footer, article, aside les titres h1, h2, h3, h4, h5, h6 ; le paragraphe p ; les listes et éléments de liste ul, ol, li, dl, dd ; le bloc de citation blockquote ; le texte pré-formaté pre ; les tableaux table. 2

3 POSITIONNEMENT Rappel balises de type inline Les éléments se placent les uns à côté des autres. Les propriétés width, height, padding-top(bottom), margin-top(bottom) NE SONT PAS utilisables. Principaux éléments de type inline le lien a ; l'image img ; les emphases em et strong ; la citation q et cite ; l'élément code ; l'exemple samp ; les abréviations et acronymes abbr, acronym ; 3

4 POSITIONNEMENT Flux : traitement linéaire du contenu de la page. Bloc et inline => design vite limité!!!! Comment répondre au besoin de placer 2 blocs côte à côte. 4

5 LES TABLEAUX - FLOW Les tableaux ont longtemps été utilisés pour de la mise en forme. Mais c est une mauvaise idée car pas de séparation du fond et de la forme! Balise de type bloc. Eléments spécifiques pour les tableaux : <table> Déclaration du tableau <caption> titre du tableau <tr> - Ligne de tableau <th> - Cellule d'en-tête du tableau <td> - Cellule du tableau 5

6 TABLEAU EXEMPLE HTML Rendu navigateur 6

7 LES TABLEAUX GROUPE DE COLONNES colgroup : regroupement de colonnes ayant la même structure. col : définition des colonnes regroupées sous l élément <colgroup> Attributs : span : permet d indiquer le nombre de colonne width : indication de la largeur de la colonne. 7

8 LES TABLEAUX GROUPE DE LIGNES Pour organiser un long tableau, on peut être amené à regrouper les lignes : <thead> pour l entête. <tfoot> pour le pied. Attention, l ordre est différent au niveau de l écriture, <tfoot> s écrit avant <tbody> <tbody> pour le corps Attribut de fusion de cellule : fusion de ligne : rowspan fusion de colonne : colspan 8

9 TABLEAUX - EXEMPLE HTML Rendu navigateur 9

10 TABLEAUX MAIS ÇA C ÉTAIT AVANT! Waybackmachine : archive du net. ( ) Visualisation ebay.fr, juin 2001 (idem fnac, amazon ) 10

11 Les tableaux sont utiles pour présenter des données PAS POUR DE LA MISE EN FORME (sauf cas des newsletters) Le positionnement des blocs se gère à l aide de 3 propriétés CSS. 11

12 1. LA PROPRIÉTÉ POSITION Propriété position (porte bien son nom! ) 3 valeurs : absolute, relative ou fixed Accompagnée des propriétés left, right, top bottom qui prennent une valeur en px, pt, cm, %... Effet de calque. A utiliser avec parcimonie. 12

13 1. POSITION : RELATIVE Position relative inscrit l élément dans le flux normal, puis le décale horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement. «relatif» par rapport à son emplacement d origine. 13

14 1. POSITION Z-INDEX Calque au dessus Gestion des calques : propriété z-index (valeur positive ou négative). Calque au dessous 14

15 1. POSITION : ABSOLUTE Suppression radicale de l élément dans le flux. permet de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code Se positionne par rapport à la fenêtre du navigateur, en haut et à gauche, ou par rapport au dernier élément positionné 15

16 1.POSITION: ABSOLUTE 400px 16

17 1. POSITION : FIXED Positionnement fixed : ne fait plus parti du flux. L élément est toujours positionné au même endroit malgré le défilement sur l écran 17

18 2. LES ÉLÉMENTS FLOTTANTS Float Permet d aligner des blocs. 3 valeurs left, right, none : left = L'élément se trouve à gauche et sera entouré par la droite des éléments qui le suivent. right = L'élément se trouve à droite et sera entouré par la gauche des éléments qui le suivent. none = L'élément ne sera pas entouré (réglage normal). Est associé à l attribut width. Dans le fichier HTML, le bloc avec la propriété float doit toujours être écrit AVANT le bloc non flottant. 18

19 2. FLOAT PAR L EXEMPLE FLOAT : LEFT; HTML Rendu navigateur SANS FLOTTANT Rendu navigateur AVEC FLOTTANT CSS 19

20 2.FLOAT PAR L EXEMPLE - FLOAT : RIGHT CSS HTML Rendu navigateur 20

21 2. FLOAT PAR L EXEMPLE A NE PAS SUIVRE Historique de la propriété «float», utilisation pour afficher du contenu en colonne : margin sur le non-flottant 350px (margin-left) 21

22 2. FLOAT & CLEAR Clear : force le passage du bloc en dessous. clear : left = «annule» un float : left. clear : right = «annule» un float : right. both = «annule» les flottants à gauche et à droite. none = maintient le flottant. 22

23 FLOAT & CLEAR PAR L EXEMPLE Lorsque le contenu du float est plus «haut» que le contenu en position «normale». Problème car le texte du premier paragraphe est moins haut que l image 1 23

24 CLEAR 24

25 3. DISPLAY - Modification du comportement, sans perturber le flux La propriété Display admet plusieurs valeurs inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, tableheader-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, flex, inherit 25

26 DISPLAY INLINE, BLOCK, INLINE-BLOCK block l élément sera considéré comme un élément de type block => possibilité de lui affecter une taille des marges verticales (exemple d utilisation : le lien d un menu). inline l élément sera considéré comme un élément de type inline. Attention, la propriété «width» n est pas active. inline-block L élément est traité comme un élément inline MAIS il est possible de lui affecter une taille et des marges. 26

27 DISPLAY INLINE-BLOCK 27

28 3. DISPLAY :NONE L élément ne sera pas affiché. Par exemple, permet de masquer des éléments de sous menu. Test possible des propriétés : rycss_display_inline2 28

29 DISPLAY NONE - INLINE-BLOCK 29

30 DISPLAY LIST-ITEM transforme n importe quel élément en liste. Peut supporter les propriétés suivantes : 'list-style-type', 'list-style-image', 'list-style-position' et 'list-style' 30

31 DISPLAY MISE EN FORME TABULAIRE Avantages : //avec les anciennes pratiques de mises en forme sous forme de tableau. Permet de centrer verticalement en utilisant la propriété vertical-align. Inconvénients : La propriété margin n est pas applicable aux éléments en display table-cell La propriété padding n est pas applicables aux élément en display: table-row-group, table-header-group, table-footer-group, tablerow, table-column-group et table-column. 31

32 DISPLAY DE TYPE DISPLAY : TABLE table, inline-table, table-row-group, table-column, table-column-group, table-header-group, tablefooter-group, table-row, table-cell et table-caption comportement identique à celui d'une table display: table-cell. Le bloc se comporte comme une cellule => texte peut se centrer verticalement. 32

33 DISPLAY : TABLE-CELL Si aucun display : table n est décrit dans les prédécesseurs, le navigateur crée les objets de table manquants. Pour aller plus loin 33

34 DISPLAY : TABLE-CELL EXEMPLE 34

35 DISPLAY : FLEX Boîte flexible, c est-à-dire peut prendre toute la largeur ou pas, peut s afficher en colonne, ou en ligne. Déclaration de la propriété display : flex sur le parent. Pour les enfants concernés, précisions avec d autres propriétés : flex, flex-direction(valeur : column ou row), order! Navigateurs récents. Pour aller plus loin : flexbox-layout-module.html 35

36 LES MEDIA-QUERIES Css2 : attribut media de la balise link Css3 : media-queries Utilisation dans le fichier CSS(à la place de la balise suivi du type Exemple : HTML CSS 36

37 MEDIA-QUERIES Opérateurs logiques and "et", only "uniquement" not "non". Exemple pour écran de dimension inférieure à 640px 37