«Calques»
et feuilles de style

• Introduction
• CSS et Dreamweaver
• Tailles et dimensions
• Blocs et flux naturel
• Les calques :
  — Qu'est-ce que c'est ?
  — Calques «absolus»
      et «relatifs»
  — Calques fixes
  — Positionnement
      et dimensions
  — Empilement
  — Calques et animation
  — Calques et DW2
  
• Les CSS à la main
• Le tour des propriétés
• Animations

Page précédente

Qu'est ce que c'est ?

La notion de «calque» n'existe pas dans les recommandations officielles du consortium W3C sur les feuilles de style. Il s'agit d'une notion qui est née avec les objets LAYER inventés par Netscape avec son navigateur NN4 (objets ensuite refusés par le consortium W3C), puis qui s'est imposée dans la pratique des éditeurs wyziwyg comme Dreamweaver : on appelle «calque» un bloc rectangulaire (contenant n'importe quoi) qui garde une position précise par rapport au début du document, prescrite au pixel près, et cela même si le visiteur redimensionne sa fenêtre ou s'il modifie la taille des caractères. On peut en créer autant qu'on veut ; deux d'entre eux peuvent se superposer partiellement l'un sur l'autre, et on peut choisir lequel sera vu par-dessus l'autre. Enfin, on peut rendre ces calques momentanément visibles ou invisibles et ainsi réaliser diverses animations dans la page.

A titre d'exemple, la page que vous lisez est formée de 4 calques, respectivement pour notre logo, pour le titre, pour le menu et enfin pour le texte de la page et chacun d'entre eux a été positionné individuellement dans la page. On aurait pu les intervertir lors de l'écriture de la page : ces calques ne participent pas au flux naturel du reste de la page (bien entendu, ce flux reprend ses droits à l'intérieur de chacun des calques).

Ces calques reposent sur la conception nouvelle qu'une page serait formée de couches partiellement transparentes empilées les unes sur les autres, celles du dessus masquant en tout ou partie celles du dessous. Dans une couche, le «calque» serait une zone rectangulaire contenant différents éléments (rangés cette fois selon l'ordre du flux naturel), zone qu'on pourrait faire glisser au pixel près par rapport au fond de page — ou d'autres calques. Toutes les propriétés des calques énumérées ci-dessus vont être gouvernées par trois nouvelles propriétés de style :

• position : pour définir le type de calque et le positionner
• z-index : pour décider du niveau du calque dans l'empilement
• visibility : pour rendre le calque visible ou invisible.

Dans Dreamweaver, on accède à ces propriétés dans le volet «Positionnement» de la boîte de dialogue «Définition du style», via les cases respectives Type, Index Z et Visibilité ; mais les possibilités offertes par le style position vont bien au-delà ce qu'en tire le codage automatique de Dreamweaver ; autrement dit, il convient d'élargir la notion de calque au-delà de l'usage qu'en fait Dreamweaver.

(retour au menu)

Calques en position absolue ou relative

Pour faire comprendre la différence entre les «calques absolus» et les «calques relatifs», nous avons préparé deux petites démos en javascript, permettant de transformer les deux boîtes jaunes et mauves ci-dessous en calques si on clique sur leurs liens.

(1) — La boîte jaune, d'abord, passe en position:absolute. Elle se retire totalement du flux naturel du fond de page. Dans ce flux, le présent paragraphe va alors s'enchaîner directement à la boîte mauve et celle-ci (et tout le texte après) va remonter en bloc, pendant que la boîte jaune, passée à l'état de calque passera par dessus. Comme on ne spécifie ni top dans cette démo, ni bottom, cette boîte restera à peu près au même niveau dans la page, mais le right:70px va la positionner à 70 pixels du bord droit de la page. Si on avait ajouté top:58px, le calque serait parti à 58 pixels à partir du haut de ce texte (cliquez ici pour voir l'effet... et remontez tout en haut de la page pour retrouver le calque). Autrement dit, si on précise top ou bottom, le calque perd tout souvenir du flux naturel dans le calque père.

(2) — Le lien dans la boîte mauve passe sert à faire passer celle-ci à l'état de calque relatif. Dans ce cas, le flux naturel du restant de la page n'est pas modifié, et les propriétés de positionnement servent simplement à décaler le calque à partir de sa position d'origine.

(retour au menu)

Calques en position fixe

Les calques «fixes», qui s'obtiennent avec position:fixed, sont des calques absolus dont la position resterait fixe dans l'écran quand on fait défiler la page. Ils offrent donc une alternative très intéressante aux cadres, mais... cela ne marche malheureusement pas correctement partout, loin de là.

Pour voir ce que cela donne avec votre navigateur, vous pouvez charger une autre version de cette page HTML où le calque de menu serait fixe, en cliquant ici.

(retour au menu)

Dimensions et positionnement

Le dimensionnement se fait avec les mêmes propriétés de largeur et de hauteur (width et height) que nous avons déjà discutées dans la page sur les tailles et dimensions.

