Définit un en-tête visible d'un élément
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
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.
Nous allons faire flotter une image. Voici le code HTML que nous devons taper dans un premier temps :
Code : HTML
Exemple : Copier le code
<!Doctype html>
<html>
<head>
<style>
.imageflottante{
float: left;
padding:10px;
}
div{width:500px;}
</style>
</head>
<body>
<div>
<p><img src="https://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
.imageflottante{
float: left;
}
Faire flotter la premiére lettre d'un paragraphe :
Tapez le code HTML suivant dans votre page html :
Code : HTML
Exemple : Copier 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
Exemple : Copier 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.
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
Exemple : Copier 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
Exemple : Copier 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.
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.
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
Exemple : Copier 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
Exemple : Copier 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
Exemple : Copier 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.
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
Exemple : Copier le code
div{
background-color: yellow;
border: 1px solid green;
width: 150px;
height: 250px;
position: fixed;
right: 40px;
top: 60px;
}
p{
width: 300px;
}
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
Exemple : Copier 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
Exemple : Copier 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 2014chapitre précédent chapitre suivant