Dans le cadre des ateliers précédents, nous avons évoqué les propriétés par défaut du html, en particulier :
- Le positionnement des éléments dans le flux, c'est à dire le positionnement des derniers éléments arrivés sous ceux qui les précèdent.
- La distinction entre comportement de type block et comportement de type inline.
Ces propriétés sont des contraintes pour la mise en page, comme vous avez pu le constater dans le cadre de l'exercice sur l'insertion
d'images dans du texte.
Fort heureusement, le code css met à notre disposition des propriétés qui permettent de modifier les propriétés par défaut du html, ce sont :
- Le positionnement flottant avec la propriété float.
- Les positionnements absolute et fixed qui permettent de s'affranchir du positionnement dans le flux.
- La propriété display qui permet de modifier les comportements block et inline, voire même table.
Pour commencer ce tour d'horizon, nous allons dans cet atelier, nous attaquer au positionnement flottant.
La propriété float peut prendre deux valeurs :
- float : left
- float : right
Cette propriété permet, en respectant certaines conditions, de s'affanchir du flux et de juxtaposer horizontalement des éléments de type block.
float : left aligne les éléments vers la gauche et logiquement float : right les aligne vers la droite.
Vous pouvez remarquer que le comportement par défaut des éléments de type block, équivaut à un flottement de ceux-ci à gauche.
Dans la feuille de style externe, apportons les modifications suivantes à la class .Boites :
- width : 1200px;
- margin : 50px auto;
Toujours dans la feuille de style, créons une class .Gauche :
- width : 260px;
- height : 200px;
- margin : 20px;
- background : #fcf;
Dans le code html, sous <Body> créons un titre <h2>La propriété float</h2> .
Puis ouvrons une <div class="Boites"> dans laquelle nous placerons trois <p class="Gauche">.
CONSTAT : Sans surprise, les trois éléments se placent dans le flux, les uns sous les autres .
Retournons dans la feuille de style et ajoutons à .Gauche, la propriété float : left
DOUBLE CONSTAT :
- Comme promis, les éléments s'alignent horizontalement;
- mais ils sont positionnés à l'extérieur de la bordure de la div.
Explication : les éléments flottants étant sortis du flux, ils n'ont pas d'incidence sur la hauteur de la div.
Une solution (nous en verrons plus loin une autre), consiste à donner à la <div class="Boites"> une hauteur égale à celle des éléments
<p class="Gauche"> soit height : 240px (height:200px + (margin:20px) x 2). Nous ajouterons cette propriété à .Boites
dans la feuille de style.
Dans la feuille de style externe, créons une class .Droite . Elle a les mêmes propriéts dimensionnelles que .Gauche dont elle ne diffère que par le sens du flottement et par la couleur d'arrière plan :
- width : 260px;
- height : 200px;
- margin : 20px;
- background : #cfc;
- float : right;
Dans le code html, ouvrons une nouvelle <div class="Boites"> dans laquelle nous positionnerons deux <p class="Gauche"> et un
<p class="Droite">
CONSTAT : Les trois éléments s'alignent bien comme le laissait prévoir les valeurs de leurs propriétés float respectives.
Dans la <div class="Boites">, ajoutons un second élément <p class="Droite"> et faisons varier les positions de ces quatre éléments
<p > dans le code html.
CONSTAT : La position des éléments dans le code n'a aucune incidence sur leur flottement dans la page.
Dans le style en ligne, ajoutons à deux éléments <p > peu importe lesquels, la propriété border : 4px solid #e0e;
CONSTAT : L'alignement de nos éléments en est un peu perturbé, n'est-il pas?
Explication : La largeur de chacun des éléments <div class="Boites"> est de 300px : (width:300px + (margin:20px) x 2).quatre éléments
tiennent donc dans la <div class="Boites"> dont la largeur est de 1200px. Si l'on ajoute aux éléments <p > une bordure de 4px,
soit 16px sur la largeur de 2 éléments on excède les 1200px du conteneur et le dernier élément est repoussé à la ligne inférieure.
MORALITÉ : Pour maîtriser l'alignement des éléments flottants tant en largeur qu'en hauteur, il faut que le total des dimensions de ces éléments
y compris les marges, les paddings et les bordures éventuels soit égal à la largeur et à la hauteur du conteneur.
Pour assurer de nouveau l'alignement de nos quatre éléments, il suffit donc de diminuer dans le style en ligne, la largeur de ceux qui sont munis d'une bordure de l'épaiseur
de cette bordure, soit width : 252px.
La propriété clear supprime le comportement flottant des éléments qui la précède, et permet de placer à leur suite, sans perturbation, des éléments dans le flux. La propriété clear peut prendre trois valeurs :
- clear : left , qui supprime le flottement à gauche
- clear : right , qui supprime le flottement à droite
- clear : both , qui supprime les flottements à gauche et à droite
Dans la feuille de style externe, copions les class .Boites, .Droite et .Gauche collons les sous les précédentes et renommons les respectivement .Boites2, .Gauche2 et .Droite2. Ces trois nouvelles class diffèrent des précédentes par les propriétés suivantes :
- .Boites2 : Supprimer la propriété height
- .Gauche2, .Droite2 :
- height:350px;
- border:4px solid #e0e;
Dans le code html, sous les exercices précédents, créons un titre <h2>La propriété clear</h2> .
Puis ouvrons une <div class="Boites2"> dans laquelle nous placerons trois éléments <p class="Gauche">.
Sous ces trois éléments, plaçons un élément <p> sans class auquel nous attribuerons en ligne les propriétés :
margin : 0; height : 0; clear : left.
CONSTAT : Les trois éléments <p> s'alignent à gauche et la hauteur de la <div class="Boites">
s'ajuste à celle des éléments <p> dont le flottement est annulé par la propriété clear : left du dernier
élément <p>.
Répétons l'expérience avec :
- Une <div class="Boites2"> dans laquelle nous recopierons les quatre éléments précédent en substituant les class Droite2 à Gauche2 et la propriété clear : right à clear : left.
- Une <div class="Boites2"> dans laquelle nous placerons deux éléments <p class="Gauche">, <p class="Droite">et un élément <p> sans class avec la propriété clear : both.
Nous aurons ainsi expérimenté les effets des différentes valeurs de la propriété clear.
Dans la feuille de style externe, ajoutons les sélecteurs suivants :
- .ImgGauche{
- float:left;
- margin-right:20px;
- }
- .ImgDroite{
- float:right;
- margin-left:20px;
- }
- div, p{
- text-align:justify;
- }
Dans le code html, sous les exercices précédents, créons un titre <h3>Insertions d'images dans du texte</h>img . Puis ouvrons une <div class="Boites2"> dans laquelle nous placerons les images :
- <img class="ImgGauche"src="Images/Espet2.jpg"/>
- <img class="ImgDroite"src="Images/Espets.jpg"/>
Sous ces images plaçons la totalité du texte sur les canyons sous-marins.
CONSTAT : Le texte enveloppe les images.
Dans le code, nous pouvons faire varier les positions des balises <img/>
pour constater l'effet produit sur l'écran.
CONSTAT : Le positionnement des photos par rapport au texte
reste quand même un peu aléatoire.
Dans le code html, ouvrons une <div class="Boites2"> dans laquelle nous placerons deux <p> sans class dans lesquels nous placerons respectivement :
- L'image <img class="ImgGauche"src="Images/Chapon.jpg"/> et les seize premières lignes du texte sur les canyons sous-marins
- L'image <img class="ImgDroite"src="Images/Murene.jpg"/> et les lignes 22 à 30 du texte susdit.
CONSTAT : Si dans le premier élément <p> le texte coïncide avec la hauteur de l'image du chapon (c'est normal
ça a été calculé pour!), dans le second, le texte étant plus court, l'image de la Murène sort des limites de la <div>.
Nous avons vu plus haut les deux solutions possibles pour remédier à ce problème, à vous de choisir.