Savoir utiliser et positionner les calques (div)

Prérequis : connaissance de base des feuilles de style CSS, connaissance des balises HTML

Avec la dépréciation des tableaux, l'utilisation correcte des calques (balises div) va petit à petit devenir indispensable. Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des calques, ce qui les rend souvent peu compatibles et peu pratiques. Voici comment se servir de cette balise div de façon optimale, bien que résumé schématiquement.

1. Les balises de type BLOC (“block”) comme les balises <p>, <ul>, <li>, <div>, <h1>…<h6>,…
2. Les balises de type EN LIGNE (“inline”) comme <a>, <strong>, <em>, <span>, <img>,…

1. Les blocs se placent toujours l'un en-dessous de l'autre (saut de ligne). Par exemple : une suite de paragraphes ou une liste
2. Les inline se placent toujours l'un à côté de l'autre. Par exemple: la mise en gras d'une partie de texte à l'aide de la balise <strong>

1. Une balise bloc peut contenir une (ou plusieurs) balise bloc et/ou inline, et peut avoir une dimension (largeur, hauteur définies)
2. Une balise inline ne peut contenir QUE une (ou plusieurs) balise inline, et n'a pas de dimension à proprement parler

Une mise en page se fera donc à l'aide de balises blocs, la balise <div> étant la plus indiquée pour cet usage. La balise <div> est une balise neutre servant de conteneur, de zone. Elle désigne une boite rectangulaire invisible que l'on peut configurer à souhait (position, couleurs, tailles,…)

Par défaut, un bloc se place en haut à gauche de son conteneur (ce dernier pouvant être un autre bloc, une cellule de tableau, le body,…) et prend automatiquement toute la largeur de ce conteneur.

A partir de là, il est simple de positionner un bloc au sein de son conteneur grâce à l'utilisation des propriétés de marges.

Par exemple, pour placer un bloc jaune de 100x100px à 15px à partir de la gauche et 200px à partie du haut du conteneur :

<style type="text/css">
<!--
.bloc {
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin-left: 15px;
  margin-top: 200px;
  } 
-->
</style>

Note : il n'est nullement obligatoire d'utiliser le pixel pour placer son bloc; n'importe quelle unité est valable (%, em, auto,…)

La propriété FLOAT permet de positionner un bloc à gauche ou à droite dans un conteneur (et non-plus l'un en-dessous de l'autre). Le reste du conteneur occupera alors l'espace laissé libre.

L'utilisation courante consiste à aligner une image à gauche ou à droite d'un texte de contenu : Partie HTML :

<div class="conteneur">
   texte bla bla bla
   ....
   <img class="gauche" alt="..." src="..." />
</div>

Et la CSS correspondante :

.gauche {
float: left;
} 

NOTE : lorsqu'il y'a des éléments dont certains sont flottants, il est toujours préférable de placer ces éléments dans un conteneur commun.

Il est possible de cumuler les propriétés Float pour obtenir plusieurs blocs côte à côte.

Cette propriété est largement utilisée par défaut sur les logiciels WYSIWYG comme Dreamwever. C'est en partie à cause de cette utilisation abusive que les “calques” ont acquis une mauvaise réputation.

En effet, le positionnement absolu ou relatif a des désavantages du fait de sa rigidité : il ne permet pas (ou difficilement) l'adaptation du site aux différentes résolutions la plupart du temps.

Attention cependant : cette rigidité n'est que fictive et due aux valeurs fixes données en général par les logiciels comme Dreamweaver. On peut très bien positionner en absolu en pourcentage ou en em. On peut également très bien centrer un site avec des positions absolues. Il faut simplement comprendre comment il fonctionne et ne pas se contenter des positionnements “à la dreamweaver”.

Sachez également que c'est le seul moyen de superposer deux blocs (avec la propriété z-index)

Lorsqu'il est en position absolue ou relative, le bloc est dit “positionné”. Il est retiré du “flux” du code html : son positionnement sera le même quelle que soit l'emplacement de la balise dans le conteneur. Le bloc est placé par rapport à son conteneur s'il est lui-même positionné, ou alors par rapport à la page entière (<body>).

