• Samedi 3 janvier 2009 - 11:51:17
• inscrits : 1146840
• connectés : 54676
• questions/jour : 5483
• Taux de réponse : 76.84%

Qu'est-ce qu'une couche?

Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des "couches" contenant des éléments et pouvant être positionnées sur l'écran. Il s'agit en réalité de balises HTML spéciales pouvant contenir elles-mêmes d'autres balises HTML, et dont les attributs sont entre-autres :

• La position par rapport au haut du navigateur
• La position par rapport à la bordure gauche du navigateur
• La largeur
• La hauteur
• Le Z-Index, c'est-à-dire le niveau de superposition de la balise

Les balises DIV, SPAN et LAYER

Les balises permettant de constituer des couches sont les balises LAYER, SPAN et DIV.

La première (LAYER) est une balise spécifique à Netscape Navigator, et dont le fonctionnement est très proche de celle énoncée ci-dessus, c'est-à-dire la superposition de transparents (layer signifie justement couche). Les balises DIV et SPAN sont plus génériques mais sont toutefois mieux supportées par Internet Explorer que Netscape Navigator

La balise LAYER

La syntaxe de la balise LAYER est la suivante :

<LAYER NAME="Nom de la couche" LEFT="Distance au bord gauche" TOP="Distance au haut">

éléments HTML
</LAYER>

<LAYER NAME="IMG1" LEFT="20" TOP="30">

<IMG SRC="image.gif">

</LAYER>

<LAYER NAME="IMG2" LEFT="25" TOP="35">

<IMG SRC="image2.gif">

</LAYER>

Les balises DIV et SPAN

Avec Internet Explorer (versions 4 et supérieures), le positionnement des éléments se fait selon le concept des CSS-P, au moyen des balises DIV et SPAN. Etant donné que le navigateur Internet Explorer 4 est apparu après Netscape Navigator 4, les possibilités "dynamiques" qu'il offre sont plus vaste que celles de Netscape, c'est-à-dire qu'il offre plus d'attributs au niveau de ses balises, pouvant être modifiées par l'intermédiaire d'un code écrit en Javascript après chargement de la page (d'où la notion de HTML dynamique).
Le positionnement grâce aux balises DIV et SPAN est expliqué en détails dans la section HTML 4.0

Avec les balises DIV et SPAN, le positionnement peut se faire de deux façons :

• Le positionnement absolu se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).
• Le positionnement relatif se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent.

<DIV style="position: absolute; top: 99 px;
left: 99 px; visibility : visible;z-index : 2;">

éléments HTML
</DIV>

Récapitulatif des attributs des balises