Cours sur les feuilles de styles CSS (Cascading style sheet)

Cours sur les feuilles de styles CSS (Cascading style sheet)

Notions de boîtes

Les balises DIV / LAYER 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

  • La première (LAYER) est une balise spécifique à Netscape Navigator,
  • Les balises DIV et SPAN sont plus génériques mais sont toutefois mieux supportées par Internet Explorer que Netscape Navigator
  • 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>

  • Ainsi, le positionnement de deux images superposées sous Netscape Navigator (version 4 ou supérieure) peut se faire de la manière suivante
  • Exemple:

<LAYER NAME= »IMG1″ LEFT= »20″ TOP= »30″>
<IMG SRC= »image.gif »>
</LAYER>
 
<LAYER NAME= »IMG2″ LEFT= »25″ TOP= »35″>
<IMG SRC= »image2.gif »>
</LAYER>

  • Avec Internet Explorer (versions 4 et supérieures), le positionnement des éléments se fait selon le concept des CSS-2, au moyen des balises DIV et SPAN.
  • 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.

  • 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>

Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)
Les feuilles de styles CSS (Cascading style sheet) (1,75 MO) (Cours PPT)
Cours sur les feuilles de styles CSS (Cascading style sheet)

Télécharger aussi :

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *