positionnement en CSS

Mise en page et CSS

Notions de base et exemples

Bien maîtrisée, la mise en page par CSS peut permettre une souplesse formidable lors de la création de votre site Internet. En séparant totalement le contenu de sa présentation, vous aurez la liberté de faire évoluer le design de votre site Web en toute simplicité.

Sélection de liens concernant
la mise en page par CSS

Ces liens pointent vers des pages dont les contenus complètent notre article.

Maîtriser le positionnement CSS dans toutes les situations
Cet article d'Alsacréations explique à sa façon les notions de flux, les différents types de positionnement et l'utilisation de la propriété "Float".

Propriété FLOAT,
principales applications
AideNet.com propose plusieurs pages d'exemple illustrant les propriétés "Float" et "Clear"

CSS : comprendre le fonctionnement de float et clear
Le Journaldunet propose plusieurs exemple illustrant cette propriété ainsi que la propriété "clear".

Une mise en page
en 3 colonnes

Un design fluide avec trois «colonnes», grâce au positionnement flottant sur AlsaCreation

Exemples de mise en page
Developpez.com propose plusieurs types de mises en page classiques et explique comment les obtenir.

«Calques»
et feuilles de style
Le coin des expert propose une explication trés claire et illustrée d'exemples sur la notion de "calque" en CSS.

"Overflow"
et mise en page

Avoir des blocs avec ascenseurs à l'intérieur d'une page Web est parfaitement possible. Cette page explique même coment leur attribuer un fond fixe.

Les règles de la page ci-contre doivent absolument être maitrisées si vous souhaitez créer un site Web dont la mise en page est définie par des styles CSS.

Introduction à la mise en page par les CSS

Les CSS permettent de gérer deux aspects relativement distincts de la présentation de vos pages :

  1. La présentation des textes, en jouant sur la taille, la couleur, l'interligne, le type de caractère, la graisse, etc.
  2. La mise en page, en gérant la disposition des principaux élements (en-tête, menu, pied de page, etc.) et de leurs contenus.

Ce deuxième point est sans aucun doute le plus complexe à maîtriser. Pour vous permettre d'en faire le tour et de réaliser les designs évolutifs que permettent les CSS, nous allons aborder les notions nécessaires une par une :

  1. La notion de "flux"
  2. Le dimensionnement des blocs
  3. Les marges internes et externes
  4. Le positionnement par éléments "flottants"
  5. Les positionnements statiques, absolus, fixes et relatifs

1- La notion de "flux"

Le "flux", c'est l'ordre d'affichage des divers éléments qui composent une page Internet.

Par défaut, les navigateurs présentent les éléments dans l'ordre où ils se trouvent dans le code source. Les mots sont placés les uns derrière les autres, jusqu'à atteindre la largeur de la page. Quand il n'est plus possible de s'étendre en largeur, le navigateur retourne à la ligne et recommence ses alignements.

Lorsque le navigateur rencontre un élément "bloc", il retourne à la ligne, affiche l'élément bloc puis retourne à nouveau à la ligne pour disposer le reste du contenu.

Si l'utilisateur modifie la largeur de la page, le navigateur recalcule la disposition de tous les éléments contenus dans la page afin de s'adapter à la nouvelle largeur disponible (à moins que la largeur de page ne soit fixée par des instructions particulières).

Cette description du flux correspond au schéma "standard" d'une page Web. Les CSS permettent de gérer une trés grande variété d'exceptions à ce schéma de principe et vous permettront par exemple :

2- Le dimensionnement des blocs

a) Dimensionnement par "width" et "height"

La façon la plus courante d'attribuer une dimension à un bloc consiste à utiliser les propriétés "width" et "height".

Comme la plupart des propriétés CSS, "width" et "height" acceptent de nombreuses façon de se voir attribuer une valeur. Pour plus de détail, consultez notre page sur les unités CSS.

b) Bonne utilisation des pourcentages

Lorsque l'on souhaite positionner deux blocs côte-à-côte, il n'est généralement pas intéressant de combiner une dimension en pourcentage avec une dimension fixe.

largeur variable en pourcentage largeur variable et fixe

Cette deuxième combinaison va en effet inévitablement provoquer une mauvaise utilisation de l'espace disponible sur la page dans la mesure ou la somme des deux tailles de blocs ne sera presque jamais égale à 100%.

Si on souhaite avoir une largeur fixe pour un premier bloc et une largeur variable pour un bloc situé à ses côtés, on utilisera plutôt le "dimensionnement implicite" expliqué ci-dessous.

