Internet
Site Web: fonctionnement, structure et programmation
Le dernier type de positionnement est le positionnement relatif. Au contraire des positionnements absolu et fixe, un élément positionné de manière relative est partie prenante du flux et ce n'est qu'au moment où le navigateur l'affiche qu'il en décale la position. Illustrons ce processus à l'aide du paquet de café de la page Starbuzz. Nous allons la décaler sur le côté pour donner l'impression que les grains de café sortent de la page.
Il serait possible de positionner en absolu ce paquet de café mais il faudrait alors arriver à trouver un moyen de lui réserver sa place sur la page puisqu'un positionnement absolu retire complètement l'élément du flux. Avec un positionnement relatif, il est possible de conserver l'élément dans le flux, de lui garder sa place sur la page et de le décaler.
But: déplacer le paquet de café de 120 pixels sur la droite
Avec un positionnement absolu, le paquet n'est plus dans le flux
Comme toutes les techniques de positionnement peuvent s'appliquer aux éléments en-ligne, il est possible de les utiliser sur des images. Définissons donc une règle de positionnement relatif pour l'image située dans le paragraphe titregrain. Après avoir rechargé la page Starbuzz, vous verrez le paquet de café sur la droite de l'encadré. Le positionnement relatif s'exprime en terme de décalage par rapport au véritable emplacement de l'élément et non avec des coordonnées absolues par rapport au bloc conteneur le plus proche.
Afin de terminer le site de Starbuzz, il ne reste plus qu'à ajouter quelques règles de style au code XHTML du formulaire que nous avions construit dans une section précédente. Comme ce formulaire fait partie du site de Starbuzz, il est donc logique de partir de style de la feuille starbuzz.css pour en créer une nouvelle, styleformulaire.css, et y ajouter les règles qui concernent le formulaire de la Machine à café. Ces CSS ne contiennent rien de nouveau pour vous, aucune règle spécifique pour les tableaux ou les formulaires. Les CSS se trouvent dans le fichier styleformulaire.css du dossier que vous avez précédemment téléchargé.
En parcourant cette nouvelle feuille de style, vous remarquerez qu'elle s'appuie sur la feuille starbuzz.css pour certains styles tout en passant la police de body en sans-serif et en ajoutant l'image d'arrière-plan de Starbuzz et une marge. En ajoutant deux éléments <link> dans le <head> du code XHTML du fichier formulaire.html, vous pouvez lier le fichier à la feuille de style starbuzz.css de la page Starbuzz et à la nouvelle styleformulaire.css. Enregistrez la page et admirez le travail.
Un peu de style suffit à obtenir un résultat spectaculaire !
