Positionnez vos boîtes !

Faire flotter un élément

La propriété float permet de spécifier la position d'un élément par rapport au flux de la page, c'est-à-dire sans position naturelle. L'élément est alors sorti du flux, ce qui permet, par exemple, de placer une image de manière à ce que le texte dans lequel elle se trouve la contourne. Cette propriété peut prendre les valeurs none, right ou left.

Prenons l'exemple d'un paragraphe identifié à l'aide de l'id incroyable et possédant une largeur de 200 pixels. Comme il s'agit d'un élément de type bloc, il reste isolé. En effet, sa nature veut qu'il soit toujours précédé et suivi d'un saut de ligne. En rajoutant la règle float:right; à cet élément, le navigateur le placera tout à droite de la page et le retirera du flux pour le faire flotter au-dessus de la page. Comme ce paragraphe flottant ne sera plus géré par le flux normal, les éléments de type bloc se comporteront comme si le paragraphe en question n'existait pas et se placeront par conséquent sous l'élément flottant. Quant aux éléments en-ligne, ils respecteront les limites de l'élément flottant en se positionnant autour des bordures qui l'entourent.

En étudiant le résultat obtenu sur le fichier bar.html, nous pouvons donc remarquer que le <div> specialites flotte au-dessus de la page et que tous les autres éléments s'organisent autour de cette section. Notez que les éléments en-ligne respectent les limites des spécialités.

Formater une page en colonnes

Le Café Starbuzz voudrait profiter de vos nouvelles connaissances afin d'améliorer l'ergonomie de son site. Nous avons déjà commencé à y travailler. En effet, il existe une nouvelle version du site téléchargeable ici à partir de laquelle vous allez devoir fournir toutes les mises en pages mais soyez sans inquiétude: vous savez déjà presque tout... Observez la version que nous vous transmettons dans le répertoire starbuzz transmis ainsi que le but à atteindre:

Prenez la peine d'étudier le balisage du fichier index.html. Vous remarquerez que chaque section logique est placée dans un <div>, chacune avec son propre id. Familiariez-vous avec cette structure puis ouvrez la feuille de style starbuzz.css. Vous remarquerez qu'aussi sophistiquée soit-elle, elle s'appuie sur de simples CSS que vous connaissez déjà. Chaque section logique possède son propre ensemble de règles dans lesquelles on joue avec la taille de la police, on ajoute des marges et des espacements. On indique également pour chacune une image d'arrière-plan. Notez le petit effet pointillé pour souligner les liens grâce à une bordure qui remplace le souligné habituel. C'est un très bon exemple d'utilisation de la propriété border affectée à un élément en-ligne.

Pour déplacer l'encadré Machine à café vers la droite et obtenir ainsi une mise en page sur deux colonnes, suivez les étapes données en actualisant à chaque fois la page afin de constater les changements opérés:

• Donnez à l'élément flottant un nom unique en vous servant d'un id. C'est déjà fait, nous l'avons appelé encadre.
• Vérifiez que le XHTML de l'élément se trouve juste en-dessous de l'élément sous lequel il doit flotter. Dans notre cas, déplacez le <div> encadre sous le <div> entete.
• Donnez une largeur de 280 pixels à l'élément encadre puis ajoutez-lui la propriété pour le faire flotter à droite:
  

En testant la nouvelle mise en page du site, vous pouvez constater qu'elle ne vérifie pas tout à fait nos attentes. Le contenu principal et l'encadré sont bien à gauche et à droite mais n'ont pas encore l'allure de deux colonnes. Les images d'arrière-plan des deux sections se chahutent et les deux colonnes n'ont pas de séparation. Finalement, le texte situé en bas de la section principal déborde sous l'encadré ce qui donne encore moins l'impression de deux colonnes...

Gestion des marges

Pour pallier ces différents problèmes de mise en page, nous allons recourir dans un premier temps à une méthode normale qui, loin d'être parfaite, donne des résultats satisfaisants. Puis, nous aborderons une autre méthode permettant de gérer la mise en page en colonnes. Il est important que vous compreniez bien ces techniques afin de les transposer, voire même les adapter si nécessaire.

Si nous donnons au contenu principal une marge de droite au moins aussi large que l'encadré, le contenu s'étendra presque jusqu'à cet encadré. Il y aura une séparation entre les deux et comme les marges sont transparentes et ne laissent pas voir l'image d'arrière-plan, on ne verra que la couleur de fond, ce qui est l'effet souhaité.

