Cours XHTML/CSS > Positionnement

Il existe plusieurs moyens de positionner des éléments en CSS.

Différents positionnements possibles

Dans le fil du texte

Positionnement par défaut

C'est le positionnement le plus simple à utiliser : on se sert en fait des propriétés de marge de l'objet à positionner. On l'utilisera par exemple pour positionner notre zone "contenu".

Pour spécifier les marges on utilise soit :

Les 4 propriétés correspondant aux 4 côtés

margin-top
margin-bottom
margin-left
margin-right

Lorsqu'on précise les 4 on préfèrera la possibilité suivante

La propriété simplifiée margin

On renseigne alors tour a tour les valeurs de marge du haut, de la droite, du bas, de la gauche. On tourne dans le sens horaire en commençant par le haut.Les valeurs sont séparées par un espace.

Exemple : marge en haut de 100px et à gauche de 50px.

p {
    margin:100px 0 0 50px; 
}

Absolu

Dans la feuille de style on note position : absolute

Le positionnement absolu permet de placer un élément dans la page (ou dans le premier élément parent déjà positionné) en fonction des coordonnées dans la page

Les coordonnées de l'element dans le premier parent positionné se renseigne par les propriétés :

top : distance du bord haut de l'élément au bord haut du parent
bottom : istance du bord bas de l'élément au bord bas du parent.
left : istance du bord gauche de l'élément au bord gauche du parent.
right : istance du bord droit de l'élément au bord droit du parent.

Un élément positionné en absolu se détache du texte : attention au chevauchement.

Exemple : Une div positionnée absolument

Relatif

Dans la feuille de style on note position : relative

Les coordonnées son relative à l'endroit où devrait se trouver l'élément. Ce sont les mêmes propriétés que le positionnement absolu.

Des éléments positionnés en relatif peuvent se chevaucher.

A utiliser principalement pour positionner un objet enfant en absolu : pour être le premier parent positionné. On ne change alors pas les propriétés left, right ...

Exemple : la deuxième div a exactement les mêmes propriété CSS que la première, mais elle est située dans une div positionnée (en relatif). Page exemple

Fixé

Dans la feuille de style on note position : fixed

Il n'est pas supporté par IE6, je n'en parle pas plus.

Flottant

Dans la feuille de style on note float : left ou right. On utilise aussi clear : left right ou both pour réinitialiser la propriété.

Ce positionnement permet de faire entourer un objet (typiquement une image) par le texte qui suit. L'élément sera a gauche ou a droite selon qu'on a choisi float:left ou float:right.

Exemple : L'image est positionnée en float right

Exercice

Positionnez les éléments de votre page pour qu'elle ressemble à la page finale en modifiant votre feuille de style. Remarque : ce sont les grandes parties que l'on a identifiées précédemment que vous devez positionner, en plus de l'image.
Indiquez la largeur (propriété width) du div menu à 150px, et la hauteur de la div header (propriété height) à 100px;
Centrez le texte du titre avec la propriété "text-align:center" + une largeur de la div à 100%. De même pour le pied de page
Indiquez un alignement justifié pour le texte avec la propriété "text-align:justify;"
Adoptez une couleur d'arrière plan pour l'en-tête de #FCC212 (vous pouvez en choisir une autre).
Spécifiez les marges hautes des éléments h1 et p uniquement à l'intérieur du div header à 5px et 0 pour la marge basse
Validez votre feuille de style Validateur CSS

Résultat final : Page attendue

Session 2 : Page attendue