23/11/14
Les éléments flottants en CSS
Comment obtenir la présentation ci-dessus ?
Ce document contient une partie navigation à gauche du texte principal.
Le texte principal SUIT LE CONTOUR de l'image de droite : LES PARAGRAPHES S'ARRÊTENT AUTOMATIQUEMENT AU PORTRAIT (en PAO on appelle ce comportement l'habillage d'une image par un texte).
Les régles CSS permettent cette mise en page en introduisant une nouvelle propriété : le flottement des éléments. Dans l'exemple la boite img contenant le portrait "flotte".
Principe
Attention : Les règles CSS sur le flottement sont très précises ; pour faire les tests sur les exemples qui suivent utiliser les navigateurs Firefox, Chrome ou Safari.
Tout élément CSS dispose d'une propriété appelée float. Cette propriété a trois valeurs possibles: left, right, none. La troisième valeur est la valeur par défaut. Lorsque cette propriété a une des deux premières valeurs, on dit que l'élément est flottant.
Attention : un élément flottant a automatiquement un affichage de type bloc (display:block; on peut donc utiliser les propriétés width et height) et sa largeur par défaut définie à "auto" mais ici auto signifiera une valeur minimale.
Exercice
Prenez le dossier SobreMe.zip, le document html est fourni. Mettez la photo juste avant le texte "maquetacion web". Attention ne créez pas de nouveau paragraphe pour la photo, elle doit se trouver dans celui du texte (Mettez des bordures à toutes les boites d'éléments pour bien les visualiser).
Vous constatez que le paragraphe qui contient l'image a grandi en hauteur, sa bordure encadre l'image (comportement CSS normal, l'élément img est un élément en ligne remplacé, l'image est traitée comme un caractère). Remarquez aussi que l'espace entre deux paragraphes successifs est du aux marges de l'élément p.
Exercice : Dans notre document, quel est le conteneur de l'élément img ?
Rendons l'élément img flottant à droite. Pour cela vous pouvez faire une règle CSS pour la balise img.
La règle s'écrit: img {float: right;}
Définition: un élément flottant est placé par rapport à son conteneur; le conteneur est son ancêtre le plus proche de type bloc (C'est dans ce dernier que l'élément flotte).
Observations sur l'exemple :
- L'élément flottant ("This float...") est décalé à gauche jusqu'au bord de son conteneur (le paragraphe p qui contient la balise de cet élément : "some sample..."), mais reste au niveau horizontal de sa balise. Dans l'exemple ci-contre, la balise p entourant le paragraphe flottant est au niveau de la lettre (X) marquée ici dans le paragraphe conteneur.
- La dimension en hauteur de ce conteneur p ne tient plus compte du flottant ; remarquez que ce paragraphe est moins haut que le paragraphe flottant. Donc le flottant déborde sur les paragraphes suivants.
- Les boites des paragraphes suivants ("The second paragraph...") occupent aussi toute la largeur de leur conteneur (ici body) mais leur contenu est repoussé par le flottant. Remarquez que les bordures de ces boites passent sous le flottant.
Exercice : Deplacez la balise de l'élément flottant dans le code html de "Sobreme" et remarquez les variations du niveau horizontal de l'élément en fontion de sa position dans le code; remarquez aussi la hauteur du bloc conteneur (en vous guidant sur les bordures). Changez les paramètres de la boite (marges, espacements, ...)
Exercice : Réalisez la mise en page de la partie droite de l'exemple SobreMe (sans tenir compte du menu de navigation à gauche).
Flottement et dimensions des boites
On peut faire flotter n'importe quel élément quel que soit son contenu, par exemple un contenu de type texte comme dans l'exemple précédent.
On va "détourner" la propriété float.
Nous allons maintenant rajouter à notre exemple Sobreme la mise en forme du menu de navigation. Ce menu est visible à gauche sur l'image de la page web. Il est balisé comme une liste. Une technique utilisée en CSS pour mettre des éléments "bloc" cote à cote est d'en rendre certains flottants.
Rendez "flottant à gauche" l'élément de navigation.
Quel est le conteneur du menu flottant ? Si vous n'avez pas mis les marges à zéro, vous verrez un décalage par rapport aux bords du conteneur ; supprimez ce décalage.
Observations:
- Ce n'est que le contenu des autres éléments du document qui est repoussé par le menu flottant, pas leurs boites (leurs bordures le prouvent).
- La boite du menu a pris par défaut la largeur minimale nécessitée par son contenu (ici les boites li des items du menu).
Un élément flottant est traité en CSS comme un élément de type bloc ; vous pouvez donc controler ses propriétés de boite par les règles CSS des blocs ; mais par défaut sa largeur et sa hauteur sont déterminées par son contenu.
Nous pouvons donc mettre des marges au menu et ainsi controler l'apparence générale:
- En mettant une marge haute le menu est plus bas
- En mettant une marge gauche, le menu est plus à droite
- On peut aussi utiliser les propriétés de remplissage
Cette manière d'utiliser le flottement permet de mettre deux éléments cote à cote ; nous avions déjà obtenu ce type de mise en page en utilisant des marges négatives : dans notre cas, par exemple, nous aurions pu envelopper le texte principal (de "Sobre me... à "Vicandi") par une balise DIV et ensuite lui donner une marge haute négative pour la "remonter" ainsi qu'une marge gauche positive pour la décaler vers la droite.
Chaque technique a ses avantages et inconvénients
Remarque :On peut éviter de faire flotter le menu en utilisant l'affichage inline-block pout mettre les deux parties cote à cote (essayez).
Entrainement: flottement
Pour continuer la mise en page de l'exemple SobreMe, nous souhaitons laisser un espace vertical entre le texte principal et le fond marron du menu ; il nous faut donc décaler vers la droite les paragraphes de texte.
solution 1 : Donner aux paragraphes concernés une marge ou un remplissage gauche. (mais de combien ?)
solution 2 : Donner au menu flottant une marge droite.
solution 3 : Créer un élément DIV encadrant tout le contenu principal et lui donner une marge gauche.
solution 4 : Créer le même DIV que ci-dessus et le faire flotter lui aussi.