Le positionnement des éléments
Le positionnement des éléments
-
Objectif
- Être capable de gérer de la mise en pages en CSS.
- Savoir comment fonctionne le positionnement avec les CSS.
-
Introduction
- Le principe du positionnement en CSS permet de définir l’emplacement des boîtes générées pour chaque élément HTML 5 présent dans le code de la page .
- Le positionnement CSS permet de placer un contenu exactement où l’on veut dans la page
- Il existe plusieurs schémas de positionnement en CSS :
- Un schéma de positionnement dans le flux normal ou positionnement courant (positionnement par défaut);
- Un « positionnement » (relatif), une variante du positionnement courant qui provoque un décalage;
- Trois schémas de positionnement qui sortent le contenu du flux (positionnement absolu, positionnement fixé et positionnement flottant).
-
Le positionnement
- Il existe trois mécanismes de positionnement de base en CSS :
- Notion de flux
- La propriété position
- Relative
- Absolue
- Fixe
- Statique
- La propriété float
- Rôle & détournement des flottants
- Nettoyer les flottants
- Dans le flux normal, la position de la boîte d’un élément est déterminée par l’ordre d’apparition dans le code HTML. Leur espacement est alors ajusté avec le remplissage, les bordures et les marges.
- Le CSS-P (P comme Position, inclu dans le CSS2) permettent de décaler un élément par sa propriété « position » associée aux attributs
- left (ou rigth, décalage horizontal)
- et top (ou bottom, décalage vertical)
-
Le positionnement dans le flux
- Par défaut, les navigateurs affichent les contenus suivant l’ordre dans lequel ils apparaissent dans le code HTML: c’est le positionnement dans le flux normal.
- Par défaut, les éléments de type bloc seront affichées dans une succession verticale (du haut vers le bas) et les éléments de type en-ligne, dans une succession horizontale (de la gauche vers la droite).
- Le flux d’un document pourrait se définir comme étant le comportement naturel d’affichage des éléments d’une page web. Autrement dit, les éléments se succèdent dans l’ordre où ils sont déclarés dans le code HTML.
- Le flux d’un document pourrait se définir comme étant le comportement naturel d’affichage des éléments d’une page web. Autrement dit, les éléments se succèdent dans l’ordre où ils sont déclarés dans le code HTML.
- Les éléments de séquençage, tels que
h1,pouul, s’affichent logiquement par défaut les uns en-dessous des autres - Les éléments délimitant pour la plupart des portions de textes dans un but de gain sémantique s’affichent côte à côte.
- Les deux groupes d’éléments peuvent être classés en deux familles:
-
Les éléments de type
block(h1,p,ul,ol,dl,table,blockquote, etc.) -
Les éléments de type
inline(a,img,strong,abbr, etc.) - Pour positionner un contenu dans le flux normal, utiliser les propriétés padding et margin.
- Pour centrer horizontalement un bloc, fixer sa largeur et mettre à auto ses marges latérales
-
La propriété
position - La propriété
positionporte merveilleusement bien son nom puisqu’elle va nous permettre de gérer les positions. - La propriété
positiondéfinit la façon dont un élément est positionné dans un document. - Les propriétés top, right, bottom et left déterminent l’emplacement final de l’élément positionné.
- Cette
propriétépeut prendre les valeurs suivantes : staticvaleur par défaut.relative.absolute.fixed.-
La propriété
float - La propriété CSS
floatpermet de spécifier qu’un élément flotte à gauche, à droite ou pas du tout au sein de son élément conteneur. Si l’élément est flottant, les autres éléments de type en ligne (inline) entoureront alors ce dernier. - On utilise généralement la propriété css
floatpour faire des colonnes.
