Liste des Tutoriaux



Initiation au positionnement CSS : 1.flux et position relative

En bref

Par défaut, les navigateurs affichent les boîtes issues du document html dans l'ordre du flux normal. En position relative, un élément peut être décalé verticalement et/ou horizontalement.

Pour représenter le positionnement en flux normal, on peut imaginer le navigateur parcourant (logiquement) la page de code HTML du début à la fin et retranscrivant son contenu au fur et à mesure des balises rencontrées. Comme dans la lecture d'un texte, il procède verticalement, commençant en « haut » de l'écran pour aller jusqu'en « bas », et horizontalement de gauche à droite, sur la totalité de l'espace disponible et nécessaire en largeur comme en hauteur.

Boîte de type bloc en flux normal

Par défaut, les boîtes de type bloc seront affichées dans une succession verticale. Prenons par exemple deux blocs différenciés par leur couleur :

En HTML :

<p class="jaune">Une boîte jaune</p>

<p class="verte">Une boîte verte</p>
    

En CSS :

.jaune {
  background-color: #ffff00;
}
.verte {
  background-color: #00ff00;
}
    

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 1 :

L'un au dessus de l'autre, la boîte bloc rectangulaire jaune et la boîte rectangulaire verte

Le navigateur traite successivement les deux éléments rencontrés. Comme il s'agit d'éléments de type bloc, il aligne la marge gauche de chaque élément sur la marge gauche de l'élément conteneur, c'est à dire ici le bloc conteneur initial.

Les principaux éléments créant des boîtes bloc sont :

  • l'élément div ;
  • les titres h1, h2, h3, h4, h5, h6 ;
  • le paragraphe p ;
  • Les listes et éléments de liste ul, ol, li, dl, dd ;
  • Le bloc de citation blockquote ;
  • Le texte pré-formaté pre ;
  • L'adresse address.

Boîte de type en-ligne

Par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale. Prenons par exemple deux portions de texte différenciées par leur couleur :

En HTML :

<p>
  <span class="jaune">Une boîte jaune</span>
  <span class="verte">Une boîte verte</span>

</p>

En CSS :

.jaune {
  background-color: #ffff00;
}
.verte {
  background-color: #00ff00;
}

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 2 :

De gauche à droite, la boîte rectangulaire jaune et la boîte rectangulaire verte

Les principaux éléments créant des boîtes en ligne sont :

  • l'élément span ;
  • le lien a ;
  • L'image img ;
  • Les emphases em et strong ;
  • La citation q ;
  • La citation cite ;
  • L'élément code ;
  • Le texte entré par l'utilisateur kbd ;
  • L'exemple samp ;
  • La variable var ;
  • Les abréviations et acronymes abbr, acronym ;
  • Le texte inséré ins ;
  • Le texte supprimé del.

Pour résumer le flux normal : c'est un traitement linéaire du contenu de la page. L'alignement des boîtes bloc est vertical ; l'alignement des éléments en-ligne dans les boîtes bloc est horizontal.

Reportez-vous à notre article Boîtes bloc, boîtes en ligne et propriété display, pour en savoir plus sur l'utilisation de la proprieté display des boîtes bloc et en ligne…

La position relative

Le positionnement relatif permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements.

Soit par exemple un positionnement relatif indice qui stipule un décalage vers le haut de 5 pixels et un arrière-plan jaune :

En HTML :

<p>

  Lorem
  <span class="jaune">
    boîte en position relative
  </span>
  ipsum dolor.
</p>
    

En CSS :

.jaune {
  position: relative;
  bottom: 5px;
  background-color: #ffff00;
}
    

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 3 :

Le texte de la boîte jaune se décale de 5 pixels vers le haut par rapport au reste du paragraphe

Pour illustrer le risque de chevauchement, ajoutons un décalage vers la droite :

En CSS :

.jaune {
  position: relative;
  bottom: 5px;
  left: 3em;
  background-color: #ffff00;
}
    

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 4 :

Le texte de la boîte jaune se décale de 5 pixels en haut et de 3em à droite : il déborde sur le texte qui suit

Nous aborderons le second type de positionnement CSS dans initiation au positionnement CSS : 2.position float.


Une question, une remarque ? Écrivez à l'auteur à laurent.denis@openweb.eu.org.





Liste des Tutoriaux

Pour vous accompagner dans l'utilisation de vos kits graphiques, Kitgrafik a sélectionné sur le web d'excellents tutoriaux qui abordent les sujets essentiels. Les tutoriaux sont classés par niveau d'expertise et restent sous le copyright de leur auteurs respectifs, que nous remercions. Pour vous perfectionner et découvrir de nouvelles techniques, nous vous recommandons chaudement cette liste RSS de tutoriaux. Nous cherchons en permanence les meilleurs sites de design et nous concentrons leurs derniers tutoriaux ici : 40 superbes tutoriaux du web (RSS) -- New --

Autres ressources

  1. 40 superbes tutoriaux du web (RSS) -- New --
  2. http://normandlamoureux.com/cours/xhtml
  3. http://www.mammouthland.net
  4. http://fr.selfhtml.org/
  5. http:/fr.html.net/tutorials/css/
  6. http://pompage.net/pompe/listes/