CSS3 positionnement

Un ensemble formé d'un ou plusieurs paragraphes, d'un ou plusieurs titres forme un bloc.
Cet ensemble peut être placé si nécessaire entre des balises appelées div qu'il convient de ne pas mélanger dans un document complexe.
Sous HTML5 ont été créées des balises spécifiques pour encadrer des blocs: header, section, aside, article et footer pour mieux différencier les blocs.

Les dimensions d'un bloc

Un bloc a une largeur et une hauteur soit en pixels, soit en pourcentage par rapport à l'écran.
Par exemple:{width:30%;text-align:justify;border: 1px solid black;padding: 12px;margin: 20px;height: 200px;overflow:auto;}
Sans overflow, la hauteur n'est pas prise en compte.
margin définit les marges extérieures et padding les marges intérieures.
Chacun de ces deux types de marge peut être décliné en top,right,bottom ou left.
On peut aussi indiquer 4 marges différentes, par exemple margin 10px 20px 30px 40px dans l'ordre top,right,bottom et left.
On peut centrer sur la page avec {margin:auto}
{word-wrap: break-word;} permet la césure de longs mots ou d'une url très longue

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Placer côte à côte

Méthode float

L'une des méthodes consiste à faire flotter un bloc par rapport à l'autre
Dans l'exemple ci-après, les deux contenus sont identiques.
Le code css du premier est:{float: left;width: 40%;border: 1px solid black;}
et celui du deuxième:{border: 1px solid blue;margin-left: 500px;margin-bottom:100px}

Méthode block-inline

Cette autre méthode place des blocs les uns à côté des autres tant qu'il y a la place. Dans l'exemple ci-dessous, les codes css sont successivement:
{display: inline-block;width: 20%;border: 1px solid black;vertical-align: top;}
{display: inline-block;border: 1px solid blue;width: 30%;margin-left: 50px;vertical-align: top;}
{display: inline-block;border: 1px solid green;width: 40%;margin-left: 20px;vertical-align: top;}
l'option vertical-align peut prendre les valeurs baseline (par défaut), top, middle, bottom ou même une valeur en px ou en % qui permet de placer comme on le souhaite les blocs les uns à côté des autres.

Le positionnement absolu

Il permet de placer un bloc exactement où on souhaite sur la page: dans l'exemple de code css ci-dessous, le bloc est placé en haut et à droite avec marge en haut. Il est fixé même si on fait défiler la page
{position: fixed;right: 0px;top: 0px;margin-top:20px}
Pour fixer sur la page on remplace {position:fixed;} par {position:absolute;}.
On peut aussi définir un ordre de chevauchement:le bloc avec l'option {z-index:1;} sera sous le bloc avec l'option {z-index:2;}

Quatrième partie: le positionnement sur la page avec CSS3

Le bloc

Les dimensions d'un bloc

Placer côte à côte

Méthode float

Méthode block-inline

Le positionnement absolu