c) Dimensionnement implicite par top, left, bottom, width

Il est parfaitement possible de définir la taille d'un bloc sans faire appel aux propriétés "width" et "height". Il suffit pour cela de définir la position de chaque bord du bloc en utilisant les propriétés "top" (sommet du bloc), "left" (bord gauche du bloc), "bottom" (base du bloc) et "right" (bord droit du bloc).

Dans cette configuration, la taille du bloc variera bien entendu avec la taille de la fenêtre. On obtient donc un résultat trés comparable à celui d'un dimensionnement en %, à une différence prés : on peut désormais associer côte-à-côte un bloc de largeur fixe et un bloc de largeur variable.

Exemple :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.bloc-fixe {
  position:fixed;
  border:solid 1px;
  width:100px;
  top:10px;
  left:10px;
  bottom:10px;
}
.bloc-variable {
  position:fixed;
  border:solid 1px;
  top:10px;
  left:120px;
  bottom:10px;
  right:10px;
}

HTML
<div class="bloc-fixe">
    Texte du bloc fixe.
</div>
<div class="bloc-variable">
    Texte du bloc variable.
</div>

RESULTAT :
largeur variable et fixe

Dans cet exemple, le bloc ayant pour classe "bloc-variable" n'a pas de propriété "width". Sa largeur sera calculée par le navigateur comme suit :
largeur de la fenêtre - 120px(bord gauche) - 10px(bord droit).

Il est important de faire remarquer que ce type de dimensionnement ne fonctionne pas avec Internet Explorer dans ses versions antérieures à la version 7. Pour obtenir le même résultat avec ce navigateur, vous devrez utiliser les déclarations suivantes :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.bloc-fixe {
  position:absolute;
  border:solid 1px;
  width:100px;
  top:10px;
  left:10px;
  bottom:10px;
}
.bloc-variable {
  position:absolute;
  border:solid 1px;
  top:10px;
  left:120px;
  bottom:10px;
  width: expression((document .documentElement .clientWidth ? document .documentElement .clientWidth : document .body .clientWidth) - (120+10) + "px");
}

HTML
<div class="bloc-fixe">
    Texte du bloc fixe.
</div>
<div class="bloc-variable">
    Texte du bloc variable.
</div>

Cette formulation présente toutefois 2 inconvénients :

Pour pouvoir l'utiliser sans risque, vous devrez donc :

Un exemple de mise en page respectant ces diverses contraintes vous est proposé sur la page "design-fluide.php"

3- Les marges internes et externes

Lorsque vous attribuez à un élément une bordure (avec la propriété "border"), vous visualisez immédiatement les dimensions de cet élément.

Les propriétés "margin" et "padding" vont vous permettre de jouer sur les marges externes et internes de l'élément par rapport à ses dimensions de départ.

marges et padding

En attribuant une valeur au "padding" (marge interne), vous augmentez la distance entre le contenu de l'élément et sa bordure. Si votre élément à des dimensions fixées (cas de certains éléments de type "bloc"), le fait d'augmenter le "padding" à pour effet de diminuer la zone intérieure "utile" de l'élément.

En attribuant une valeur au "margin" (marge externe), vous "éloignez" l'élément de ses voisins à l'intérieur du flux.

Exemples :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.encadre {
  border:1px solid black;
}
.exemple_padding {
  padding:8px;
}

.exemple_margin {
  margin:8px;
}

HTML
<p>Exemple d'expression <span class="encadre"> encadrée<span></p>

<p>Exemple d'expression <span class="encadre exemple_padding"> encadrée avec padding<span></p>

<p>Exemple d'expression <span class="encadre exemple_margin">encadrée avec margin<span></p>

 

NOTE : Si le bloc a une bordure, Internet Explorer 6 (ou ses versions antérieures) place quelquefois l'épaisseur de cette bordure à l'intérieur des dimensions du bloc, alors que les autres navigateurs (y compris Explorer 7) placent cette épaisseur à l'extérieur.

Si vous spécifiez un doctype tel que <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">, vous corrigerez ce défaut.

bord dans IE 5.5bord dans Mozilla

4- Le positionnement par éléments "flottants"

Ce paragraphe illustre comment un élément flottant (notre petite paire de ciseaux) peut se positionner dans un bloc texte. Si vous réduisez ou augmentez la taille de cette fenêtre, vous pourrez constater que le texte "coule" autour de notre image.