En position relative, la position est dépendante de la position de l'élément parent (conteneur), mais la hauteur est prise en compte. Là où se trouvera la balise <div> sera généré un espace de type bloc vide correspondant à la hauteur de ce <div>. C'est un moyen de placement assez déroutant parfois.

En absolue, le bloc est généralement placé à l'aide des propriétés “top” et “left” par rapport au coin supérieur gauche du conteneur. Si les valeurs top et left sont inexistantes, le bloc apparait là où il est déclaré ce qui peut servir pour placer correctement dans la page des éléments superposés sans avoir de zone vide crée comme avec les positions relatives.

Partie HTML :

<div class="conteneur">
   texte bla bla bla
   ....
   <img class="gauche" alt="..." src="..." />
</div>

Et la CSS correspondante :

.conteneur {
position: absolute;
left: 30px;
}

.gauche {
position: absolute;
left: 0;
} 

Pour résumer à propos des différents positionnements : Les différents positionnements sont :

• soit “position: relative”
• soit “position: absolute” (ou “fixed” qui ne fonctionne pas sur IE)
• soit “float”
• soit aucune position précise et des marges pour placer l'objet

Chaque positionnement est différent des autres, on ne peut cumuler deux positionnements pour le même objet.

Deux blocs l'un en-dessous de l'autre avec un espace de séparation : Partie HTML :

<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>

Et la CSS correspondante :

.bloc1 {
background-color: blue;
height: 50px;
}
.bloc2 {
background-color: green;
height: 50px;
margin-top: 20px;
} 

Trois blocs côte-à-côte avec un espace de séparation : Partie HTML :

<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>
<div class="bloc3">blu blu blu</div>

Et la CSS correspondante

.bloc1 {
background-color: blue;
height: 50px;
width: 100px;
float: left;
}
.bloc2 {
background-color: green;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.bloc3 {
background-color: red;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
} 

Un bloc contenu dans un autre : Partie HTML :

<div class="conteneur">
   <div class="bloc">bli bli bli</div>
</div>

Et la CSS correspondante

.conteneur {
background-color: blue;
height: 100px;
width: 100px;
}
.bloc {
background-color: yellow;
height: 50px;
width: 50px;
margin-left: 20px;
margin-top: 40px;
}

Une image alignée à droite d'un texte :

Partie HTML :
<div class="conteneur">
 <img class="image" src="..." alt="" />
  <p>bla bla bla bla bla bla bla bla bla bla
  bla bla bla bla bla bla bla bla bla bla ...</p>
</div>


Et la CSS correspondante :
.conteneur {
width: 40%;
background-color: yellow;
}
.image {
float: right;
}

Spécial : Un calque centré horizontalement :

Pour centrer horizontalement un calque (ou un site web) en CSS, il suffit de donner les caractéristiques suivantes au calque :

Partie CSS :
.conteneur {
margin-left: auto;
 margin-right: auto;
}

Il suffit ensuite de placer le reste du site dans conteneur.et votre site sera centré proprement.

Très simple, me direz-vous ! Petit hic : Internet Explorer qui est buggué ne comprend pas cette syntaxe logique et il faut tricher avec lui.

Pour que ça fonctionne sous IE, il faut aligner le texte de façon centrée dans le body (c'est stupide, mais c'est IE).

Donc :

Partie CSS :
body {
text-align: center;
 }

Il faudra ensuite rétablir l'alignement texte dans le conteneur, ce qui donne au final :

Partie CSS :
.conteneur {
margin-left: auto;
margin-right: auto;
text-align: left; /* on r?blit l'alignement normal du texte */
}

Note : veillez à donner une largeur au bloc conteneur, sinon il ne sera pas centré !

UN MOT SUR LA SEMANTIQUE : sachez utiliser chaque balise à bon escient !

• Il est souvent inutile de faire des imbrications multiples de <div>, ceux-ci ne servant qu'à délimiter des zones de page
• Evitez d'utiliser les balises <table> pour la mise en page de votre site : ils ne sont pas fait pour ça mais pour des données tabulaires et statistiques
• Utilisez les balises <h1>…<h6> pour vos titres et non des balises <p> améliorées
• Utilisez les listes <ul> <li> pour vos menus, car leur utilisation est tout à fait appropriée pour ça