Profession Webmaster -

On se souvient qu'on ne doit dimensionner que des balises de types blocs, DIV par exemple...

Retour aux boites

Une boite de type conteneur (DIV, H1, ...) possède 3 bords : l'espace entre le contenu et le bord (padding), la bordure en elle même (border), et l'espace entre le bord et l'extérieur (margin).

Notez que les dimensions (width et height) sont comptées entre les bords, et ne prennent donc pas en compte la marge...

Il est possible de spécifier les tailles, couleurs et aspect de chacune, en spécifiant également les côtés concernés... Soit en nommant les côté concernés (border-left, margin-top...) soit en spécifiant un nombre d'unité différents (margin : 20px 10px; signifie par exemple que haut & bas seront à 20px, et gauche et droite à 10px).

Figure 1 - Etudiez les effets...
DIV {
   border-left   : 12px solid #FF0000;
   border-right  : 12px dotted #00FF00;
   border-top    : 12px dashed #0000FF;
   border-bottom : 12px double #FF00FF;
   padding : 30px ;
   margin : 20px 10px;
}

Art du placement

Il est théoriquement possible de construire ses mises en page de manière précise en utilisant le placement des éléments, DIV en tête. Sur le papier, positionner chaque élément en fonction de ses coordonnées (left, top) et en différentes couches (z-index) est intéressant. D'expérience, c'est beaucoup moins idyllique, car d'une part les outils pour vous y aider ne sont pas encore véritablement au point, et d'autre part les navigateurs assez capricieux... Mais pour des besoins ponctuels, pourquoi pas...

Assez parlant d'un point de vue théorique, nous nous bornerons à glisser un exemple...
Deux DIV de couleurs différentes, placés à l'écran...

Figure 2 - Faites varier les valeurs...
<HTML><HEAD><STYLE type="text/css">
   #bleu {
      background-color:#8080FF;
      left: 50px; top: 50px;
      width: 150px; height: 150px;
      position: absolute; z-index: 1;
   }
   #vert {
      background-color:#80FF80;
      left: 80px; top: 80px;
      width: 150px; height: 150px;
      position: absolute; z-index: 2;
   }
</STYLE></HEAD><BODY>
   <DIV id="bleu">BLEU</DIV>
   <DIV id="vert">VERT</DIV>
</BODY></HTML>

Présentation

Supports de cours

Et aussi...

Dimension et position

Dimensions

Retour aux boites

Art du placement