Art.08.8.21

J'ai proposé des montages type tableau en CSS, avec différents types de cases, placées en irrégulier.

<div style="width:1000px; height:540px; margin:20px auto; text-align:left;">

<p id="tb1" class="tb">case 1</p>

<p id="tb2" class="tb">case 2</p>

<p id="tb3" class="tb">case 3</p>

<p id="tb4" class="tb">case 4</p>

<p id="tb5" class="tb">case 5</p>

<p id="tb6" class="tb">case 6</p>

<p id="tb7" class="tb">case 7</p>

<p id="tb8" class="tb">case 8</p>

<p id="tb9" class="tb">case 9</p>

</div>

<style><!--

.tb{position:absolute; z-index:1; width:320px; height:180px; border:4px solid white; padding:5px; text-align:center; line-height:normal;}

#tb1{box-sizing:border-box; transform:translate(0px,0px);}

#tb2{box-sizing:border-box; transform:translate(320px,0px);}

#tb3{box-sizing:border-box; transform:translate(640px,0px);}

#tb4{box-sizing:border-box; transform:translate(0px,180px);}

#tb5{box-sizing:border-box; transform:translate(320px,180px);}

#tb6{box-sizing:border-box; transform:translate(640px,180px);}

#tb7{box-sizing:border-box; transform:translate(0px,360px);}

#tb8{box-sizing:border-box; transform:translate(320px,360px);}

#tb9{box-sizing:border-box; transform:translate(640px,360px);}

--></style>

Dans cet exemple de base, les cellules sont au ratio 16/9, le texte est centré horizontalement mais le positionnement vertical est paramétré par line-height.

Je vais rechercher comment donner les attributs à chaque cellule pour que chacune soit considérée comme une cellule de tableau avec les espaces exterieurs, par exemple ... à suivre !