• positionnement en CSS

    Un rappel qui n'est peut-être pas inutile: positionner un élément dans une "boîte" et en profondeur.

    Pour créer un montage, même de base, il faut écrire les lignes de codes en code source (éditeur html), sans utiliser les icônes de la barre d'outils (de préférence !)

    Si vous voulez placer une image sur un autre, de taille différente (!), vous pourrez:

    - soit en placer une en fond et l'autre dans la boîte: <div style="width:800px; height:600px; background:url('image1');"><img src="image2"></div>

    - soit les placer toute les deux dans une boîte neutre, la seconde écrite étant placée par défaut sous la première: <div><img src="image1"><img src="image2"></div>

     ce qui va vous obliger à donner un ordre en positionnement dans les 3 dimensions, pour que le seconde se trouve sur le première et où vous le souhaitez; cette façon de faire va vous permettre d'en positionner plusieurs, contrairement à la première solution.

    1er cas

     

    2ème cas

     

     


    Dans les deux cas, les images sont collées au coté gauche et non où nous les voulons. Reprenons le premier code et choisissons de placer l'image jaune centrée horizontalement et verticalement:

     


    <div style="width: 300px; height: 200px; background-color: green; float: left; margin: 0 20px 0 0;">
    <p style="width: 100px; height: 50px; background-color: yellow; margin: 75px 0 0 100px;">&nbsp;</p>
    </div>

     


     

     

    <div style="width: 300px; height: 200px; border: 1px solid black; float: left;">
    <p id="a1" style="width: 100px; height: 50px; background-color: yellow;">&nbsp;</p>
    <p id="a2" style="width: 100px; height: 50px; background-color: red;">&nbsp;</p>
    </div>
    <style><!--
    #a1{transform:translate(50px,20px);}
    #a2{transform:translate(150px,70px);}
    --></style>
    Nous avons nommé chaque image et lui avons donné, en CSS, un positionnement.

     

     


     

     

    Tout ça est évidemment du statique et si nous voulons animer nos images, il va falloir définir une animation en CSS donc, la nommer et lui attribuer une modification au survol (par exemple)

     

    <div style="width: 300px; height: 200px; background-color: green; float: left; margin: 0 20px 0 0;">
    <p id="a3" style="background-color: yellow;">&nbsp;</p>
    </div>
    <style><!--
    #a3{transition:all 1s linear; width:100px; height:50px; transform:translate(100px,75px);}
    #a3:hover{width:300px; height:200px; transform:translate(0px,0px);}
    --></style>
    L'attribut couleur de fond n'étant pas concerné par l'animation, peut apparaître soit en html (comme ici,), soit en CSS, au choix.
    Les attributs à modifier doivent apparaître dans le premier paragraphe CSS puis, modifiés, dans le second.

     

     


    Dans le cas de deux images, nous allons ajouter un attribut qui va positionner chaque élément en profondeur, dans notre exemple, au survol uniquement.

     

     

    <div style="width: 300px; height: 200px; border: 1px solid black; float: left;">
    <p id="a4">&nbsp;</p>
    <p id="a5">&nbsp;</p>
    </div>
    <style><!--
    #a4{transition:all 1s linear; position:absolute; width:100px; height:50px; background-color: yellow; transform:translate(50px,20px);}
    #a5{transition:all 1s linear; position:absolute; width:100px; height:50px; transform:translate(150px,125px); background-color: red;}
    #a4:hover{width:300px; height:200px; transform:translate(0px,0px); z-index:2;}
    #a5:hover{width:300px; height:200px; transform:translate(0px,0px); z-index:2;}
    --></style>
    Afin que chaque image soit indépendante de l'autre, nous les plaçons en position:absolute;
    Au survol, nous les faisons s'agrandir en premier plan, par z-index:2;