dimanche 18 septembre 2011

Positionner des images côte à côte

Lorsque l'on a plusieurs photos à présenter côte à côte, il suffit de créer un tableau...
Pour ce faire, il faut copier le code suivant (pour 2 colonnes et 2 lignes) et le coller dans votre nouveau post (modifier code html) ce qui va créer un tableau de 4 cellules. Ensuite, changez les adresses des images et les dimensions. Un éditeur de texte amélioré comme PSPad permettra de rechercher/remplacer les dimensions rapidement. Note: évitez d'afficher les bordures des cellules, ce n'est vraiment pas esthétique... ou alors utilisez des bordures pâles et larges.

<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 480px; ">
<tbody>
<tr>
<td style="text-align: center; width: 240px; ">
<img alt="" src="http://icons-ak.wunderground.com/data/images/at201197_model.gif" style="width: 240px; height: 180px; " /></td>
<td style="text-align: center; width: 240px; ">
<img alt="" src="http://icons-ak.wunderground.com/data/images/at201197_ensmodel.gif" style="width: 240px; height: 180px; " /></td>
</tr>
<tr>
<td style="text-align: center; width: 240px; ">
<img alt="" src="http://icons-ak.wunderground.com/data/images/at201199_model.gif" style="width: 240px; height: 180px; " /></td>
<td style="text-align: center; width: 240px; ">
<img alt="" src="http://icons-ak.wunderground.com/data/images/at201198_model.gif" style="width: 240px; height: 180px; " /></td>
</tr>
</tbody>
</table>

Une solution encore plus simple est de les positionner d'abord les unes au-dessous des autres classiquement, les dimensionner en "petit", placer le curseur juste avant la deuxième image puis "Retour arrière" au clavier... (<-). On peut ensuite les agrandir à condition que la largeur de vos messages le permette, sinon, elle se remettront automatiquement les unes au-dessous des autres. Exemple (sans tableau):



Si les marges vous gênent, il suffit d'aller dans le code html de votre message et de supprimer ou de modifier:

style="margin-left: 1em; margin-right: 1em;"

Vous pouvez par exemple mettre 0.05em comme pour les images ci-dessus (on peut remplacer "em" par "px" ou "%")

Aucun commentaire:

Enregistrer un commentaire