Positionnement en CSS

Le positionnement en CSS

Nous avons appris qu'il y a deux types d'élément : in-line et block. Nous savons aussi que les inline peuvent être contenus dans des blocks alors que l'inverse n'est pas possible. Jusqu'à présent, le CSS n'a jamais cessé de nous apporter des nouvelles astuces. Cette fois-ci, il nous montre un autre moyen de différencier les deux types d'élément. Il s'agit de ce que l'on appelle le flux.

Le flux désigne l'ordre d'affichage par défaut des éléments. Par défaut, le navigateur affiche les éléments selon leur ordre d'apparition dans le code source. Une des propriétés remarquables d'une balise de type inline c'est le fait de ne pas créer un retour à la ligne. Par conséquent, les éléments du type inline s'affichent par défaut les uns à la suite des autres sur la même ligne. D'où leur désignation en anglais : inline qui signifie en ligne.

Code CSS (commun aux deux types d'affichage) :

.vert {


background-color:green; /* vert */


}



.rouge {


background-color:red; /* rouge */
}



.jaune {


background-color:yellow; /* jaune */
}

Code XHTML :

<span class="vert">tout sur</span>
<span class="rouge">la même</span>
<span class="jaune">ligne</span>

A l'inverse les types block s'affichent les uns en dessous des autres comme les mots japonais. Avant et après l'affichage d'un élément du type block, il se crée automatiquement un retour à la ligne. Exemple :

Code XHTML :

<div class="vert"> block1 ligne1</div>
<div class="rouge"> block2 ligne2</div>
<div class="jaune "> block3 ligne3</div>

Différentes propriétés CSS nous permettent de manipuler cet ordre de positionnement. C'est ce que nous allons voir dans la suite.

Changer le type

Une des possibilités de manipulation des positionnements est par exemple celle de changer les types des éléments. La propriété CSS pour modifier les types des éléments est display (='affiche'). Pour changer un élément de type block en inline il suffit de mettre

Code CSS (commun aux deux types d'affichage) :

Display :inline;

Et pour faire l'inverse, il suffit de mettre

Code CSS (commun aux deux types d'affichage) :

Display :block;

Généralement on voit que les titres s'affichent les uns à la suite des autres comme dans l'exemple suivant.

CSS commun aux deux types d'affichage :

Code CSS (commun aux deux types d'affichage) :

.vert {


background-color:green; /* vert */


}



.rouge {


background-color:red; /* rouge */
}



.jaune {


background-color:yellow; /* jaune */


}

Code XHTML :

<h1 class="vert">Titre vert </h1>
<h1 class="rouge">Titre rouge </h1>
<h1 class="jaune">Titre jaune </h1>

Ceci est parfaitement normal puisque la balise p est de type block.

Comme on est partisan du surréalisme, cherchons toujours l'extraordinaire avec le CSS. Appliquons maintenant la propriété display à ces mêmes titres pour voir ce que ça donne quand on change de type. On a juste à rajouter display : inline à la balise p. Et on aura les 3 paragraphes vert rouge jaune sur la même ligne

Code CSS (commun aux deux types d'affichage) :

.vert {


background-color:green; /* vert */
}



.rouge {


background-color:red; /* rouge */
}



.jaune {


background-color:yellow; /* jaune */


}



/* à rajouter*/
h1{


display: inline;


}

Code XHTML :

<h1 class="vert">Titre vert </h1>
<h1 class="rouge">Titre rouge </h1>
<h1 class="jaune">Titre jaune </h1>