html & css #5 : positionement
DESCRIPTION
Html & Css #5 : positionementTRANSCRIPT
![Page 1: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/1.jpg)
CSS : Positionnement
![Page 2: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/2.jpg)
Block & Inline
![Page 3: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/3.jpg)
Typologie
Block vs Inline
![Page 4: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/4.jpg)
Caractéristiques d’un block
Par default, un block prend toute la largeur de son élément parent.
Un block peut avoir des marges et des paddings.
Par default, un block prend la hauteur de ses éléments enfants.
Ex : p, div, form, header, nav, ul, li, h1…
Ex : http://jsfiddle.net/thecorneliusclub/yw9rj41L/
![Page 5: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/5.jpg)
Fixer la taille d’un block (1)
header{ width: 900px; height: 800px; } h2{ width: 50%; height: 20%; }
![Page 6: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/6.jpg)
Fixer la taille d’un block (2)
header{ min-width: 900px; min-height: 800px; } h2{ max-width: 50%; max-height: 20%; }
![Page 7: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/7.jpg)
Débordement d’un block
p{ overflow: visible; } p{ overflow: hidden; } p{ overflow: scroll; } p{ overflow: auto; }
![Page 8: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/8.jpg)
Sa hauteur / largeur est celle de son contenus.
Caractéristiques d’un inline
Il n’est pas possible de lui fixer une largeur / hauteur.
Il ignore les marges top et bottom mais applique les marges left et right, ainsi que tout padding.
Ex : http://jsfiddle.net/thecorneliusclub/obd38xro/
![Page 9: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/9.jpg)
La propriété display
a{ display: block; }
p{ display: inline; }
Ex : http://jsfiddle.net/thecorneliusclub/r552dzs7/
![Page 10: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/10.jpg)
Inline-block (1)
Source : http://www.lesintegristes.net/2008/06/18/utiliser-la-propriete-displayinline-block/
Inline-block permet d’appliquer des styles de type « block » à un élément ayant un comportement de type « inline », comme par exemple, une largeur, une hauteur, des marges, etc.
![Page 11: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/11.jpg)
Inline-block (2)
nav ul li{ display: inline-block; }
Ex : http://jsfiddle.net/thecorneliusclub/90zay7a9/
![Page 12: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/12.jpg)
Tailles & Marges
![Page 13: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/13.jpg)
Taille d’un bloc
h1{ width: 100px; } h2{ height: 100%; }
Ex : http://jsfiddle.net/thecorneliusclub/dxwotwfo/
![Page 14: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/14.jpg)
Types de marges
Border
Margin
Padding
![Page 15: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/15.jpg)
Padding
h1{ padding: 10px; } h2{ padding: 10px 20px; } h3{ padding: 10px 5px 2px 3px; } h4{ padding-left: 10px; }
Ex : http://jsfiddle.net/thecorneliusclub/ek44bcd1/
![Page 16: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/16.jpg)
Margin
h1{ margin: 10px; } h2{ margin: 10px 20px; } h3{ margin: 10px 5px 2px 3px; } h4{ margin-right: -5px; }
Ex : http://jsfiddle.net/thecorneliusclub/ccjw6r1k/
![Page 17: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/17.jpg)
Centrer un bloc
body{ width: 800px; margin: 0px auto; }
Ex : http://jsfiddle.net/thecorneliusclub/nuqL7zop/
![Page 18: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/18.jpg)
Les flottants
![Page 19: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/19.jpg)
Théorie (1)
Un élément flottant adopte par défaut la largeur qu'occupe son contenu. Le principe de base est simple: un élément flottant est ôté partiellement du flux et placé à l'extrême gauche (float:left) ou droite (float:right) de son conteneur, forçant par la même occasion tout contenu du flux qui suit à l'envelopper. Deux objets flottants dans la même direction se rangeront côte à côte, seul un contenu demeuré dans le flux qui les succède immédiatement initiera l'habillage.Source : http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#flottants
![Page 20: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/20.jpg)
Théorie (2)
La propriété clear s'utilise conjoitement aux float et permet à un élément (qui peut être d'ailleurs lui-même flottant) de ne plus subir le comportement d'habillage dicté par un objet flottant qui le précède directement et, par conséquent, de se caler en-dessous de ce dernier. Le clear autorise un nettoyage des flottants exclusivement à gauche (clear:left), à droite (clear:right) ou les deux simultanément (clear:both).
Source : http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#flottants
![Page 21: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/21.jpg)
Pratique
div{ float: left; }
p{ float: right; }
#container{ clear: both; }
Ex : http://jsfiddle.net/thecorneliusclub/s43xL86x/
![Page 22: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/22.jpg)
Positionnement
![Page 23: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/23.jpg)
Positionnement absolu
#logo{ position: absolute; top: 100px; right: 100px; }
Ex : http://jsfiddle.net/thecorneliusclub/eu7wfws8/
![Page 24: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/24.jpg)
Gestion de la profondeur
#logo{ position: absolute; top: 100px; right: 100px; z-index: 10; } #bonus{ position: absolute; top: 100px; right: 100px; z-index: 100; }
Ex : http://jsfiddle.net/thecorneliusclub/qdjv8e4d/
![Page 25: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/25.jpg)
Positionnement fixe
#logo{ position: fixed; top: 100px; right: 100px; }
Ex : http://jsfiddle.net/thecorneliusclub/fjpm1x0s/
![Page 26: Html & Css #5 : positionement](https://reader031.vdocuments.net/reader031/viewer/2022013108/559841531a28ab0a328b4590/html5/thumbnails/26.jpg)
Merci pour votre attention.