HTML et CSS: Les éléments flottants. Position flottante :float

Un élément peut avoir une position flottante à droite ou à gauche avec la propriété float.
C'est-à-dire que le bloc et son contenu peut flotter soit à droite, soit à gauche dans un document (ou dans le bloc conteneur)

Somaire

Les flottants

HTML & CSS

La premiére technique que nous allons voir, ce sont les flottants.
Pour que vous voyiez bien de quoi on parle, voici ce que nous allons apprendre à faire :
Cela permet en gros d'"entourer" un élément (ici une lettre) par du texte. Ca permet d'avoir une jolie présentation.
La propriété qui fait flotter est... float ("flottant"). Cette propriété peut prendre 2 valeurs :
* left : l'élément flottera à gauche.
* right : l'élément flottera... à droite .
L'utilisation des flottants est simple :
1. Vous appliquez un float à une balise.
2. Puis vous continuez à écrire du texte normalement.
On peut aussi bien utiliser la propriété float sur des balises block que sur des balises inline.

Faire flotter une image

Nous allons faire flotter une image. Voici le code XHTML que nous devons taper dans un premier temps :
Code : HTML

Sélectionner le code

	<p><img src="images/mon-image.gif" class="imageflottante" alt="Image flottante" /></p>
	<p>Ceci est un texte de paragraphe, qui doit être écrit à la suite de l'image
	 mais qui l'"entourera" car l'image est flottante.<br />
	Votre texte votre texte votre texte votre texte votre texte votre texte <br />
	votre texte Votre texte votre texte votre texte votre texte votre texte <br />
	votre texte Votre texte votre texte votre texte votre texte votre texte <br />
	votre texte Votre texte votre texte votre texte votre texte votre texte <br />
	votre texte Votre texte votre texte votre texte votre texte votre texte <br />
	votre texte Votre texte votre texte votre texte votre texte votre texte <br />
	</p>

 

Une erreur courante que l'on a tendance à faire, c'est de mettre l'image flottante aprés le texte. Non, il ne faut pas : le flottant doit être avant le texte, qu'il flotte à droite ou qu'il flotte à gauche c'est pareil.
Vous essaierez de mettre la balise <img /> aprés le paragraphe, et vous verrez que ça ne marche plus

Ce qu'il faut bien comprendre maintenant, c'est qu'on a juste besoin de modifier le CSS de l'image, et non pas du paragraphe. Le paragraphe n'a pas besoin d'être modifié, il sera automatiquement placé comme il faut.
Voici le seul bout de code CSS qu'on a besoin de taper, qui permet de faire flotter l'image à gauche :
Code : CSS

Sélectionner le code

		.imageflottante
		{
		   float: left;
		}
	
 

Faire flotter la premiére lettre d'un paragraphe :
Tapez le code XHTML suivant dans votre page html :
Code : HTML

Sélectionner le code

		<p> Nous sommes fin décembre et le juge du tribunal correctionnel est de bonne humeur. Il demande au prisonnier :<br />
		- Quelles sont les faits qui vous sont reprochés ? <br />
		- On me reproche d'avoir fait mes achats de Noöl trop tôt! <br />
		- Mais ce n'est pas un crime ça. Et comment ça, trop top ! <br />
		- Ben, avant que le magasin n'ouvre...
		</p>
	
 

Et tapez le code suivant dans le fichier css :
Code : CSS

Sélectionner le code

		p:first-letter /* Je veux que la premiére lettre de mes paragraphes... */
		{
		   float: left; /* Flotte à gauche */
		   font-size: 3em; /* Fasse une hauteur de 3 lignes */
		   font-weight: bold;
		}
	
 

Vous pouvez changer la couleur de la police, ajouter une marge à droite etc... dans ce code css.

Stopper un flottant

Quand vous mettez en place un flottant, le texte l'"entoure", ça on l'a compris.
Mais comment faire si vous voulez qu'au bout d'un moment le texte continue en dessous du flottant ? On pourrait faire plusieurs <br /> à la suite, mais ça serait pas pratique ni trés propre...

Il existe en fait une propriété CSS (sans blague) qui permet de dire : "Stop, ce texte doit être en dessous du flottant et non plus à côté". C'est la propriété clear qui peut grosso modo prendre 3 valeurs : * left : le texte se poursuit en dessous aprés un float:left;
* right : le texte se poursuit en dessous aprés un float:right;
* both : le texte se poursuit en dessous, que ce soit aprés un float:left; ou aprés un float:right;

On utilisera toujours le clear:both, qui marche aprés un flottant à gauche et aprés un flottant à droite.
Code : HTML

Sélectionner le code

		<p><img src="../images1/mon-image.gif" class="imageflottante" alt="Image flottante" /></p>
		<p>Ce texte est écrit à côté de l'image flottante.</p>
		<p class="dessous">Ce texte est écrit sous l'image flottante.</p>
	
 

Code : CSS

Sélectionner le code

		.imageflottante
		{
		   float: left;
		}
		.dessous
		{
		   clear: both;
		}
	
 

