documents

Introduction à la conception graphique Web
— Les flottants —

Les navigateurs s'améliorant, créer des mises en pages avec CSS devient de plus en plus facile. La propriété float représente un instrument fiable dans la panoplie de la mise en pages CSS. Le flottement n'est pas la seule alternative pour créer des mises en page, mais il est apprécié car il survit aux aléas de conception pour des dimensions d'écrans, des résolutions et des navigateurs différents, aussi bien voire mieux que les autres options.

Cet article constitue une introduction aux concepts de base du flottement, il explique comment confiner un élément flottant lorsque celui-ci est plus grand que son conteneur, et il fournit des exemples de mises en pages créées avec des flottants.

Dans tous les exemples, les règles CSS sont logées dans l'en-tête des documents ; étudiez la source de la page pour avoir le jeu complet des règles de style utilisées pour chaque exemple. (Vous remarquerez que les exemples utilisent des mises en pages avec des largeurs en pourcentage, mais vous pouvez faire les mêmes exercices de flottement avec d'autres mesures relatives tels le « em », ou des mises en pages à largeur fixe utilisant le « px »).

Qu'est-ce que le flottement ?

Le flottement retire les éléments du flux normal du document et permet au texte ou aux autres éléments de s'enrouler autour d'eux. Une propriété float équivaut en CSS à ce qui se faisait jadis lorsque nous placions des attributs HTML tels que align="left" ou align="right" dans les éléments. Comme pour l'imprimé, les concepteurs graphiques Web ont besoin d'un moyen de faire s'écouler le texte autour d'un élément dans la mise en pages. Les éléments flottés constituent la solution.

Les éléments peuvent flotter à gauche ou à droite dans leurs conteneurs, mais pas en haut ni en bas.

On peut faire flotter tous les éléments : les images, les listes, les paragraphes, les éléments div et span, les tableaux, les films Flash, les blocs de citations, ou n'importe quoi d'autre dans votre arsenal HTML. L'exemple 1 montre des images résumant l'application ou non de la règle img {float: left;}, essentiellement ce que permet la propriété float. Toutefois, si on utilise d'autres propriétés avec float, nous verrons cela plus tard, il est possible de créer des colonnes, et donc une mise en pages.

Voir l'exemple 1

Je disais que les flottants étaient retirés du flux du document. Le flux du document est simplement l'ordre du contenu dans la source du document. Le navigateur lit le document HTML du haut jusqu'en bas dans l'ordre où les éléments apparaissent dans la source HTML. On peut utiliser CSS pour changer l'apparition des éléments dans le navigateur, sans pour autant changer l'ordre sous-jacent des éléments.

Un zeste de technique : un élément flotté est retiré du flux normal du document et déplacé à gauche (ou à droite) jusqu'à ce que son bord gauche (ou droit) touche le bord gauche (ou droit) de son bloc conteneur. Les autres éléments qui suivent l'élément flotté dans le bloc conteneur lui font de la place, ce qu'on décrit communément par « s'écoulent autour de lui ». Toutefois, l'emplacement de l'élément flotté dans le flux du document importe toujours, car l'écoulement commence avec l'élément, quel qu'il soit, qui suit l'élément flotté dans le code source. Cf. l'exemple 2.

Voir l'exemple 2

Et si l'élément flotté est plus grand que son conteneur ?

L'effet d'écoulement créé par la propriété float est susceptible de poser problème si l'élément conteneur, par exemple un élément div, n'est pas assez grand pour contenir l'élément flotté. Auquel cas, l'élément flotté peut s'étendre au-delà des limites de son élément conteneur et désorganiser le reste de la page.

Ici les éléments flottés seront placés dans des éléments div, ainsi vous pourrez visualiser les conteneurs dans lesquels ils se trouvent, matérialisés par leurs bordures dans les exemples suivants. Dans l'exemple 3, vous voyez une image flottée dans un div dont l'attribut id="noncleared". L'exemple fait appel aux deux règles suivantes :

img {
    float: left;
}
#noncleared {
    border: thin solid #f00;
}

Le div contenant l'image a une bordure rouge qui matérialise les dimensions réelles du conteneur de l'élément flotté.

Voir l'exemple 3

