Team-Masters.com
Que du Gratuit pour Webmasters
Mise en page : Le positionnement flottant avec les CSS
Pour faire de belles mises en page, on peut positionner les boîtes contenues dans une page HTML en utilisant un positionnement flottant à l’aide de la propriété float.
Quand on positionne un élément en flottant, celui-ci est retiré du flux normal du document. Il est positionné ainsi à l’aide de la propriété « float » qui peut prendre les valeurs left ou right.
Comment cela se passe-t-il ? Quand un élément est positionné en flottant, il est retiré du flux normal du document et va prendre place à gauche ou à droite (en fonction de left ou right) du bloc qui le contient : L’élément qui suit la boîte flottante va alors s’écouler dans l’expace laissé libre dans le flux normal en épousant la forme de la boîte flottante. Voyons un exemple du fonctionnement flottant à l’aide du code HTML suivant :
<div>
<p id="first">Un premier paragraphe de texte dans notre exemple</p>
<p id="second">Le deuxième paragraphe de texte avec son blablabla et son charabia il y a même du gloubiboulga, mais il faut reconnaître que c'est quand même bon tout ça !...</p>
</div> Dont le code CSS est :
div {
width: 300px;
height: 200px;
background: yellow;
}
p#premier {
width: 100px;
background: red;
}
p#second {
background: green;
}Ici, rien de plus simple puisque nous n’avons fait qu’afficher les boîtes dans le flux normal : les deux paragraphes sont contenus dans le bloc div et s’affichent l’un en-dessous de l’autre.
Un premier paragraphe de texte dans notre exemple
Le deuxième paragraphe de texte avec son blablabla et son charabia il y a même du gloubiboulga, mais il faut reconnaître que c’est quand même bon tout ça ! On aimerait bien remettre le plat.
p#premier {
float: right;
width: 100px;
background: red;
}Cela donne le résultat suivant :
Un premier paragraphe de texte dans notre exemple
Le deuxième paragraphe de texte avec son blablabla et son charabia il y a même du gloubiboulga, mais il faut reconnaître que c’est quand même bon tout ça ! On aimerait bien remettre le plat. Ah ah aha aha ahah ahahahaha ahahah ahah
La déclaration « float : right » a eu pour effet de pousser le premier paragraphe à droite. Le deuxième paragraphe n’ayant pas eu d’instructions particulières, il se positionne normalement dans le flux au début du conteneur mais s’écoule autour du bloc flottant à droite. On voit ici que par une simple déclaration, on peut retirer des blocs du flux courant et permettre de placer deux blocs côte à côte. Le positionnement flottant peut être utilisé pour placer une photo dans un texte par exemple autour de laquelle s’écoulera le reste du texte.
Le positionnement flottant permet donc le placement de blocs côte à côte, mais attention, n’oublions pas que lorsqu’un bloc est positionné ainsi, il sort du flux normal.
Supposons que nous positionnions maintenant les deux paragraphe en float : left afin qu’ils soient côte à côte sans que le texte du second paragraphe s’écoule autour du premier, et introduisons un troisième paragraphe, quel sera son comportement ? On aura pris soin aussi d’attribuer une largeur deu bloc div à 480px et une largeur du deuxième paragraphe de 200px. Le code HTML :
<div>
<p id="first">Un premier paragraphe de texte dans notre exemple</p>
<p id="second">Le deuxième paragraphe de texte avec son blablabla et son charabia il y a même du gloubiboulga, mais il faut reconnaître que c'est quand même bon tout ça !...</p>
<p id=#third">Un troisième paragraphe qui ne possède pas d'instruction de positionnement autrement dit qui doit se positionner dans le flux normal avec un fond bleu</p>
</div> Voici le résultat :
Un premier paragraphe de texte dans notre exemple
Le deuxième paragraphe de texte avec son blablabla et son charabia il y a même du gloubiboulga, mais il faut reconnaître que c’est quand même bon tout ça ! On aimerait bien remettre le plat. Ah ah aha aha ahah ahahahaha ahahah ahah
Un troisième paragraphe qui ne possède pas d’instruction de positionnement autrement dit qui doit se positionner dans le flux normal avec un fond bleu
p#third {
clear: both;
background: blue;
color: white;
}Le rendu est le suivant :
Un premier paragraphe de texte dans notre exemple
Le deuxième paragraphe de texte avec son blablabla et son charabia il y a même du gloubiboulga, mais il faut reconnaître que c’est quand même bon tout ça ! On aimerait bien remettre le plat. Ah ah aha aha ahah ahahahaha ahahah ahah
Un troisième paragraphe qui ne possède pas d’instruction de positionnement autrement dit qui doit se positionner dans le flux normal avec un fond bleu. Si on lui applique la déclaration clear:both, il ne s’écoule plus autour des flottant dans le conteneur div !
Bon, résumons le fonctionnement du positionnement flottant :
- L’élément est d’abord placé normalement dans le flux courant, au-dessus d’un bloc qui le suit et au dessous d’un bloc qui le précède si ceux-ci existent ;
- L’élément auquel on attribue la propriété float est ensuite "poussé" à gauche ou à droite de son conteneur (un bloc div ou le body de la page par ex.). Alors, les éléments qui le suivent dans son conteneur prennent place autour de lui.
- Un élément positionné en flottant se comporte comme étant de type bloc. On pourra donc positionner des éléments en ligne qui, du fait de leur "nouveau statut" se comporteront comme des blocs et pourront alors recevoir des dimensions et des bordures.
C’est vu ? Pour plus d’exemples sur le positionnement en CSS vous pourrez consulter la rubrique trucs CSS où nous vous donnons des modèles de mise en page dont vous pourrez vous inspirer
3 septembre 2006
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
Les pseudo-classes
