Positionnement et affichage CSS

Elle permet en fonction de la valeur qu'elle prend d'afficher de différentes manières une boîte (balise), un tableau, une liste, etc...

Pour utiliser cette propriété, on utilisera un exemple simple :

balise{
display:valeur;
}

Voici les différentes valeurs de la propriété display en CSS :

Position inline et block :

Par défaut les boîtes (ou balises si vous préférez) en XHTML sont positionnées les unes en dessous des autres (pour celles étant de type block). C'est à dire que si vous tapez le code html suivant, le texte test 2 sera affiché en dessous du paragraphe test et non pas à la suite :

<p>test</p><p>test 2</p>

On peut changer la donne en modifiant le style grâce à la propriété display et une valeur inline.

<p style="display:inline">test</p><p style="display:inline">test 2</p>

Il existe aussi des boîtes de type inline. C'est donc l'inverse qui se produit, et elles sont placées à la suite des autres. Si vous souhaitez les afficher verticalement (les unes en dessous des autres), il faut utiliser la propriété display et la valeur block (display:block).

La position relative :

La boîte en position relative est placée en flux normal (comprendre à la suite du contenu, comme un humain lit un texte) puis décalée horizontalement ou verticalement en fonction des propriétés de la CSS.

Le code est légèrement différent puisque la feuille de style s'occupe du positionnement grâce à la propriété position. Les propriétés left et top permettent respectivement d'indiquer la position par rapport à la gauche puis par rapport au haut de la boîte à positionner.

span{
position:relative;
top:15px;
}

Code HTML :

<p><span>test 2</span></p>

Le contenu de la balise <span> sera rabaissé de 15 pixels.

Cette position permet de s'affranchir du flux normal et de positionner une boîte en fonction de propriétés de positionnement telles que left, top, right ou bottom.

Exemple :

p{
position:absolute;
top:15px;
left:20px;
}

Code HTML :

<p>test de positionnement</p>. Ce paragraphe sera placé à 15 pixels du haut et 20 pixels à gauche de votre document.

En fonction de la valeur de la propriété float (left ou right) on positionne à gauche ou à droite une boîte par rapport au reste de la page. Cette boîte n'est plus dans le flux normal, le contenu de la boîte suivante viendra se placer juste à droite (ou à gauche en fonction de l'inverse de la valeur de la propriété float).

#left{
float:left;
}

Code HTML :

<p id="left">test </p><p>test 2</p>

Le paragraphe test 2 sera affiché à droite de l'autre paragraphe, au lieu d'être affiché en dessous.

Cette propriété très intéressante permet d'empêcher une boîte d'être adjacente à une autre en fonction du côté oû elle se trouve par rapport à celle-ci (et de la valeur de la propriété clear : left, right ou both, qui désigne les côtés concernés par cette interdiction).

Les boîtes sont constituées de :

• une zone de marge (margin)
• une bordure (border)
• une zone de remplissage sans contenu (padding)
• une zone de contenu (qui reçoit les autres boîtes)

On peut le décomposer en ceci :

On définit normalement la largeur du contenu grâce à la propriété width et sa hauteur grâce à la propriété height. le problème est qu'Internet explorer n'interprète pas de la même façon ceci. Pour un navigateur respectant les recommandations du W3C, la propriété width désigne la largeur du contenu seulement (sans les bordures, etc...), tandis qu'Internet explorer l'interprète comme la largeur totale (contenu+padding+bordure).

Exemple d'une boîte :

div{
width:400px;
height:300px;
border:1px solid #CC0000;
padding-left:10px;
}

<div>Test</div>