On applique un clear:both; au paragraphe que l'on veut voir continuer sous l'image flottante.

Position absolu, fixe et relatif

Il existe 3 façons de positionner un block en CSS :
* La Position absolu : il nous permet de placer un block n'importe où sur la page.
* La Position fixe : c'est pareil que le Position absolu, mais cette fois le block reste toujours visible, même si on descend plus bas dans la page. C'est un peu comme le background-attachment:fixed.
* La Position relatif : c'est le plus compliqué des trois. En gros, ça nous permet de déplacer un block par rapport à sa position normale.

La Position absolu, fixé et relatif fonctionne aussi sur des balises de type inline comme <img />
Vous verrez qu'on l'utilise plus souvent sur des balises block que sur des balises inline.
On utilise la propriété CSS position à laquelle on donne une de ces valeurs :
* absolute : Position absolu.
* fixed : Position fixe.
* relative : Position relatif.

Le Position absolu

Pour effectuer une Position absolu, il faut taper :
position:absolute;
Il faut ausi dire où on veut que le block soit positionné sur la page.
On va réutiliser 4 propriétés CSS:
* left : position par rapport à la gauche de la page.
* right : position par rapport à la droite de la page.
* top : position par rapport au haut de la page.
* bottom : position par rapport au bas de la page.

On peut leur donner une valeur en pixels, comme "20px", ou bien une valeur en pourcentage, comme "30%".
Si on écrit par exemple :
position:absolute;
right:0px;
bottom:0px;
Ce qui veut dire que le block doit être positionné tout en bas à droite (0 pixels par rapport à la droite de la page, 0 par rapport au bas de la page).
Pour le coup, on va utiliser la balise universelle <div> comme suit.
Code : HTML

Sélectionner le code

		<p>
		Ceci est un paragraphe normal.<br />
		Oui, mais comme on ne peut prendre le temps à la légére, il faut bien se choisir et choisir bien les saisons des moissons.On n'acouche pas d'un chef d'oeuvre en même temps que de son ébauche.La certitude du génie lui fait savourer sa patience et que dire de ces vieux distraits qui meurent jeunes. Temoin Michel-Ange qui laisse un oeuvre inachevée.</p>
		<div>Block positionné</div>
	
 

Vous avez un paragraphe suivi d'un block div qui contient un peu de texte.
Maintenant, ajoutons du CSS pour positionner où on veut notre block div :
Code : CSS

Sélectionner le code

		div
		{
		   background-color: #229966;
		   border: 1px solid #002200;	   
		   position: absolute;
		   left: 15px;
		   top: 20px;
		}
	
 

J'ai mis un fond vert et une bordure pour qu'on repére le block.

Comme vous le constatez, le block se met au-dessus du paragraphe. Il le masque. Vous pouvez mettre votre block où vous voulez sur la page, mais il faut faire attention à ce qu'il ne masque pas de texte.
Autre exemple:
Code : CSS

Sélectionner le code

		div
		{
		   background-color: yellow;
		   border: 1px solid green;	   
		   position: absolute;
		   right: 50%;
		   bottom: 20px;
		}
	
 

Remarque :
Si vous positionnez un block A en absolu, et à l'intérieur de ce block vous positionnez un autre block B en absolu, la Position ne se fera plus par rapport à la fenêtre mais par rapport au block A.

La Position fixe

Le Position fixe fonctionne sur tous les navigateurs, sauf sur Internet Explorer 6 et les versions antérieures.
Au lieu de faire position:absolute;, on va taper position:fixed; dans notre CSS. Comme tout à l'heure.
Le position:fixed; est particuliérement utile pour faire un menu qui reste toujours visible :
Code : CSS

Sélectionner le code

		div
		{
		   background-color: yellow;
		   border: 1px solid green;
		   width: 150px;
		   height: 250px;	   
		   position: fixed;
		   right: 40px;
		   top: 60px;
		}
		p
		{
		   width: 300px;
		}
	
 

La Position relatif

Plus délicat, le Position relatif peut vite devenir une grosse prise de tête si on n'y fait pas trés attention. Personnellement, je ne l'utilise pas beaucoup.
Le Position relatif sert généralement à faire des "ajustements".
Prenons par exemple un texte important, situé entre 2 balises <strong>.
Pour commencer, je le mets sur fond rouge pour qu'on puisse mieux le repérer :
Code : CSS

Sélectionner le code

		strong
		{
		   background-color: red; /* Fond rouge */
		   color: yellow; /* Texte de couleur jaune */
		}
	
 

Donc, si vous faites position:relative et que vous appliquez une des propriétés top, bottom, left, right, le texte sur fond rouge va se déplacer par rapport à la position où il se trouve.
Faites, des tests pour bien comprendre.
Prenons donc un exemple : je veux que mon texte se décale de 20 pixels vers la droite et de 10 pixels vers le bas.
Code : CSS

Sélectionner le code

		strong
		{
		   background-color: #220000;
		   color: #0000FF;	   
		   position: relative;
		   left: 20px;
		   top: 10px;
		}
	
 
Par carabde 10 mars 2014

chapitre précédent chapitre suivant