oujood.com

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

Ce tutoriel montre comment on peut utiliser la technique des flottants pour réaliser un type de mise en page, en largeur fixe ou fluide
Float est une propriété de positionnement CSS. Pour comprendre son objectif et son origine, nous pouvons nous tourner vers la conception d'imprimés. Dans une mise en page imprimée, les images peuvent être placées dans la page de telle sorte que le texte s'enroule autour d'elles selon les besoins. C'est ce que l'on appelle communément et à juste titre le text wrap.
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

search |

Les flottants

La technique que nous allons voir, est celle des 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 la propriété css 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 HTML que nous devons taper dans un premier temps :
Code : HTML

Sélectionner le code

<!Doctype html>
<html>
<head>
<style>
.imageflottante{
float: left;
padding:10px;
}
div{width:500px;}
</style>
</head>
<body>
<div>
<p><img src="http://www.oujood.com/img/1tpe14102.jpg" 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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.
Sed pulvinar proin gravida hendrerit lectus. Sed egestas egestas fringilla phasellus. Ut placerat orci nulla pellentesque dignissim enim sit amet. Ut consequat semper viverra nam libero. Blandit massa enim nec dui nunc mattis enim. Dignissim enim sit amet venenatis urna cursus eget. Eget arcu dictum varius duis at. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim.
Volutpat blandit aliquam etiam erat. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Id volutpat lacus laoreet non curabitur gravida arcu ac tortor. Elementum nibh tellus molestie nunc non blandit. Quis commodo odio aenean sed. 
Scelerisque eleifend donec pretium vulputate. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Sem integer vitae justo eget magna fermentum iaculis. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum.
Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Arcu felis bibendum ut tristique. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Lectus proin nibh nisl condimentum id venenatis. Dolor morbi non arcu risus quis varius quam quisque.
Sapien faucibus et molestie ac. Pulvinar proin gravida hendrerit lectus a. Blandit cursus risus at ultrices mi tempus imperdiet nulla malesuada. Tellus orci ac auctor augue mauris. Accumsan sit amet nulla facilisi morbi tempus.
</p>
</div>
</body>
</html>


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

La propriété css float va nous permettre de réaliser le disign de notre site et c'est l'objet du chapitre suivant

Par carabde 10 mars 2014

chapitre précédent     chapitre suivant



Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

fonction hebrevc, hebrevc

Convertit un texte logique hébreux en texte visuel, avec retours la ligne

Les fonctions de js

Les fonctions de js

fonction trim, trim

Supprime les espaces (ou d'autres caractères) en d but et fin de chaîne



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci