• Art.07.8.21

    Commencement d'une page à completer plus tard.

    Le petit randonneur m'indique que certains navigateurs ne lisent plus les tableaux en article (?).

    On peut positionner des cadres (div (division) ou p (paragraphe) les uns à côté des autres et/ou sous les autres d'au moins deux façons.

    Connaissant la largeur de votre zone article du blog, vous devez créer un cadre à cette largeur pour éviter tout dépassement.

    Ensuite, dans ce cadre, vous pouvez placer les différents élément

    - soit en position:relative; chaque élément tient compte de l'élément précédent et il faut leur indiquer qu'ils doivent se positionner les uns à côté des autres; il faut également indique si on veut qu'un élément se positionne sous le précédent.

    - soit en position:absolute; où chaque élément est indépendant des autres et se positionne selon les attributs qu'on lui affecte.

    Exemple position:relative:

    <div style="width:1000px; height:250px; margin:20px auto; border:1px solid black; background:white; text-align:left;">

    <p id="rel1">&nbsp;</p>

    <p id="rel2">&nbsp;</p>

    <p id="rel3">&nbsp;</p>

    </div>

    <style><!--

    #rel1{position:relative; float:left; width:200px; height:200px; border:1px solid black; background:red; transform:translate(20px,20px);}

    #rel2{position:relative; float:left; width:300px; height:150px; border:1px solid black; background:yellow; transform:translate(20px,20px); margin-left:10px; margin-right:10px;}

    #rel3{position:relative; float:left; width:200px; height:200px; border:1px solid black; background:green; transform:translate(20px,20px); }

    --></style>

     

     

     

    *******************
    Exemple en position:absolute:

    <div style="width:1000px; height:250px; margin:20px auto; border:1px solid black; background:white; text-align:left;">

    <p id="rel4">&nbsp;</p>

    <p id="rel5">&nbsp;</p>

    <p id="rel6">&nbsp;</p>

    </div>

    <style><!--

    #rel4{position:absolute;  width:200px; height:200px; border:1px solid black; background:red; transform:translate(20px,20px);}

    #rel5{position:absolute;  width:300px; height:150px; border:1px solid black; background:yellow; transform:translate(250px,50px);}

    #rel6{position:absolute;   width:200px; height:200px; border:1px solid black; background:green; transform:translate(650px,20px); }

    --></style>

     

     

     

    *************

    <div style="width:1000px; height:400px; margin:20px auto; border:1px solid black; background:white; text-align:left;">

    <p id="rel7">&nbsp;</p>

    <p id="rel8">&nbsp;</p>

    <p id="rel9">&nbsp;</p>

    <p id="rel10">&nbsp;</p>

    </div>

    <style><!--

    #rel7{position:relative; float:left; width:200px; height:200px; border:1px solid black; background:red; transform:translate(20px,20px);}

    #rel8{position:relative; float:left; width:300px; height:150px; border:1px solid black; background:yellow; transform:translate(20px,20px); margin-left:10px; margin-right:10px;}

    #rel9{position:relative; float:left; width:200px; height:200px; border:1px solid black; background:green; transform:translate(20px,20px); }

    #rel10{position:relative;   clear:both; width:100px; height:100px; border:1px solid black; background:coral; transform:translate(250px,20px); }

    --></style>

     

     

     

     

    ****************
    Exemple en position:absolute.

    <div style="width:1000px; height:450px; margin:20px auto; border:1px solid black; background:white; text-align:left;">

    <p id="rel11">&nbsp;</p>

    <p id="rel12">&nbsp;</p>

    <p id="rel13">&nbsp;</p>

    </div>

    <style><!--

    #rel11{position:absolute;  width:200px; height:200px; border:1px solid black; background:red; transform:translate(20px,20px);}

    #rel12{position:absolute;  width:300px; height:150px; border:1px solid black; background:yellow; transform:translate(150px,250px);}

    #rel13{position:absolute;   width:200px; height:200px; border:1px solid black; background:green; transform:translate(650px,100px); }

    --></style>