Positionnement Relatif

              1.Relatif.
       Le positionnement de ces calques sont relatif, car ils s'insèrent à leur position Html normal, cependant cette position dépend de celle du contenant. Voir l'exemple ci-dessous, le calque contenu s'insère à l'intérieur du calque contenant.
    Exercice : Faire varier la position du calque contenant.
    Exercice : Faire passer le calque contenu de relative à absolute et vice et versa, décaler légèrement ce calque, 10 10, de façon à mieux observer ce qui se passe. On voit qu'en positionnement relatif un espace est réservé pour le calque, si l'on déplace le calque contenu, on voit un trou dans le calque contenant..

    Les positions left et top pour le calque contenu s'appliquent ici par rapport à la position qu'il occuperait en html normal dans le calque contenant, alors que pour un positionnement absolu le décalage s'effectuerait par rapport à l'angle haut et gauche du calque contenant.

              2.Infobulles.
    Pour afficher des infobulles au passage du curseur, il faut détecter ce passage en employant un script, ce n'est pas forcément simple et n'est pas dans l'esprit de ce tutorial, qui se limite le plus possible aux instructions Css. Donc nous allons employer la syntaxe Alt du tag image, que je vous rappelle.
    <img src="image" width=100 height=100 alt="Texte alternatif">
    Le texte alternatif, s'affiche, si l'image ne peut être trouvée ou si l'on passe le curseur au dessus de l'image.
    Nous allons insérer une image devant le mot/expression à commenter et écrire dans alt le texte à afficher. Pour superposer l'image et le mot/expression nous déclarerons l'image en positionnement absolu, sans donner de position haute ou gauche, ce qui puisque le calque est inséré à l'endroit où il se trouve dans le texte et que le soft ne réserve pas d'espace pour un positionnement absolu, conduit le système à écrire le texte comme si l'image n'existait pas. Pour éviter que l'image ne masque le texte, nous afficherons un gif transparent, une image de 1 pixel, minimisant son poids, qui sera répété par le soft pour couvrir toute l'image.
    Image transparente :
<span class="Absolut"><img src="images/onepix.gif" border="0" width="100" height="17" alt="Voir plus bas"></span>
    Nous employons un span car nous ne voulons pas de saut de ligne.
    La class Absolut est déclaré dans un fichier extérieur ou entre les tags Style plutôt que répété x fois dans la page,
    syntaxe :.Absolut{position:absolute;width:100;height:20}
    Nous voyons que top et left ne sont pas précisé, il faut donner un width et un height, la valeur est sans importance. Par contre ces valeurs doivent être ajustées dans le tag Image, elles dépendent de la taille de la police mais ne sont pas critiques, pour vérifier que la taille est suffisante passer border à 1, pour visualiser le contour de l'image et ajuster si besoin la largeur et la hauteur.
    Dans alt nous avons le texte à afficher, ici "Voir plus bas".
    Pour afficher un surlignage jaune :
<span class="BgYellow">décaler</span>
    Syntaxe de la classe BgYellow :
.BgYellow{background-color : yellow}

    décaler , syntaxe de l'infobulle du mot précédent
<span class="Absolut"><img src="images/onepix.gif" border="0" width="100" height="17" alt="Voir plus bas"></span>
<span class="BgYellow">décaler</span>
    Dans cette version l'image n'est pas affectée de l'attribut z-index, car ces textes sont du Html. Si les textes sont eux-mêmes inclus dans des instructions Css, (div, span, ...), vous devrez donner au span de l'image une valeur de z-index, plus forte que celle du texte, sinon l'image ne détectera pas le passage du curseur étant masquée par le texte.
    <Div Id="Texte" style="font ; z-index=12">
    Contenu...
    <span class="Absolut" style=" z-index=20">....Suite de l'infobulle....
    Contenu...
    </Div>
    Ceci pourrait être fait plus efficacement en modifiant Absolut dans le fichier extérieur.
    .Absolut{position:absolute;width:100;height:20;z-index=20}
    Exercice : modifiez l'infobulles dans la forme ci-dessous, (les styles sont appelées par le tag <link )

	Sommaire
Précédent		Suivant