-
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"> </p>
<p id="rel2"> </p>
<p id="rel3"> </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"> </p>
<p id="rel5"> </p>
<p id="rel6"> </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"> </p>
<p id="rel8"> </p>
<p id="rel9"> </p>
<p id="rel10"> </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"> </p>
<p id="rel12"> </p>
<p id="rel13"> </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>