• CSS partie 2

    Mes pages ne traitent peut-être pas les sujets dans un ordre logique mais je fais comme ça me vient !

    Nous savons récupérer les adresses de nos images, les positionner à droite, centre et gauche; nous allons voir comment les positionner où on le souhaite exactement.

    Nous pouvons placer nos images en relatif ou en absolue.

    La position relative (position:relative;) est celle par défaut: pas besoin de l'écrire: ainsi, une image va se placer à côté ou en dessous d'une autre en fonction de l'espace dont elle dispose dans la page; si elle n'a pas assez de place à côté, elle se placera automatiquement dessous et comme nous écrivons de gauche à droite, elle partira, par défaut de la gauche. (ce sera un autre sujet !)

    La position absolue (position:absolute;) va placer l'élément comme à la bataille navale, en indépendant, dans le cadre défini; ceci va nous permettre de placer les éléments les uns sur les autres et d'en définir l'ordre par un autre attribut: encore un autre sujet !

    Nous avons 2 attributs CSS à notre service:

    transform:translate(posH, posV);   qui prend en référence les bords du cadre dans lequel il est (page, div, p); horizontal:bord gauche et vertical: bord haut.

    margin:espaceHaut, espDroit, espBas, espGauche;  qui définit les espaces autour  de l'élément (image, dans nos exemples).

    Reprenons notre cadre zone d'article:

    Si nous voulons placer notre image d'une façon particulière, première possibilité.
    <div style="width: 50vw; height: 80vh; border: 0.2vh solid black; margin: 0vh auto; background: url('http://ekladata.com/sMSqTXufd7rv6et4q5rbman24A8/356.jpg');"><img style="transform: translate(7vw,10vh);" src="http://ekladata.com/RhhY__2ESF-mJFWYuxSRb-zbYdc.jpg" alt="" /></div>

    Ce qui peut être utile si on lui donne, par exemple, une inclinaison:

    <div style="width: 50vw; height: 80vh; border: 0.2vh solid black; margin: 0vh auto; background: url('http://ekladata.com/sMSqTXufd7rv6et4q5rbman24A8/356.jpg');"><img style="transform: translate(5vw,10vh) rotate(10deg);" src="http://ekladata.com/RhhY__2ESF-mJFWYuxSRb-zbYdc.jpg" alt="" /></div>

    Voyons une utilisation de margin, qui va mettre des espaces autour de l'élément

    <div style="width: 50vw; height: 80vh; border: 0.2vh solid black; margin: 0vh auto; background: url('http://ekladata.com/sMSqTXufd7rv6et4q5rbman24A8/356.jpg');"><img style="margin: 7vh 0vw 0vh 2vw;" src="http://ekladata.com/RhhY__2ESF-mJFWYuxSRb-zbYdc@400x225.jpg" alt="" /><img style="margin: 7vh 0vw 0vh 2vw;" src="http://ekladata.com/TyuuY_E62PukcoPbNxsuRR9VD2k@400x225.jpg" alt="" /><img style="margin: 7vh 0vw 0vh 2vw;" src="http://ekladata.com/CIYZZUQ9NEUYtn_UZqbwieSfI70@400x225.jpg" alt="" /></div>

    Les trois images sont positionnées en margin qui leur donne un espace haut de 7vh, droit et bas de 0 et de 2vw à gauche; ainsi, les espaces ne se cumulent pas d'une image sur l'autre.
    Si nous avions mais, à la première image, un espace droit de 3vw, le seconde image ayant un espace gauche de 2vw, l'écart entre les deux aurait été de 3vw + 2vw=5vw

    Les positionnements en position:relative sont plus délicats qu'en position:absolute car chaque élément se positionne par rapport aux autres éléments.

    La page suivante concernera la position:absolute où les éléments seront positionnés en indépendant les uns des autres, avec un positionnement en profondeur.