-
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=5vwLes 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.