Cette proprité CSS est trés simple à mettre en oeuvre et permet de résoudre de trés nombreux problèmes de mise en page. Voici le code permettant de placer une image comme dans le paragraphe précédent :

Code :

<p><img src="ciseaux.gif" style="float:left">Texte du paragraphe .</p>

Voici un autre exemple de code permettant de faire commencer un paragraphe par une "lettrine". C'est une forme de présentation assez commune dans la presse, qui consiste à mettre en évidence la première lettre d'un paragraphe (comme le "V", dans le paragraphe que vous êtes en train de lire).

Code :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.lettrine {
  float:left;>
  font-size:1.9em;
  color:white;
  background-color:black;
  padding-right:5px;
  padding-left:5px;
 
margin-right:2px
}

HTML
<p><span class="lettrine" >P</span>aragraphe avec lettrine.</p>

Dans cet exemple de code, la classe "lettrine" est affectée à la première lettre grâce à l'utilisation d'une balise "span". En dehors de la propriété "float:left;", cette classe comporte une augmentation de la taille de la lettre ainsi qu'un affichage en blanc sur fond noir.

Les propriétés "padding" et "margin" sont utilisées pour parfaire la présentation de la lettrine.

Texte de gauche. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Texte de droite. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

La propriété "float" permet également de mettre en place une présentation sur plusieurs colonnes, comme ce paragraphe l'illustre.

Dans cet exemple, le paragraphe central voit sa largeur réduite à l'aide de propriétés "padding-left" et "padding-right". Les textes de gauche et de droite sont placés dans des balises <div> auxquelles on a respectivement attribuées les propriétés "float:left" et "float:right".

Code :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.bloc-gauche {
  float:left;
  width:70px;
  color:#A0A0A0;
  border-right:solid 1px;
  padding-right:8px;
}
.bloc-droit {
  float:right;
  width:70px;
  color:#A0A0A0;
  border-left:solid 1px;
  padding-left:8px;
}
.bloc-central {
  padding-left:90px;
  padding-right:90px;
}

HTML
<div class="bloc-gauche">
    Texte de gauche. Bla bla bla
</div>
<div class="bloc-droit">
    Texte de droite. Bla bla bla
</div>
<div class="bloc-central">
    Texte central. Bla bla bla
</div>

Utilisation de la propriété "clear" et gestion du bug d'Internet Explorer

La propriété "clear" permet d'interrompre l'alignement de texte provoqué par la propriété "float".

Dans l'exemple suivant :

flottant

Le fait d'attribuer au paragraphe 2 la propriété "clear:left" va avoir pour effet de "sortir" ce paragraphe de l'alignement sur le bloc flottant. Le résultat sera le suivant :

float et clear

Malheureusement, Internet Explorer présente un bug trés pénalisant qui aura pour effet de faire disparaître le paragraphe 1 en cas d'utilisation de la propriété "clear" comme ci-dessus.

La solution consiste à attribuer au paragraphe 1 (ou a tout autre bloc victime de ce bug) une propriété de dimension ou de position. Dès lors, le bloc sera correctement affiché par Explorer.

Une astuce classique consiste à attribuer la propriété "height:1%" aux blocs qui disparaissent à cause de ce bug. Cette propriété règle le problème pour Internet Explorer mais peut générer des problèmes dans les autres navigateurs. Vous devrez utiliser des feuilles de styles alternatives pour qu'Internet Explorer soit le seul à "voir" cette propriété.

A lire aussi : clear et contextes de formatage (blog-and-blues)

Les différentes valeurs de la propriété "clear"

La propriété "clear" accepte 4 valeurs possibles :

  1. clear:none; : annule l'effet d'un "clear" alloué précédemment à l'élément.
  2. clear:left; : l'élément va être décalé vers le bas jusqu'à passer sous l'élément flottant gauche qui provoquait un décalage vers la droite (comme dans notre exemple ci-dessus).
  3. clear:right; : l'élément va être décalé vers le bas jusqu'à passer sous l'élément flottant droit qui provoquait un décalage vers la gauche.
  4. clear:both; : l'élément va être décalé vers le bas jusqu'à passer sous n'importe quel élément flottant provoquant un décalage.

5- Le positionnement par la propriété "position"

