XHTML & CSS - Positionnement
Ce tp est inspiré du livre « XHTML et CSS » de Jean Engels et du dépliant « Mémento CSS » de Raphaël Goetter.

Le principe du positionnement est de définir l‘emplacement des boîtes générées pour chaque élément XHTML présent dans le code de la page. Il existe plusieurs schémas de positionnement en CSS 2. Le positionnement selon le flux normal (ou flux du document, ou flux courant) : c'est le positionnement par défaut opéré par les navigateurs. Lorsque aucun positionnement n’est spécifié, les éléments se placent dans la page selon : 1. L’ordre dans lequel ils apparaissent dans le code XHTML ; la première balise sera la première à se placer sur la page et ainsi de suite. D’où une notion de flux. 2. Leur nature (bloc ou en-ligne) 3. Les marges internes (padding) et externes (margin) permettent d’espacer et de positionner chaque élément par rapport aux autres tout en restant dans le flux. Positionnement dans le flux …avec marges

Bloc Bloc suivant

parent

Margin-top Margin-left Bloc avec décalage

Bloc suivant parent
…avec décalage (position relative)

top left Bloc relatif Bloc suivant

parent

Le positionnement relatif se fait dans le flux normal : en effet associé aux propriétés top, left, right et bottom il permet de décaler un élément tout en restant dans le flux. Les éléments frères suivants ne seront pas influencés par ce décalage, d’où la possibilité de superpositionner des éléments (propriété z-index pour définir l’ordre de positionnement). La syntaxe : sélecteur {Position :relative; left:valeur; top:valeur; right:valeur; bottom:valeur;} Rmq : Il n’est pas nécessaire de préciser les 4 valeurs.

G.Charpentier - 4/12/09 -

Page 1 sur 4

Exercice 1 Ouvrez ex1-relatif.htm, cette page est sans positionnement (flux courant). C'est-à-dire que les éléments s'affichent selon l'ordre d'apparition dans le code XHTML et selon leur nature (bloc ou en-ligne) Positionnez les images et le paragraphe de manière relative. •