Pour empêcher le contenu qui suit l'élément div, dont l'image flottée déborde, de s'enrouler autour d'elle, nous pouvons utiliser la propriété CSS clear. Les valeurs de dégagement possibles sont clear: left, clear: right, clear: both ou clear: none. Avec clear: left (ou clear: right), on force le contenu après tout ce qui flotte à gauche (ou à droite). Avec clear: both, on force les choses après le flottant quel que soit le côté.

Ajoutons du contenu neuf à la page dans un deuxième div (nommé fort à propos « cleared » — N.d.T. dégagé en anglais) avec cette règle :

#cleared {
    clear: left;
    border: thin solid #00c;
}

L'exemple 4 montre l'effet de la règle clear: left. Le nouveau div ne commence pas tant qu'il n'a pas trouvé un endroit libre de tout contenu flotté à gauche du bloc conteneur (ici le bloc conteneur est l'élément body).

Voir l'exemple 4

Dans la suite de l'article, il y aura plusieurs autres méthodes pour dégager les flottants contenus. Pour l'instant, voyons l'utilisation de la propriété float pour créer une mise en pages.

Peut-on faire flotter toute une mise en pages ?

Les flottants sont des instruments de mise en pages appréciés. La propriété float a gagné sa place de propriété CSS bien-aimée justement parce qu'elle sert à créer des mises en pages.

La propriété float n'est pas une propriété de positionnement dans CSS, seule l'est la propriété position avec les valeurs absolute, relative, fixed et static, en revanche, en combinant les largeurs, marges et flottements, on dispose de propriétés CSS souvent plus fiables en ce qui concerne la mise en pages que la propriété position. On peut créer toutes sortes de mises en pages avec float, qu'elle soit une propriété de positionnement ou non.

Vous pouvez voir une mise en pages simple à deux colonnes réalisée avec la propriété float dans l'exemple 5. Les deux colonnes sont créées en faisant flotter un élément div contraint à une largeur de 70 % à gauche de la page :

#content {
    float: left;
    width: 70%;
}

Les 30 % restants de la page sont remplis par une deuxième colonne (en réalité, un autre div) avec une règle margin-left: 75% pour l'empêcher de filer sous la colonne flottée à gauche.

Lorsqu'on fait flotter un élément, on lui assigne une largeur, à moins de vouloir un contenu au plus près (N.d.T. shrink-wrap). Dans l'exemple 5, si l'élément flotté à gauche n'avait pas de largeur, le flottant rétrécierait à la largeur de son contenu, ici de longues lignes de texte qui recouvriraient le bandeau (N.d.T. sidebar) à droite ; en revanche, s'il y avait là juste une petite image, la largeur du bloc flotté conteneur « content » se réduirait conformément.

Voir l'exemple 5

Remarquez que les 70 % du div de contenu et les 25 % du div de bandeau (100 % moins les 75 % de marge gauche) ne font pas les 100 % de la largeur de la page. Faute d'espacement (N.d.T. padding) dans ces éléments div, les 5 % en sus font office de gouttière entre les deux colonnes. Cela serait particulièrement important si les bordures colorées étaient supprimées dans les exemples. En pratique, vous pourriez utiliser des div faisant 100 % de la largeur puis donner du blanc au texte avec des marges (margin) et des espacements (padding).

Les mises en pages ont pour la plupart une zone d'en-tête et un pied de page. Regardez l'exemple 6. Il comporte de nouveaux éléments div de 100 % comme bloc générique (N.d.T. masthead) et un pied de page (N.d.T. footer). Remarquez que le nouveau div « footer » vient immédiatement sous le div de bandeau. Il a une couleur mauve afin d'illustrer le problème posé.

Voir l'exemple 6

Vous m'avez sans doute précédée en songeant qu'il faudrait utiliser la propriété clear pour la tenue de ce pied de page. On peut ajouter la propriété clear au code CSS contrôlant le pied de page :

#footer {
    background: #ead5ff;
    border: 1px solid #90f;
    clear: left;
}

L'effet de la règle clear est illustré dans l'exemple 7. Le pied de page descend dans la page jusqu'à ce qu'il trouve une place où aucun élément flotté n'est présent au bord gauche de son bloc conteneur. (Dans cet exemple, l'élément conteneur est encore une fois body).