Comme la largeur du contenu de l'encadré est de 280px, ses marges verticales de 10px chacune et l'espacement entre l'aire du contenu et la bordure de 15px, il s'en suit que la largeur totale de l'encadré est de 330px incluant les 10 pixels de sa marge gauche qui fournira la séparation entre les deux colonnes (appelée «gouttière»). Ajoutez donc une marge droite de 330 pixels dans la règle #principal du fichier starbuzz.css, enregistrez ce fichier et rechargez le fichier index.html. L'encadré flotte sur la droite, il s'est placé le plus à droite possible et n'est plus dans le flux normal, il flotte en haut de la page. La section principale occupe quant à elle toute la largeur de la fenêtre du navigateur mais la marge de droite, qui est de la même largeur que celle de l'encadré, en réduit le contenu.

Lors de votre test, vous avez peut-être constaté un léger problème: élargir la fenêtre du navigateur fait passer le pied de page sous l'encadré. En effet, l'encadré n'est pas dans le flux et de ce fait, le pied de page ignore sa présence. Si l'aire de contenu de la partie principale est trop courte, le pied de page remonte... Que faire ? Il suffit dans ce cas d'appliquer la propriété clear. Cette dernière, qui peut prendre les valeurs none, left, right ou both, permet de spécifier si l'élément peut admettre un élément flottant sur un de ses côtés. Par exemple, si clear prend la valeur right, l'élément est positionné en-dessous de tout élément flottant sur sa droite:

Ajoutez la propriété clear dans la règle pieddepage du fichier starbuzz.css puis rechargez index.html. Vous constaterez que quelle que soit la largeur du navigateur, le pied de page ne déborde plus et reste sous l'encadré. Nous pourrions encore améliorer cette mise en page de telle sorte que les deux colonnes soient de la même hauteur. En effet, dans l'état actuel, il y a un écart entre le contenu principal et le pied de page (lorsque la fenêtre du navigateur est large) ou bien un écart entre l'encadré et le pied de page (lorsque la fenêtre du navigateur est à sa largeur normale). Il n'est malheureusement pas facile de régler ce problème et nous ne le ferons pas dans cette section.

Mises en pages adaptatives et fixes

Dans un deuxième temps, nous allons intervertir les rôles respectifs de l'encadré et de l'aire principale de contenu du site. Celle-ci sera dotée d'une largeur fixe et flottera, pendant que l'encadré viendra en habillage du contenu. Pour conserver l'allure en deux colonnes, nous reprendrons la même technique de marges. Avant de toucher aux CSS, ouvrez le fichier index.html et déplacez le <div> encadre sous le <div> principal. Ensuite, modifiez comme suit les règles encadre et principal:

Finalement, changez la valeur de clear à left dans la règle de pieddepage afin d'isoler le pied de page de l'aire principale de contenu. Rechargez la page index.html dans votre navigateur puis agrandissez et réduisez la fenêtre afin d'étudier tous les cas de figure. Quand l'encadré s'élargit, l'aspect est médiocre: en effet, les encadrés servent souvent de menu de navigation et sont moches lorsqu'ils s'élargissent.

Les mises en page que nous avons vues jusqu'ici s'appellent toutes designs adaptatifs par leur propension à occuper toute la place dans la fenêtre du navigateur, quelle que soit sa taille. Cette adaptation à la dimension du navigateur permet à l'internaute de profiter pleinement de la taille de son écran. Néanmoins, il est quelquefois important de verrouiller une mise en pages afin que celle-ci ne soit pas altérée par un redimensionnement. Nous parlons alors d'un design fixe dans la mesure où il verrouille les éléments de telle sorte que ces derniers soient fixes et ne puissent bouger, évitant ainsi les soucis liés au redimensionnement des fenêtres.

Passer à un design fixe ne demande qu'un simple ajout dans le XHTML et une nouvelle règle dans les CSS. Ajoutez un élément <div> avec un id contenuentier. Comme son nom l'indique, ce <div> va inclure tout le contenu de la page. Placez la balise ouvrante <div> avant le <div> entete et la balise fermante après le <div> pieddepage. Ce <div> servira à contraindre à 800 pixels de large, la taille de tous les éléments qui s'y trouvent:

En testant la nouvelle version du site, nous constatons que le nom, design fixe, n'est pas usurpé: rien ne bouge lorsque le navigateur est redimensionné. En effet, le <div> contenuentier mesure 800 pixels de large quelle que soit la taille du navigateur. Comme tous les autres éléments sont imbriqués dans ce conteneur, ils tiendront dans cet espace de 800 pixels.

Le design fixe a des avantages mais il peut être laid quand la fenêtre du navigateur est très large. En effet, dans ce cas, un espace vide apparaît sur le côté droit. Pour pallier à ce désavantage, il est possible de recourir au design fluide. Ce design verrouille la largeur du contenu tout en le centrant dans la fenêtre du navigateur:

Il existe d'autres moyens en CSS pour résoudre notre problème de mise en pages. Nous allons de ce pas vous montrer une autre technique qui permet de créer une page sur deux colonnes, tout en conservant le contenu du fichier XHTML dans le bon ordre et en limitant les débordements des designs adaptatifs. Il faudra tout de même accepter quelques compromis.