La propriété CSS "position" ne doit normalement s'appliquer qu'aux éléments ayant la propriété "display:block" (voir notre page éléments "blocs" et éléments "en-ligne". Lorsqu'on tente de l'appliquer à des éléments en-ligne, les résultats peuvent être plus ou moins étranges selon les navigateurs.

Par défaut, tous les éléments blocs placés dans une page ont la position "static", c'est à dire qu'ils sont inscrit dans le flux de la page. Voici ce que l'on obtient avec les autres valeurs de la propriété "position" :

a) Position:relative;

L'élément reste dans le flux de la page, mais peut se trouver décalé par rapport à la position qu'il devrait normalement occuper. Le décalage est géré par les propriétés top et left.

Exemple :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.decale {
  position:relative;
  left:20px;
  top:20px;
}

HTML
<p>Phrase N°1</p>
<p class="decale" >Phrase N°2</p>
<p>Phrase N°3</p>

RESULTAT

b) Position:absolute;

L'élément ne s'inscrit plus dans le flux de la page, c'est à dire que sa position n'est plus déterminée par les éléments qui le précèdent et que lui-même n'a plus d'influence sur la position des éléments qui le suivent.

Attention tout de même à la confusion que le mot "absolute" peut entretenir : ce positionnement n'est absolu que par rapport au bloc parent. Si un bloc parent se déplace, tous ses enfants positionnés en "absolute" se déplaceront avec lui.

Exemple :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.decalage1 {
  position:absolute;
  border:2px solid black;
  left:10px;top:10px;
  width:150px;height:200px;
}
.decalage2 {
  position:absolute;
  border:1px solid red;
  left:20px;
  top:20px;
  width:100px;height:100px;
}

HTML

Parent

Enfant

<div class="decalage1">
  <div class="decalage2">
    texte
  </div>
</div>

RESULTAT
positionnement absolu

Cette logique ne fonctionne toutefois que pour un bloc enfant positionné en "absolute" à l'intérieur d'un bloc parent lui-même positionné en "relative" ou en "absolute" (comme dans notre exemple).

Si le bloc parent est positionné en "static", sa position n'a plus la moindre influence sur la position de ses enfants. Le point de repère devient alors le coin supérieur de la page et les blocs enfants peuvent "sortir" de leur bloc parent.

Exemple :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.bloc1 {
  position:static;
  border:2px solid black;
  width:150px;height:200px;
}
.decalage {
  position:absolute;
  border:1px solid red;
  left:100px;
  top:20px;
  width:100px;height:100px;
}

HTML

bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>

<div class="bloc1">Bloc parent
  <div class="decalage2">
    Bloc enfant
  </div>
</div>

RESULTAT
positionnement absolu et statique

Pour comprendre ce comportement, il faut considérer qu'un bloc positionné en "static" n'est pas positionné et qu'il ne peut donc servir de repère pour le positionnement de ses enfants.

Seul un bloc parent positionné en "relative", "absolute" ou "fixed" (voir ci-dessous) influera sur le positionnement "absolute" de ses enfants.

Note : le site OpenWeb propose aussi un exemple de mise en page sur 3 colonnes à l'aide de la propriété "absolute" que nous vous invitons à découvrir.

c) Position:fixed;

Tout comme dans le cas précédent, l'élément ne s'inscrit plus dans le flux de la page, c'est à dire que sa position n'est plus déterminée par les éléments qui le précèdent et que lui-même n'a plus d'influence sur la position des éléments qui le suivent.

Ce positionnement permet de placer l'élément à un endroit précis de la page, d'où il ne bougera plus. Contrairement à "absolute", la position d'un élément définie par "fixed" ne dépend plus de la position de ses parents. Elle ne dépend pas non plus de la position de l'ascenseur ou des ascenseurs présents sur la page. En clair, l'élément est réellement "fixé" sur la page à la position indiquée par "left" et "top".

Ce type de positionnement est idéal pour conserver un menu fixe dans une page dont le contenu défile avec l'ascenseur. Malheureusement, la propriété "fixed" n'est pas reconnue par Internet Explorer dans ses versions antérieures à la version 7. En cas d'utilisation de cette propriété, il est donc impératif de prévoir une feuille de style spéciale, destinée à IE 6 et IE 5.5, qui gèrera une mise en page particulière pour ces navigateurs.

Pour plus de détail sur les éléments fixés ou sur les menu fixes, consultez notre page dédiée à ce thème : pseudo-frames en CSS.



 
Le copyright de cette page appartient à css-faciles.
This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional- Vérifier l'orthographe avec RankSpirit et "BonPatron"
Dans cette page :
Raccourcis
Contactliens d'évitement et raccourcis clavierDroits de copieAccueil Imprimer
Aller au menu