Alsacréations

1. Page d'accueil
2. Bases et indispensables

Comment positionner les éléments en CSS ?

Les balises de bloc et les balises en-ligne

Ce chapitre sur la structure des balises est primordial, vous devez auparavant avoir consulté le tutoriel sur les bloc/en-ligne.

Ancêtre, Parents, Enfants, Frères

Comprendre l'imbrication des éléments (boîtes) les uns dans les autres est essentiel.

Chaque document HTML est toujours composé de conteneurs. Ceux-ci peuvent être ancêtres, parents, enfants ou frères. Ces différents éléments composent une hierarchie d'imbrications.

• Un élément Ancêtre est un élément qui contient un élément ou une hierarchie d'éléments
• Un bloc Parent est un élément contenant directement un autre bloc. Par exemple, un DIV contenant un paragraphe P. Attention : si ce paragraphe contient lui-même des éléments (ex: strong), DIV ne sera pas Parent de l'élément strong mais uniquement son Ancêtre. Le Parent est donc l'Ancêtre immédiat.
• Un bloc contenu directement dans un autre bloc est dit Enfant de cet élément. Par exemple, ici les éléments LI sont enfants de leur conteneur UL.
• Les éléments ayant le même élément Parent sont appelés Frères.

Le Flux

La mise en place des différents éléments de la page se fait par défaut selon le Flux courant.

Les éléments (balises) sont placés les uns après les autres dans le code HTML de la page.

L'ordre dans lequel apparaissent les balises dans le code HTML sera l'ordre dans lequel ils seront affichés et apparaîtront dans le document, c'est le Flux. Cela signifie que, par défaut, chaque élément est dépendant des éléments frères qui l'entourent.

Par défaut, les balises Bloc et les balises En-ligne ont un comportement différent dans le flux normal (voir tutoriel sur la structure des balises).

NOTE : les blocs positionnés en "absolu" ou "fixé" sortent du flux naturel et échappent quelque peu à cette règle.
Ils ne sont alors plus dépendant des éléments frères.
Pour se placer, un tel bloc se réfère non pas à son Parent direct, mais au premier Ancêtre positionné qu'il rencontre.

Le positionnement des éléments

Le positionnement dans le Flux normal

C'est le placement par défaut, à l'aide des marges internes (padding) du conteneur, soit des marges externes (margin) des éléments. Le flux régit l'agencement des différents éléments Frères.

Sans définition explicite du positionnement, un bloc se place en haut à gauche de son conteneur (ce dernier pouvant être un autre bloc, une cellule de tableau, le body,...) et prend automatiquement toute la largeur de ce conteneur. Ses frères se placeront en-dessous.

A partir de là, il est simple de positionner un bloc au sein de son parent grâce à l'utilisation des propriétés de marges.

Par exemple, pour placer un bloc jaune de 100x100px à 15px à partir de la gauche et 200px à partie du haut du conteneur :

.conteneur {
  padding-top: 200px;
  padding-left: 15px;
}
.bloc {
  width: 100px;
  height: 100px;
  background-color: yellow;
} 

Note : vous noterez l'emploi d'un padding-top et non d'un margin-top en raison du comportement appelé "fusion de marges" (selon cette règle, la marge haute de "bloc" s'applique en fait à son parent "conteneur").

Note : il n'est nullement obligatoire d'utiliser le pixel pour placer son bloc; n'importe quelle unité est valable (%, em, auto,...)

Positionner en flottant

La propriété FLOAT permet de positionner un bloc à gauche ou à droite dans un parent (et non-plus l'un en-dessous de l'autre). Le reste du conteneur parent occupera alors l'espace laissé libre.

Comme le float sort du flux courant, il n'est pas compté dans le calcul de la hauteur du conteneur, si celle-ci n'est pas spécifiée. Il peut donc "dépasser" en hauteur.

L'utilisation courante consiste à aligner une image à gauche ou à droite d'un texte de contenu :

Partie HTML :
<div class="conteneur">
   <img class="gauche" alt="..." src="..." />

   texte bla bla bla
   ....
</div>


Et la CSS correspondante :
.gauche {
  float: left;
  } 

