«Calques»
et feuilles de style

Page précédente

Avertissement : là encore, on s'occupera essentiellement d'aspects qualitatifs dans cette page, pas de codage explicite. On rencontrera néammoins beaucoup de fragments de codes ici et là, mais espérons-le, sous une forme qui paraîtra intuitive au lecteur, même s'il ne sera pas encore en mesure de les organiser de manière opérationnelle (patience, ça va venir :-).

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 :

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

La propriété position peut être accolée à n'importe quel bloc dans une page. Elle peut prendre 4 valeurs :
static / absolute / relative / fixed
Avec la valeur static (valeur par défaut), le bloc reste inséré dans le flux naturel. Les autres valeurs vont créer des calques en position absolue, relative ou fixe. Suivant les cas, ces calques sont totalement ou partiellement retirés du flux naturel et on les positionne à l'aide des quatre propriétés auxiliaires left, right, top et bottom.

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.

Cliquez ici pour passer en position absolue (avec right:70px) ou pour en revenir

Cliquez ici pour passer en position relative (avec left:50px; top:-30px;) ou pour en revenir

(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.

En cette mi-2002,

(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.

Attention ! Répétons que les dimensions width et height ne correspondent pas forcément aux dimensions extérieures occupées sur la page (la figure ci-dessous est une simplification). Cela dépend de la présence ou non d'une bordure et/ou d'une marge interne et aussi du type de navigateur utilisé. Nous expliquons plus loin ce qui se passe et nous consacrons un article séparé aux moyens d'y remédier.

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.

positionnement

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.

On voit tout de suite une application : si on besoin de superposer deux images à l'intérieur d'un texte long, il suffira de placer un bloc DIV en position:relative dans ce texte, sans précision de positionnement (ce bloc restera dans le flux naturel) et on placera ensuite chacune des deux images en position:absolute dans ce bloc, à l'endroit souhaité, indépendamment l'une de l'autre.

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 :

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.

1er calque absolu
 

2ème calque absolu

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).

3ème calque absolu
z-index (Calque 1) : 0 1 2
z-index (Calque 2) : 0 1 2
z-index (Calque 3) : 0 1 2
Remarque: la seule façon sûre d'empiler les calques comme on le souhaite à la fin de ce petit jeu est de leur attribuer des z-index différents. Si on prend le même z-index, l'étagement variera d'un navigateur à l'autre (IE5-mac ou Opera-5 les remettent dans l'ordre d'origine, mais pas NN6)

(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.

Le chat Garfield de Jim Davies

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 :

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.


Retour en haut
Accueil des réponses
Page suivante :
les CSS à la main