Positionnez vos boîtes !

Positionnement fixe

L'étape suivante consiste à placer un coupon sur la page du Café Starbuzz indiquant aux clients qu'un café gratuit est offert à qui le clique. Afin d'attirer l'attention des clients, il serait bien que le coupon reste constamment à l'écran quand la page défile. A ce dessein, il convient d'aborder le positionnement fixe.

Comparé au positionnement absolu, le positionnement fixe est assez simple: il permet de déterminer la position d'un élément par rapport à la fenêtre du navigateur et non par rapport à la page. Par conséquent, le contenu fixe restera toujours à la place que vous lui avez assignée et n'en bougera plus même lorsque l'utilisateur fera défiler la page. Prenons donc l'exemple d'un <div> dont l'id est coupon et positionnons-le à 300 pixels du haut de la zone de visualisation et à 100 pixels du côté gauche:

Une fois la règle de style établie, il ne reste qu'à placer l'élément coupon au bas du fichier index.html. Comme il va être positionné, son emplacement dans le XHTML n'aura de conséquence que pour les navigateurs qui ne supportent pas cette fonctionnalité et ce coupon ne mérite pas d'être en haut. De plus, afin d'éviter que l'image cliquable soit entourée d'une bordure, il convient de la styler:

Testez la nouvelle version du site. Réduisez la taille du navigateur pour voir que le coupon reste toujours à la même place quand vous faites défiler la page. Cliquer sur le coupon vous redirige sur la page cafegratuit.html que vous pouvez construire si le coeur vous en dit.

La page est bien mais elle pourrait être plus chouette encore si on décalait le coupon vers la gauche pour donner l'impression qu'il surgit du bord de la page. Pour y arriver, nous allons recourir à un décalage en négatif afin que le côté gauche de l'image soit positionné à gauche du bord de la fenêtre.

Les CSS nous ont donc permis de transformer une page de départ relativement modeste en une page dotée d'une mise en page sophistiquée en quelques opérations.