Positionnement

              1.Généralités.
        Quand on parle de positionnement c'est pour définir la position de quelque chose, par rapport à quelque chose d'autre.
        Ce que l'on peut positionner en Dhtml, c'est une entité délimité par un tag et auquel on à affecté des styles Css.
        On emploi en général le tag DIV. L'habitude est d'appeler ces entités calque, (Layer).
        L'origine des coordonnées en informatique est en haut et à gauche de l'écran, dénotant l'origine de la vocation purement texte des écrans, (c'est là qu'on écrit le premier caractère d'un texte).

    Par analogie on définit l'origine du positionnement en haut et à gauche du contenant, (cela peut-être un autre calque).

              2.Absolu / Relatif.
    Un calque est positionné en absolu quand on donne les coordonnées de son point haut gauche par rapport au point haut et gauche de son contenant, l'image ci-dessus montre un layer positionné par rapport à son contenant, (ici l'écran).
    Un calque est positionné en relatif quand il apparaît a la position qu'aurait un élément html normal dans le code.

              3.Absolu.
        Pour positionner un calque en absolu, on doit spécifier l'attribut absolute et donner les valeurs x et y .
    <Div style="position : absolute ; left : 0 ; top : 0"> ...Contenu.... </div>
    Dans l'exercice suivant le contenant est l'écran, donc les valeurs sont spécifiés par rapport au coin haut et gauche de l'écran.
    Exercice : Afficher la forme ci-dessous, supprimer le tag div, afficher de nouveau remarquer que le paragraphe n'est plus absolument en 0, 0 mais décalé, revenir au code précédent en pressant code initial.
    Si vous ne rajouter pas d'unité derrière le chiffre, la valeur est en pixels, autre unité courante  pt point
    Modifier le style pour décaler de 100 à gauche et de 50 par rapport au haut de la fenêtre. Corrigé
    Modifier le style pour décaler de 200 à gauche et de 100 par rapport au haut de la fenêtre. Corrigé

    Créons un autre calque à l'intérieur du premier , nous fixerons la largeur des calques a 200 pour visualiser plus facilement les changements de position . Nous avons le schéma suivant :
    <Div Id="Contenant" style="positionnement absolu du calque">
            .....Contenu calque contenant ....
            <Div Id="Contenu" style="positionnement absolu du calque">
                     .....Contenu calque contenu ...
            </Div>  fermeture du calque contenu
    </Div> fermeture du calque contenant
Appliquons les mêmes instructions de décalage au deux calques, left : 50 ; top : 50
Pour mieux visualiser ces calques fixons des couleurs de fond différentes, rouge pour le contenant, vert pour le contenu.

    Visualisez la forme ci-dessus. Vous voyez le calque à fond rouge décalé de 50 pixel de la gauche et du haut et le calque à fond vert décalé des mêmes quantité par rapport au calque rouge. Important, bien que le code du calque vert soit placé à l'intérieur du calque rouge, il n'y a pas d'espace de réservé pour lui, (le calque vert), dans le calque rouge. Par contre il hérite, (cascade), des propriétés du calque rouge, en particulier, la position d'origine.
    Exercice : Dans le style du calque "Contenant", changez les valeurs de left et top, par exemple left : 20 top : 20. Corrigé. Notez que le calque vert suit le calque rouge. Essayez diverses valeurs pour left et top dans le style du calque "Contenant".
    Exercice : Dans le style du calque "Contenu" mettre left à 0, vous devez voir les deux calques alignés à gauche. Corrigé. Essayez diverses valeurs pour left et top dans le style du calque "Contenu"

              4.Application.
    A partir de fontes normales et de commandes Css, réaliser le logo suivant

        Schéma de réalisation :
        Grande taille de caractère (72pt)
        Réalisation de trois calques, l'ordre des calques donnant l'ordre d'apparition à l'écran, le dernier est au-dessus,
            Un calque couleur de caractère noire, donnant le positionnement du Logo, ce calque contient les deux suivants.
            Un calque couleur de caractère blanche, ce calque est décalé par rapport au noir de 8 a 6  pixels vers la droite et vers le bas.
            Un calque couleur de caractère bleu, ce calque est décalé par rapport au noir de 4 a 2  pixels vers la droite et vers le bas. Ce calque est sur le dessus.
        Exercice : personnaliser le logo en y mettant votre propre texte, choisir vos couleurs, jouez sur les décalages.
        Exercice : Presser le bouton code initial, et inverser les positions des calques "ContenuCouleurBlanche" et "ContenuLogo". Corrigé.

	Sommaire
Précédent		Suivant