NOTE : lorsqu'il y'a des éléments dont certains sont flottants, il est souvent préférable de placer ces éléments dans un parent commun.

Il est possible de cumuler les propriétés Float pour obtenir plusieurs blocs côte à côte.

Utiliser les positions absolues, fixes et relatives

Cette propriété est largement utilisée par défaut sur les logiciels WYSIWYG comme Dreamweaver. C'est en partie à cause de cette utilisation abusive que les "calques" ont acquis une mauvaise réputation.

En effet, le positionnement absolu, fixe ou relatif a des désavantages du fait de sa rigidité : il ne permet pas (ou difficilement) l'adaptation du site aux différentes résolutions la plupart du temps.

Attention cependant : cette rigidité n'est que fictive et due aux valeurs fixes données en général par les logiciels comme Dreamweaver. On peut très bien positionner en absolu en pourcentage ou en em. On peut également très bien centrer un site avec des positions absolues. Il faut simplement comprendre comment il fonctionne et ne pas se contenter des positionnements "à la dreamweaver".

Sachez également que c'est le seul moyen de superposer deux blocs (avec la propriété z-index)

Lorsqu'il est en position absolue ou fixe, le bloc est dit "positionné". Il est retiré du "flux" du code html : son positionnement sera le même quelle que soit l'emplacement de la balise dans le code du conteneur parent, quel que soit sa fraternité.
Le bloc est placé par rapport à son parent s'il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n'est positionné, il se réfère à la page entière, balise html).

En absolue, le bloc est généralement placé à l'aide des propriétés "top" et "left" par rapport au coin supérieur gauche du parent.
Si les valeurs top et left sont inexistantes, le bloc apparait là où il est déclaré ce qui peut servir pour placer correctement dans la page des éléments superposés.

A noter que le positionnement relatif est un peu le trublion du groupe : c'est une forme de positionnement qui laisse l'élément dans le flux normal (donc dépendant et influençant les éléments frères), tout en le décalant à l'aide des propriétés "top" et "left"... mais en ayant l'avantage des éléments dits "positionnés" à savoir qu'il peut servir de parent pour des éléments hors-flux (position absolue par exemple).
Retenons que le positionnement relatif est principalement employé pour appliquer un décalage d'un élément par rapport à sa position "normale".

Quelques exemples :

Deux blocs l'un en-dessous de l'autre avec un espace de séparation :

Partie HTML :

<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>


Et la CSS correspondante :
.bloc1 {
background-color: blue;
height: 50px;
}
.bloc2 {
background-color: green;
height: 50px;
margin-top: 20px;
}

 

Trois blocs côte-à-côte avec un espace de séparation :

Partie HTML :
<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>

<div class="bloc3">blu blu blu</div>


Et la CSS correspondante :
.bloc1 {
background-color: blue;
height: 50px;
width: 100px;
float: left;
}
.bloc2 {
background-color: green;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.bloc3 {
background-color: red;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}

Un bloc contenu dans un autre :

Partie HTML :
<div class="conteneur">
   <div class="bloc">bli bli bli</div>
</div>


Et la CSS correspondante :
.conteneur {
background-color: blue;
height: 100px;
width: 100px;
padding-top: 40px;
}
.bloc {
background-color: yellow;
height: 50px;
width: 50px;
margin-left: 20px;
}

Note : vous noterez l'emploi d'un padding-top et non d'un margin-top en raison du comportement appelé "fusion de marges" (selon cette règle, la marge haute de "bloc" s'applique en fait à son parent "conteneur").

Une image alignée à droite d'un texte :

Partie HTML :
<div class="conteneur">
 <img class="image" src="..." alt="" />
  <p>bla bla bla bla bla bla bla bla bla bla
  bla bla bla bla bla bla bla bla bla bla ...</p>
</div>


Et la CSS correspondante :
.conteneur {
width: 40%;
background-color: yellow;
}
.image {
float: right;
}

Article soumis à licence Creative Commons "by" : Vous devez citer le nom de l'auteur original et mentionner la source (url) de l'article.

Un problème, une question ?

Vous avez des soucis avec ce tutoriel ? Venez en discuter dans le salon Spécifique aux tutoriels et articles du Forum Alsacréations.

---