Voir l'exemple 7

Vous voulez un bandeau coloré ?

Les mises en pages à deux colonnes ont souvent une couleur d'arrière-plan pour le contenu et une autre pour le bandeau. Ça peut créer un problème. Avant de vous expliquer comment le résoudre, je vais vous donner un exemple.

Les bordures du div seront supprimées pour accentuer l'exemple. Le div de bandeau reçoit une couleur d'arrière-plan. Regardez l'exemple 8.

Voir l'exemple 8

Le bandeau est presque aussi grand que le contenu dans son div et la couleur d'arrière-plan ne s'étend pas complètement jusqu'en bas de la page. Il existe plusieurs solutions astucieuses et très exploitables, y compris la célèbre solution des fausses colonnes qui utilise une image d'arrière-plan.

Voici une autre méthode pour solutionner ce problème. Elle nécessite d'envelopper tout ce qui est sur la page dans un div conteneur.

Les règles agissantes de l'exemple 9 sont les suivantes :

#container {
    background-color: #dbffc2;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
}

#content {
    float: left;
    width: 70%;
}

#sidebar {
    margin-left: 75%;
}

#masthead {
    background: #ffc;
    border: 1px solid #090;
}

#footer {
    background: #ead5ff;
    clear: both;
    border-top: 2px solid #90f;
}

Voir l'exemple 9

Dans l'exemple 9, les éléments div de contenu et de bandeau sont tous deux vert clair, tous deux laissant transparaître la couleur d'arrière-plan (background-color) déclarée dans le conteneur. Le bloc générique et le pied de page, bien qu'englobés dans le div conteneur, ont des couleurs d'arrière-plan déclarées qui masquent la couleur d'arrière-plan du conteneur.

Nous voulons juste que le bandeau soit vert clair. On ajoute une règle pour créer cet effet. Il suffit de rendre blanc l'arrière-plan du div de contenu :

#content {
    background: #fff;
    float: left;
    width: 70%;
}

Maintenant nous avons deux colonnes colorées individuellement, toutes deux semblant s'étendre complètement jusqu'en bas de la page. Cf. l'exemple 10.

Voir l'exemple 10

Le pied de page est imbriqué dans le conteneur, de sorte que lorsque le pied est réglé avec clear: both, le conteneur s'étire en bas pour l'englober.

Cette méthode présente un inconvénient. Si le bandeau était plus long que le contenu, alors la couleur d'arrière-plan du div de contenu s'arrêterait avant d'atteindre le pied de page.

Et pour trois colonnes ?

Il y a plusieurs façons de fabriquer une mise en pages à trois colonnes avec des flottants. Celle que je vais vous montrer implique l'ajout d'un autre conteneur à la page. Le nouveau conteneur, avec un id valant « innercontainer », englobe le div de contenu existant et le nouveau div de la troisième colonne. Ce nouveau div a un attribut id="innersidebar" (N.d.T. bandeau interne).

Le conteneur « innercontainer » (N.d.T. conteneur interne) aura les règles float: left et width: 75%. Souvenez-vous que nous devons laisser de la place pour le bandeau existant sur la droite :

#innercontainer {
    float: left;
    width: 75%;
}

Nous apportons ensuite quelques modifications à la règle du contenu. Elle sera float: right, et le nouveau div apparaîtra à sa gauche. Les dimensions ont aussi besoin de quelques ajustements pour laisser de la place au nouveau conteneur « innersidebar ». La règle du contenu change pour celle-ci :

#content {
    background: #fff;
    float: right;
    width: 65%;
}

Enfin, ajoutons le nouveau conteneur « innersidebar ». Dans la source du document, il vient après le contenu mais avant le bandeau existant :

    </div> <!-- fin du contenu (content) -->

    <div id="innersidebar">
        ...
    </div>

</div> <!-- fin du bandeau interne (innercontainer) -->

<div id="sidebar">
...

La règle CSS du bandeau interne est la suivante :

#innersidebar {
    float: left;
    width: 35%;
}

J'ai ajouté une bordure noire au conteneur interne « innercontainer » dans l'exemple 11, pour voir où se trouve le nouveau conteneur.

