Blog tips: [Part 2] - Composition

Comme le fait tres justement remarquer Pascal, la syntaxe des tableaux est "has been" et vous pouvez utiliser une approche "liquid CSS", plus flexible (en fonction des cas, l'un sera plus facile a mettre en place que l'autre). Enfin, ce poste est destine aux debutants (a la demande de Thien Lan) et n'a pas la pretention d'amener quoique ce soit de revolutionnaire... juste quelques formules vous permettant d'avoir la bonne taille d'image selon votre composition. Les tableaux permettent d'avoir une meilleur comprehension du code.

[vertical][horizontal] [vertical][horizontal] ou [horizontal][vertical] [horizontal][vertical] > <table width="100%" align="center"> ___<tbody> ______<tr> _________<td width="50%" rowspan="2">212</td> _________<td width="50%">178</td> ______</tr> ______<tr> _________<td width="50%">178</td> ______</tr> ___</tbody> </table> > <table width="100%" align="center"> ___<tbody> ______<tr> _________<td width="50%">178</td> _________<td width="50%" rowspan="2">212</td> ______</tr> ______<tr> _________<td width="50%">178</td> ______</tr> ___</tbody> </table> > Variable: L1 la largeur de l'image horizontale H1 la hauteur de l'image horizontale L2 la largeur de l'image verticale H2 la hauteur de l'image verticale S la largeur de la surface d'affichage M la marge de l'image P la marge interieure du tableau R le rapport d'image Formule: L1 + L2 + 2x2xM + 3xP = S 2xH1 + 2xM + P = H2 H2 = R x L2 L1 = R x H1 On resoud et on obtient L1 = {RxS - (4xR + 2) x M - (3xR + 1) x P} x R / (2 + R²) L2 = S - 4xM -3xP - L1 Dans mon cas M=5, P=5, S=425, R=4/3 --> L1=178 --> L2=212

[horizontal][vertical] [vertical][horizontal] ou [vertical][horizontal] [horizontal][vertical] > <table width="100%" cellpadding="0" cellspacing="0"> ___<tbody> ______<tr> _________<td width="50%"> ____________<table align="center"> _______________<tbody> __________________<tr> _____________________<td>195</td> __________________</tr> __________________<tr> _____________________<td>195</td> __________________</tr> _______________</tbody> ____________</table> _________</td> _________<td width="50%"> ____________<table align="center"> _______________<tbody> __________________<tr> _____________________<td>195</td> __________________</tr> __________________<tr> _____________________<td>195</td> __________________</tr> _______________</tbody> ____________</table> _________</td> ______</tr> ___</tbody> </table> > L la largeur des images S la largeur de la surface d'affichage M la marge de l'image P la marge interieure du tableau Formule: L + 4xM + 3xP = S Dans mon cas M=5, P=5, S=425 --> L=195

Ben voila... Il vous reste plus qu'a mixer tout ca pour varier un peu votre presentation!
Next: Model XML est transformation XSLT pour automatisation complete de la publication.

[...a suivre]