Les balises :: Gestion des calques

Comment afficher des images sur une page web?

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


vers le haut

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.


vers le haut

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


vers le haut

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 2002,
vers le haut

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.

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.


vers le haut

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


vers le haut

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

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)


vers le haut