Calques
Les CALQUES ou encore LAYERS en anglais, sont un des moyens
utilisés en CSS pour réaliser des effets, obtenus par des superpositions
de "pages" ou plutôt de "calques".
Apparu avec le CSS2, les calques fixent
un emplacement précis à chaque boîte concernée, selon
la valeur de la propriété "z-index".
On obtient un empilement des boîtes les unes au-dessus des
autres, et certains avancent la comparaison d'une mise en forme en trois dimensions.
Vous pouvez rencontrer l'expression "devant" pour désigner
l'élément qui se trouve au dessus ou encore dans l'empilage présenté
l'élément qui fait face à vous en premier.
Il existe diverses façons d'utiliser les calques pour obtenir des présentations superbes, mais il faut surtout procéder avec ordre et méthode lorsqu'on appréhende ce sujet la première fois.
Le W3C ne fait pas mention de "calques" ni de "layers" (inventés par Netscape) mais se contente de parler de "niveau dans l'empilement avec la propriété "z-index".Pour l'instant, le vin est tiré, il faut le boire !
Un calque est donc en fait une "boîte" c'est-à-dire un bloc rectangulaire qui conserve une position bien précise au pixel près par rapport au reste du document et, très intéressant car cette dernière conserve la même présentation si le visiteur redimensionne la fenêtre de son navigateur. Cette propriété est fort utile pour positionner du texte sur une image, entre autres possibilités.
Au départ le principe consiste à réaliser par exemple deux paragraphes ayant chacun un positionnement absolu (absolute), qui vont être superposés ou encore empilés dans l'ordre de présentation du code. Et le positionnement absolu, faut-il le rappeler, ne tient pas compte des flux générés par rapport au reste du code environnant dans le source de la page, mais attention à l'intérieur des boîtes les flux reprennent leurs droits.
Propriétés applicables aux calques
position : pour définir le type de calque et le positionner suivant
des valeurs déjà rencontrées : static
, absolute , relative , fixed.
- quatre valeurs complémentaires left, right, top
et bottom. revoir page 35a (retour
assuré)
z-index : pour définir le niveau (l'ordre) d'empilement du calque
visibility : pour rendre le calque visible ou invisible. (détails
en bas de page)
Outre les valeurs de "x" ou "top" et "y" ou "left" connues, vous allez ajouter une nouvelle propriété z-index.
z-index
- Un élément dont la valeur de z-index est supérieure aux autres éléments, se trouvera donc au dessus de la pile des calques présentés.
- Avec une valeur négative vous obtenez automatiquement une image par exemple en dessous du texte. Mais déconseillé tant que certains navigateurs feront des difficultés.
(exemple 1, à cliquer) = un élément "texte" couvert par un élément "image".
(exemple 2, à cliquer) = un élément "texte" qui couvre un élément "image".
(exemple3, à cliquer) = un élément "texte" couvert par un élément "image/nuage", à son tour couvert par un nouvel élément "image / singe".
(exemple 4, à cliquer) = un élément
"texte" couvert par un élément "image/nuage",
à son tour couvert par un nouvel élément "image /
singe". Identique ou presque à l'exemple n°3, car ici c'est
présentable.
(exemple 5, à cliquer) = deux modèles avec l'un appel par les classes et le second avec appel en ligne des éléments superposés.
Il n'y a rien de sorcier dans les principes de base mais le positionnement reste le sujet à bien comprendre et dominer. Par la suite il sera possible de découvrir des moyens plus sophistiqués mais le "pas à pas" que je préconise toujours est ici une priorité absolue.
Visibility, précise
la visibilité ou non de la boîte. Elle possède deux valeurs
différentes suivant les navigateurs : ( L'option par défaut correspond
bien entendu visible).
- "Visible" pour Internet Explorer, "show" pour Netscape
- "Hidden" pour Internet Explorer, "hide" pour Netscape.
- Static vu page 35
- Absolute vu page 36
- Relative vu page 35a
- Fixed vu page ...en cours, et 8d