Voir l'exemple 11

J'aime beaucoup cette solution de mise en pages à trois colonnes, elle place le contenu en premier dans le code source, ce qui aide à la fois les utilisateurs de lecteurs d'écran et les robots des moteurs de recherche. Toutefois, elle nécessite deux div conteneurs, ce qui ajoute du balisage non sémantique au document. Les autres mises en pages à trois colonnes imposent souvent un compromis aussi.

Si vous explorez l'Internet à la recherche de mises en pages à trois colonnes avec des flottants, vous trouverez nombre d'autres utilisations des flottants. Dans beaucoup d'entre elles, il faut choisir entre ajouter une pincée de balisage non sémantique ou utiliser des bidouilles. Cela parce que float n'est pas vraiment une propriété de positionnement. Elle a été transformée en instrument de mise en pages par nécessité et par frustration vis-à-vis d'autres moyens de produire des mises en pages en colonnes fiables. Si une majorité de navigateurs devait un jour reconnaître la propriété CSS display: table, beaucoup de problèmes de mise en pages en colonnes se résoudraient plus facilement. (La propriété CSS avec sa valeur display: table diffère de l'élément HTML <table>, lequel sert à formater des rangées et des colonnes de données).

Faites flotter les vignettes

Vous pouvez aligner plusieurs éléments flottés côte à côte pour créer des affichages aussi divers que des barres de navigation ou des galeries d'images. Je vais vous montrer comment créer une galerie de vignettes (N.d.T. thumbnail image gallery).

J'afficherai plein de petites images dans une liste non ordonnée. Chaque élément de liste (li) contient une vignette et une légende. Le comportement normal des éléments de listes (de type bloc) est de descendre pour commencer sur une nouvelle ligne à chaque nouvel élément. J'utiliserai la propriété float pour faire que ces éléments de liste s'affichent comme une galerie de vignettes redimensionnable.

La première étape consiste à donner à la liste non ordonnée toute entière un attribut id="thumb". La règle suivante supprime les puces et les marges par défaut :

#thumb {
    list-style: none;
    margin: 0;
}

Nous stylons ensuite les éléments de liste. La règle float fait que tous ces éléments de liste se placent l'un après l'autre sur une ligne horizontale (comme les mots d'une phrase), en prenant toute la largeur disponible du conteneur :

#thumb li {
    float: left; 
    display: inline;
    width: 75px;
}

La règle width: 75px force le texte de la légende à apparaître sous la vignette, car c'est la largeur exacte des vignettes. Comme vous pouvez le constater dans l'exemple 12, il y a plusieurs autres déclarations dans la règle #thumb li, le reste du CSS sert juste à enjoliver les choses.

Les deux déclarations de règles les plus importantes de l'effet de galerie sont celles de float et de display. La déclaration display: inline est incluse pour éliminer le bogue des marges flottées doubles du navigateur Internet Explorer. (Plus d'informations à propos de ce bogue dans la section « Ressources » à la fin de l'article).

On peut mettre autant de vignettes et de légendes que l'on veut dans la liste, la disposition des rangées et des colonnes créées changera selon l'espace disponible dans le navigateur de l'utilisateur. Pour voir comment ça fonctionne, regardez l'exemple 12 et redimensionnez la fenêtre de votre navigateur.

Voir l'exemple 12

(Dans votre galerie de vignettes réelle, n'oubliez pas d'ajouter des liens vers les images agrandies).

À noter que toutes ces images ont la même hauteur et que toutes les légendes contiennent le même nombre de mots. Si les images ont des hauteurs différentes, ou les légendes des longueurs variables, certains éléments flottés auront des hauteurs différentes. Au lieu d'un ensemble d'images bien alignées, vous auriez des rangées de hauteurs variées qui ne formeraient pas un alignement net.

Une façon de résoudre ce problème est de donner à la règle #thumb li suffisamment de hauteur pour accueillir les éléments les plus hauts. Dans l'exemple 13, j'ai ajouté quelques mots à une légende et changé la règle de hauteur pour height: 11em.

Voir l'exemple 13

Plus au sujet des flottants conteneurs

