Problème à signaler:


Télécharger Cours CSS : Positionnement



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Table des Matières

Le positionnement en CSS

Changer le type

Positionnement absolu, fixe et relatif

Positionnement relatif

Positionnement absolu

Positionnement Fixed

 

 

 

 

 

 

 

 

 



 

 

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, leCSS 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.

 

 

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>

 

 

La propriété CSS position permet de changer le comportement d'affichage des blocs. La valeur par défaut de cette propriété est static qui définit l'affichage normal. Mais nous nous pencherons plutôt vers les autres propriétés qui s'avèrent intéressantes :

  • position:relative;
  • position:absolute;
  • position:fixed;

 

On a dit que le flux définit l'ordre d'affichage par défaut des éléments. En positionnant de façon relative un élément, on ne le retire pas du flux. Il suit toujours la règle normale des positionnements. En mettant position:relative ; l'élément se déplace simplement par rapport à sa position normale.

 

Code CSS :

.relatif{
background-color: yellow;
border: 2px solid black;
position: relative; 
left: 50px;
top:10px;
}

 

Code XHTML :

<p> Ceci est un paragraphe normal.<span class="relatif"> Block relatif</span> Pourquoi ce texte "block relatif" est-il décalé? parce que c'est relatif; </p>



 

 

Avec le positionnement absolu, l'élément est détaché complètement du flux. Sa

position n'est plus définie par rapport à la normale. Si la page est considérée comme une sorte de repère, l'élément sera placé par rapport à ce repère suivant les coordonnées définies. Les propriétés bottom, left, right ou top définiront ses positions comme suit :

  • left : par rapport à la gauche de la page
  • right : par rapport à la droite de la page
  • top : par rapport au haut de la page
  • bottom : par rapport au bas de la page

Le positionnement absolu nous donne alors une possibilité plus étendue au niveau du placement des blocks. Grosso modo, il nous permet de placer un block à n'importe quel endroit de la page que ce soit en haut à droite, ou en bas à gauche, ou etc.

 

 

La propriété position:fixed pourrait nous être avantageuse dans certains cas. Un petit rappel, comme d'habitude : quand nous avons étudié les fond, le background-attachment:fixed nous a permis de ne pas bouger le fond même si on fait défiler la page. L'idée du positionnement fixe est identique.

On place un élément sur la page, il y reste visible même si on fait défiler la page. Un cas très pratique est le cas des menus. Si on veut par exemple qu'un menu reste visible quand le visiteur parcourt la page, on le met en position fixe sur une partie de la page.

Cependant, il y a quand même un petit souci. Certains navigateurs non conformes aux standardsCSS2 ne prennent pas en compte cette propriété. A tout problème il y a une solution. Mais ce thème ne sera pas abordé dans ce tutoriel. Si vous êtes confronté à ce problème, on vous laisse le soin de trouver la solution en question.

La dernière propriété c'est la position:inherit (CSS2) qui permet de dire que l'élément en question hérite de la propriété position de son parent. Si la position du parent est de type relatif, l'élément concerné sera aussi positionné de façon relative.



 



1480