Positionnez vos boîtes !

Positionnement absolu

Il existe une technique CSS qui permet de positionner les éléments avec une grande précision. Elle se nomme positionnement absolu et peut être utilisée pour résoudre d'autres problèmes de mise en page que celui du formatage sur plusieurs colonnes.

Revenons aux fichiers XHTML et CSS avec lesquels nous avions commencé cette section dont une copie intacte se trouve dans le répertoire absolu du dossier que vous avez précédemment téléchargé. L'extrait de CSS suivant a pour objet de positionner en absolu le <div> encadre:

Quand un élément est positionné en absolu, le navigateur le retire du flux. Il le place en fonction des valeurs qui sont attribuées aux propriétés top et right (ou bottom et left). Dans notre cas, l'encadré se trouvera à 100 pixels du haut de la page et à 200 pixels de son côté droit. Les éléments, qui sont en-dessous, pourvu qu'ils soient dans le flux, ignorent les éléments empilés au-dessus d'eux qui sont régis, eux, par un positionnement absolu. C'est la différence avec les éléments flottants dont les limites sont respectées par le contenu en-ligne des éléments dans le flux. Les éléments absolu n'ont aucun impact sur les autres éléments.

Remarquons qu'avec la propriété float, vous pouvez toujours extraire un élément du flux et choisir de le mettre à gauche ou à droite mais c'est au navigateur que revient l'ultime décision de son emplacement. Comparez cela à la valeur absolute de la propriété position: cette dernière indique au navigateur la position exacte qu'il doit donner aux éléments. Il est également possible d'utiliser la propriété position avec la valeur fixed. Ce type de positionnement place alors l'élément à un endroit relatif à la fenêtre du navigateur et non à la page, ce qui engendre que les éléments fixes ne bougent jamais. Finalement, notez que la mesure du positionnement se fait souvent en pourcentage ce qui donne l'impression que le positionnement varie selon la largeur de la fenêtre.

Nous allons créer pour Starbuzz une page sur deux colonnes en recourant au positionnement absolu. Voici comment procéder:

• Positionnons le <div> encadre en absolu:
  
• Donnons au contenu principal une grande marge pour que l'encadré la recouvre:
  

Avant de passer à l'épreuve de test, réfléchissons à la manière dont les éléments cohabitent avec l'encadré en position absolue:

Nous retrouvons malheureusement le problème du pied de page: lorsque le navigateur s'élargit, l'encadré recouvre le haut du pied de page. Nous ne pouvons plus compter cette fois sur la propriété clear puisque les éléments qui sont dans le flux ignorent l'existence de ceux positionnés en absolu. Dans ce cas, un compromis serait de donner à la marge de droite du pied de page la même taille que celle de l'aire principale de contenu:

Le pied de page ne se trouve désormais que sous le contenu principal et ne remonte plus sous l'encadré. Ce n'est pas la meilleure solution mais elle est acceptable. En résumé, nous retiendrons que la raison d'être des CSS est de séparer la structure du style, une mission qu'elles remplissent à la perfection. Grâce à elles, le XHTML reste propre et peut être lu avec toutes sortes de navigateurs (dont les lecteurs d'écran ou les navigateurs en mode texte). Cela signifie aussi que les CSS ne sont pas à proprement parler un langage de mise en pages. Elles fournissent un certain nombre d'outils qui permettent d'arranger et de positionner les éléments dans des éléments XHTML. Le résultat sera fonction de l'environnement dans lequel la page est visualisée. Redimensionner le navigateur pour que sa fenêtre soit ultra large pourrait bousculer la mise en page. Nous avons vu précédemment plusieurs techniques permettant de créer des mises en pages sur deux colonnes. Aucune d'entre elles n'est parfaite, elles impliquent toutes des compromis. Nous noterons uniquement que le flottant est la plupart du temps considéré comme la solution la plus adaptée aux mises en pages sur plusieurs colonnes.

Afin de montrer à ces clients qu'il a été nommé «Torréfacteur de l'année», Starbuzz désire placer l'image d'une coupe sur sa page web, au milieu de l'en-tête.

A ce dessein, nous allons faire appel au positionnement absolu que vous connaissez. Nous commençons par ajouter un <div> sous l'en-tête puis lui associons une règle de style. Afin d'être sûr que le <div> encadre ne passe pas par-dessus l'image de la coupe, il est possible d'utiliser la propriété z-index. Cette dernière indique le niveau d'empilement de l'élément associé.

Remarquons que les propriétés left, right, top et bottom sont définies relativement à l'élément ancêtre positionné le plus proche. Dans notre cas, il s'agit de la page elle-même mais il se peut qu'il s'agisse d'un autre élément.