L'exemple 3 montrait une image flottée qui n'était pas entièrement circonscrite dans son conteneur. Il existe plusieurs moyens de s'assurer que le conteneur circonscrivent complètement les éléments flottés. Les exemples 7-10 utilisaient la propriété clear: both sur le pied de page pour forcer le conteneur à s'allonger assez pour confiner l'élément flotté. Cela fonctionne dans les exemples 7-10 parce que le pied de page se trouve dans le même élément conteneur que le div de contenu flotté, mais on a parfois à confiner entièrement un élément flotté sans ce critère.

L'exemple n14 résume trois méthodes supplémentaires pour confiner les flottants.

Voir l'exemple 14

La première méthode consiste à ajouter un élément non sémantique tel que <div class="clear"></div> après l'élément flotté et à l'intérieur du conteneur. La classe suivante obéit à cette règle :

.clear {
    clear: both;
}

L'inconvénient est bien sûr le petit bout de HTML non sémantique à saupoudrer dans le document.

La deuxième méthode de confinement des flottants utilise la propriété overflow. Le div conteneur reçoit la règle overflow: auto, le forçant à s'étaler pour contenir son sous-élément flottant. Voici un exemple :

#container {
    overflow: auto;
}

Cela fonctionne dans la plupart des navigateurs récents. Les vieux navigateurs Internet Explorer pour Macintosh peuvent afficher une barre de défilement horizontale, le seul inconvénient de la méthode. Pour les versions d'Internet Explorer antérieures à IE7 qui ont un problème avec l'expansion des boîtes (cf. ci-dessous), on obtient le même effet en ajoutant simplement un déclencheur de la propriété hasLayout à la règle de #container. J'ai opté pour #container {zoom: 1;} dans les exemples. Cela ne nuit pas aux navigateurs tel Firefox, qui ne comprennent pas la propriété zoom, et permet à IE6 et plus anciens de bien se tenir.

La troisième méthode illustrée dans l'exemple 14 utilise overflow: hidden. Elle fonctionne presque pareil que la méthode overflow: auto ; il n'y a plus de barres de défilement, mais certains types de contenu, comme les images, risquent d'être tronqués.

À faire des recherches sur les flottants, vous rencontrerez peut-être une autre méthode : la méthode de dégagement facile, qui fait appel à la pseudo-classe :after. Cette méthode nécessite plusieurs bidouilles pour fonctionner avec les divers navigateurs. Puisque la méthode overflow fonctionne bien sans bidouille, je ne vois aucune raison de recourir à une autre méthode qui en dépend.

Utiliser float — Précautions et bogues

Les versions anciennes d'Internet Explorer (6 et moins) peuvent vous asséner le bogue de la marge flottée double. Si une élément a une marge du même côté que celui où il est flotté, IE doublera la marge sur ce côté. On le résoud facilement grâce à une règle display: inline, comme illustré précédemment.

Un autre problème propre à IE est la façon dont ce navigateur traite les flottants (et même tout contenu) plus grands que leur conteneur. Si un élément devient trop large (ou trop haut) pour la largeur et/ou la hauteur assignées à son conteneur, IE étirera la boîte pour l'afficher en entier. Cela peut entraîner les éléments flottants adjacents à disparaître car il n'y a plus de place pour eux pour glisser comme prévu. Il y a plusieurs façons de pallier cela, la plus facile étant overflow: hidden, quoique des contenus puissent être soustraits à la vue dans certaines situations. Cf. la section « Ressources » pour une description détaillée de ce bogue de IE et pour d'autres solutions de rechange.

Comprendre le comportement de présentation de base du flottement expliqué ici vous aidera à appliquer la propriété float dans beaucoup de situations. De plus, vous approfondirez le sujet avec les ressources suivantes. Allez-y et faites flotter.

Ressources

Biographie

Virginia DeBolt en a fini avec tous ses emplois de neuf heure à cinq heure. Maintenant, elle commence son blog vers 5 h 00 du matin, ou dès que le café a fini de passer dans la machine. Lorsqu'elle n'est pas devant son ordinateur, elle se promène, photographie et élucide des romans à mystère. C'est une championne du recyclage qui a installé un plancher écologique en bambou dans son nouveau bureau.

© 1999-2008 yoyodesign.org — Certains droits réservés