Html & Css #5 : positionement

1. CSS : Positionnement

2. Block & Inline

3. Typologie
Block vs Inline

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

5. Fixer la taille d’un block (1)
header{
width: 900px;
height: 800px;
}
h2{
width: 50%;
height: 20%;
}

6. Fixer la taille d’un block (2)
header{
min-width: 900px;
min-height: 800px;
}
h2{
max-width: 50%;
max-height: 20%;
}

7. Débordement d’un block
p{
overflow: visible;
}
p{
overflow: hidden;
}
p{
overflow: scroll;
}
p{
overflow: auto;
}

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

9. La propriété display
a{
display: block;
}
p{
display: inline;
}
Ex : http://jsfiddle.net/thecorneliusclub/r552dzs7/

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

11. Inline-block (2)
nav ul li{
display: inline-block;
}
Ex : http://jsfiddle.net/thecorneliusclub/90zay7a9/

12. Tailles & Marges

13. Taille d’un bloc
h1{
width: 100px;
}
h2{
height: 100%;
}
Ex : http://jsfiddle.net/thecorneliusclub/dxwotwfo/

14. Types de marges
Border
Margin
Padding

15. Padding
h1{
padding: 10px;
}
h2{
padding: 10px 20px;
}
h3{
padding: 10px 5px 2px 3px;
}
h4{
padding-left: 10px;
}
Ex : http://jsfiddle.net/thecorneliusclub/ek44bcd1/

16. Margin
h1{
margin: 10px;
}
h2{
margin: 10px 20px;
}
h3{
margin: 10px 5px 2px 3px;
}
h4{
margin-right: -5px;
}
Ex : http://jsfiddle.net/thecorneliusclub/ccjw6r1k/

17. Centrer un bloc
body{
width: 800px;
margin: 0px auto;
}
Ex : http://jsfiddle.net/thecorneliusclub/nuqL7zop/

18. Les flottants

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

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

21. Pratique
div{
float: left;
}
p{
float: right;
}
#container{
clear: both;
}
Ex : http://jsfiddle.net/thecorneliusclub/s43xL86x/

22. Positionnement

23. Positionnement absolu
#logo{
position: absolute;
top: 100px;
right: 100px;
}
Ex : http://jsfiddle.net/thecorneliusclub/eu7wfws8/

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

25. Positionnement fixe
#logo{
position: fixed;
top: 100px;
right: 100px;
}
Ex : http://jsfiddle.net/thecorneliusclub/fjpm1x0s/

26. Merci pour votre attention.