LE MODE FLOTTANT

COMPRENDRE LE POSITIONNEMENT DES ÉLÉMENTS EN CSS

Les tableaux utilisés pour la mise en forme, ont toujours été déconseillés. Par contre, l'utilisation correcte de chaque balise (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS va petit à petit devenir indispensable.

Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des balises (faussement nommées "calques" en général), ce qui les rend souvent peu compatibles et peu pratiques.

Voici comment positionner les éléments en CSS de façon optimale, bien que résumé schématiquement.

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être, 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 POSITIONNEMENT DANS LE FLUX NORMAL

position en flux 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

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

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.

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;
 }

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

Récapitulatif. Attention à bien comprendre le fonctionnement du positionnement flottant :

L'élément est d'abord placé normallement dans le flux. Donc si un autre élement bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.

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

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;
}

positionnement en flux

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;
}

positionnement flottant
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;
}

imbrication

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;
}

positionnement flottant

CE QU'IL FAUT RETENIR

Cette propriété "float" définit le flottement d'une boîte à gauche, à droite ou pas du tout. On peut l'appliquer à tous les éléments générant des boîtes sauf si elles sont en position absolue. Cette propriété ne bénéficie pas de l'hérédité.

Valeurs admises

- left : l'élément génère une boîte de bloc qui flotte à gauche et le contenu s'écoule sur son flanc droit en commençant en haut (en fonction de la valeur de la propriété "clear").
- right : identique à "left" mais en inversant la gauche de la droite.
- none : la boîte ne flotte pas. (valeur par défaut)

Ainsi avec "float" on peut dans beaucoup de cas, définir dans le conteneur si l'élément suivant doit s'aligner à droite ou à gauche. (s'ils ne sont pas en position absolue faut-il rappeler.)

Si la valeur est none, l’élément se place selon l'ordre du code source généré. De plus dans les navigateurs ne reconnaissant pas les CSS, il est important de savoir que la boîte flottante sera de même présentée dans le flux normal et normalement avant la boîte qui pourrait la suivrait.

Pour arreter le mode floatant, utilisez l'attribut : clear: both, ou clear:left, sinon vous aurez des problèmes d'affichage, car nulle Partie vous aurez stopper ce flux.

Pour toute remarque, question ou critique constructive,
n'hésitez pas à me contacter via Facebook ou à m'écrire un email :
francois point duarte gmail point com

page