DHTML - La notion de couche

Mai 2016

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


En effet, on appelle ces conteneurs HTML "couches" car il s'agit d'éléments
HTML pouvant être superposés à l'écran comme des carrés
de papier calque et pouvant être déplacés séparément
(chaque calque est repéré par un identifiant unique que l'on définit comme
attribut)
dans la fenêtre du navigateur grâce à du Javascript.
De plus, le z-index définit l'ordre de superposition des calques, c'est-à-dire
quel calque se trouve au-dessus des autres...

Les balises DIV, SPAN

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

Les balises DIV et SPAN

Le positionnement des éléments
se fait selon le concept des CSS-P, au moyen des balises DIV et SPAN.

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 du navigateur ou au coins supérieur gauche de la fenêtre de son parent quand celui ci est en position relative.

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.


La syntaxe des balises DIV/SPAN est la suivante :


<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


<b>Balise<b> <b>Propriété<b> <b>Valeur<b> <b>Description<b>
DIV et SPANpositionstatic
absolute
relative
  • Aucun mouvement par rapport au document
  • positionnement par rapport

au document
  • par rapport à l'élément précédent
leftauto
valeur numérique entière
valeur en pourcentage (%)
  • distance à la bordure gauche automatique
  • distance à la bordure gauche en pixels
  • distance à la bordure gauche en pourcentage
topauto
valeur numérique entière
valeur en pourcentage (%)
  • distance au sommet automatique
  • distance au sommet en pixels
  • distance au sommet en pourcentage
widthauto
valeur numérique entière
valeur en pourcentage (%)
  • largeur automatique
  • largeur de l'élément en pixels
  • largeur de l'élément en pourcentage
heightauto
valeur numérique entière
valeur en pourcentage (%)
  • hauteur automatique
  • hauteur de l'élément en pixels
  • hauteur de l'élément en pourcentage
overflowvisible
hidden
auto
scroll
  • affiche le contenu même s'il est trop grand
  • cache le contenu superflu
  • automatique
  • affiche des barres de défilement
clipauto
bottom
left
right
top
  • découpage automatique
  • découpage en bas
  • découpage à gauche
  • découpage à droite
  • découpage en haut
visibilityinherit
hidden
visible
  • visibilité par défaut
  • caché
  • visible
z-indexauto
valeur numérique entière
  • superposition automatique
  • valeur indiquant la profondeur

Pour une lecture illimitée hors ligne, vous avez la possibilité de télécharger gratuitement cet article au format PDF :
Dhtml-la-notion-de-couche.pdf

Réalisé sous la direction de , fondateur de CommentCaMarche.net.


A voir également

Ce document intitulé «  DHTML - La notion de couche  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.