Pour les calques absolus, le positionnement s'effectue par rapport aux côtés du calque père. La figure ci-dessous montre comment se dispose un calque absolu (en jaune) par rapport aux côtés du calque père (en pointillé). On y lit la signification des quatre propriétés de positionnement top, left, right, bottom et dans quel sens elles sont comptées positivement. On verra plus loin le cas des calques relatifs.

Le calque père n'est pas forcément la fenêtre du navigateur. Lorsque l'on a une chaîne de blocs DIV imbriqués les uns dans les autres, tout bloc en position absolue ou relative sert de référence aux blocs suivants. Cet page même fournit un exemple : le texte principal est placé dans un calque absolu, avec une forte marge sur la gauche, et c'est ce calque qui a servi de référence dans nos démonstrations précédentes.

Toutes ces propriétés ont une valeur par défaut auto pour «automatique», ce qui implique que le navigateur prend une décision logique, généralement assez intuitive. Attention toutefois, le navigateur ne déduira jamais la taille à partir des indications de positionnement :

• width:auto (ou pas de width du tout) équivaut à une largeur la plus grande possible;
• height:auto (ou pas de height du tout) équivaut à une hauteur suffisante pour que le calque puisse contenir tout ce qu'on lui demande de contenir (c'est en général le codage le plus souhaitable).

Il faut donc spécifier la taille, puis renseigner (au plus) deux des quatre propriétés de positionnement. Si on spécifie à la fois left et right, il peut y avoir conflit avec la largeur demandée ou calculée, et c'est le navigateur du visiteur qui tranchera.

Positionnement des calques en position relative

Les quatre propriétés n'ont pas le même sens que pour les calques absolus. Elles indiquent simplement le décalage du calque par rapport à la position qu'il aurait eu dans le flux naturel :
— left et right sont équivalents, à ceci près qu'un left positif indique un décalage vers la droite alors qu'un right positif indique un décalage vers la droite ;
— top et bottom semblent complètement équivalents

(retour au menu)

Empilement des calques

Si on ne précise pas les propriétés z-index, les calques s'empilent dans l'ordre où ils apparaissent dans l'écriture de la page. Par exemple (si tout se passe bien dans votre navigateur), les trois pavés dans la marge sont tout simplement trois blocs DIV avec une position:absolute et des left négatifs.

On peut modifier cet ordre en leur attribuant une propriété z-index, qu'on définisse celle-ci dans le style d'origine ou par javascript. La valeur par défaut est zéro. Le tableau ci-dessous contient des scripts qui permettent précisément de modifier ces valeurs pour les trois calques ci-contre. Essayez (rappel : on part de 0 pour les 3 calques).

(retour au menu)

Animation

Par «animation» nous entendons essentiellement tout ce qui permet à une page de s'animer sous la souris, c'est à dire de lui donner une certaine interactivité avec le visiteur.

Les calques permettent aussi de mettre différents éléments de la page en mouvement en redéfinissant périodiquement leurs propriétés de positionnement ( cliquez ici pour un exemple), mais à notre avis, ce qu'on peut ainsi obtenir ressort plutôt du gadget. Réfléchissez bien, et, si vous estimez que votre page a réellement besoin de séquences animées, utilisez plutôt des logiciels spécialisés (comme Flash de Macromedia ou LiveMotion d'Adobe) qui offriront infiniment plus de possibilités et de fluidité dans les animations.

Par contre, la propriété visibility, qui permet de cacher ou de dévoiler différents éléments en réponse à différents événements a beaucoup plus de potentialités pour renforcer l'ergonomie et l'intelligence de la page. Nous en proposons ailleurs diverses applications.

(retour au menu)

Les calques et Dreamweaver

En gros, Dreamweaver ne sait faire que des calques en position absolue, mais il sait aller au-delà du simple positionnement par rapport à la fenêtre du navigateur :

• on peut imbriquer un calque dans un autre (pour hériter de son style et de sa position) en sélectionnant un calque père, puis en créant le nouveau calque avec l'outil «calque» tout en pressant la touche CTRL (sous Windows) ou Commande (Sous MacOS)
• On peut aussi insérer (partiellement) un calque dans le flux naturel de son calque père en plaçant le curseur au point d'insertion, puis en utilisant le menu Insertion>Calque. On peut ensuite déplacer latéralement le nouveau calque, en veillant à ne pas le déplacer verticalement pour ne pas créer de propriété top (pour ne pas rompre le lien partiel avec le flux naturel)

En fait on peut reproduire tout ce qu'il y a dans cette page avec Dreamweaver et cela sans intervenir dans le code. Seul le bloc DIV du début en position:relative ne peut pas être recréé directement, mais on aura le même effet avec un simple paragraphe auquel on aura donné une classe de style comprenant des propriétés position:relative, left et top, via le volet Positionnement de la fenêtre de définition des nouveaux styles. Simplement, l'effet ne sera pas visible dans le prévisualisateur et on ne pourra pas régler la position à la souris.