Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

05.12.2008

Comment aligner le texte autour d'un tableau

Le principe avait rapidement été abordé quand il s'était agit de lettrine. Il peut être utile d'enfermer un objet dans un tableau pour tourner autour.

Vous en faites l'expérience à chaque fois que vous insérez une image dans une note, mieux vaut ne pas se tromper de paramètre si l'on souhaite que le texte enveloppe l'image. Et quand vous insérez un lecteur, il n'y a pas moyen d'aligner le texte autour de l'objet, ce qui oblige le plus souvent à reléguer le lecteur en fin de note pour ne pas créer de grande coupure.

Puisqu'on peut aligner sur un tableau, encadrons les objets.

Le lecteur ci-contre été inséré dans un tableau aligné à gauche. Le texte lui-même aligné à gauche semble tourner autour, en limitant l'effet de coupure visuelle de l'insertion d'un objet. Et cela peut fonctionner avec n'importe quel type d'objet... Je m'avance peut-être un peu, mais vous ne perdez qu'un peu de temps à essayer.

Vous trouverez dans la brève Wysiwyg, un exemple de texte encadré, qui exige un alignement sur la droite.

podcast

Le texte de ce paragraphe-ci est aligné à gauche, comme le précédent, mais le lecteur de média se situe dans un tableau (dont le fond a été mis en couleur) qui s'aligne à droite. Alignement du texte en dehors du tableau, et alignement du tableau lui-même sont indépendant. Sans compter l'alignement du texte dans le tableau.

Voici le code du tableau à insérer.

Ce qui est en couleur n'est pas interprété, c'est du commentaire. Vous pouvez copier puis coller ce code dans l'une de vos notes, et vous obtiendrez un tableau aligné à gauche, avec une cellule contenant XX. Entre ces deux lettres, vous pourrez insérer un lecteur Deezer de petite taille. C'est à peu de chose près le code du cadre en haut de cette note.

<!-- -+-+-+-+- Tableau pour insertion d'objet -0- -+-+-+-+- -->
<table style="width: 224px; height: 59px;"
<!-- width indique la largeur, height la hauteur du tableau. Ici l'unité est le pixel, il faut se référer aux dimensions de l'objet et ajouter 4px aux deux dimensions. Ici, ce sont les dimensions d'un lecteur Deezer de taille réduite. -->
align="left"
<!-- choisir entre "left" et "right" pour l'alignement du tableau -->
border="0" cellpadding="2">
<!-- la bordure est à zéro, il n'y en a donc pas. Cellpadding règle l'espace entre bord de cellule et bord de tableau avec un cellpadding à 2, il faut augmenter la taille du tableau de 2 pixels sur chaque bord, soit 4 sur la hauter, 4 sur la largeur -->
<tbody><tr><td style="text-align: center;" valign="middle">
<!-- ces critères de styles alignent sur le centre de la cellule horizontalement d'abord, puis verticalement -->
<!-- -+-+-+-+-+- Code de l'objet à insérer -0- -+-+-+-+-+- -->

XX
<!-- ces XX servent de repères, il faudra les effacer après avoir inséré le code du lecteur Deezer -->
<!-- -+-+-+-+-+- Code de l'objet à insérer -1- -+-+-+-+-+- -->
</td></tr></tbody></table>
<!-- -+-+-+-+- Tableau pour insertion d'objet -1- -+-+-+-+- -->

22:35 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : blog, html, tableau, lecteur | |  del.icio.us | | Digg! Digg |  Facebook

16.11.2008

Une lettrine pour prendre le tableau à la lettre (révisée)

Cette note a été révisée le 13 mars, lors de la publication de la note expliquant la modification de la feuille de styles automatisant le passage en lettrine de la première lettre du premier paragraphe. Je joins une capture d'écran avant modification de la CSS. Chez vous, cela peut donner quelque chose de sympathique, vous ne risquez rien à essayer. Ici, mon petit bricolage donne un résultat... que l'on ne saurait poursuivre.

geemee-lettrine-avant-css.jpg

L'adoption du numérique ne doit pas nous faire abandonner toutes les traditions de l'imprimerie, ni même du livre quand il n'était encore qu'aux mains des copistes.

A

dmettons ensemble que la lettrine peut être une chose sympathique pour commencer une note. C'est pourquoi je vous donne un moyen de le faire vous-même. Cet exercice nous donne aussi l'occasion de faire connaissance avec les tableaux en HTML. Si vous trouvez déjà que c'est une vraie galère avec un traitement de texte, c'est que vous n'avez pas encore fait connaissance avec l'un des passages aussi redouté qu'obligé des webmasters.

Vous ne cherchez pas à devenir webmestre ? Je m'en doute, sinon, vous ne seriez pas sur une plateforme de blog. Cela étant, les tableaux rendent bien des services pour structurer la mise en forme de la page. D'ailleurs cette page n'est elle-même qu'un vaste tableau à 3 colonnes.

Comment créer un tableau

Je crains qu'il ne vous faille à nouveau passer en mode HTML, mais pour l'instant continuez ici, si vous le voulez bien. Il nous faudra ouvrir une table, puis le "corps" : ouvrir une ligne, ouvrir une cellule, en donner le contenu. Puis fermer la cellule, la ligne, le corps et le tableau.

• Copiez donc le code :
<table>
<tbody>
<tr>
<td>Archaea</td>
</tr>
</tbody>
</table>
• Passez en mode HTML
• Collez le code
• Cliquez sur [Mettre à jour]

on obtient :

Archaea

Même pas je vois que c'est un tableau... et en plus je suis coincé, je ne peux pas écrire avant ni après. Il est effectivement préférable de taper deux caractères repères, ne serait-ce que "xx", entre lesquels vous collerez le code. Cela vous permettra de reprendre la main sans passer par l'éditeur HTML.

Mettons que j'indique une bordure de 1 pixel d'épaisseur, pour le tableau, et un fond de couleur orchidée pour la cellulle.
Avec le code :
<table border=1 >
<tbody>
<tr>
<td bgcolor="orchid">Archaea</td>
</tr>
</tbody>
</table>

On obtient :

Archaea

C'est moche, mais cela ressemble bien à une cellule de tableau...

Passons au code de la lettrine.

Nous avons besoin d'un tableau "mono-cellulaire".
Sa hauteur doit être suffisante pour afficher la lettrine, mais ne pas créer trop de lignes décalées.
Le texte doit s'aligner autour du tableau sur la gauche.
La lettre doit s'aligner verticalement dans la cellule sur le milieu.
La taille de la lettre doit être suffisante pour créer son effet, en adoptant éventuellement une autre fonte.

Pour la lettrine de cette note, le code est le suivant :
<table style="height: 70px;" align="left" border="0">
<tbody>
<tr>
<td valign="middle" background="http://geemee.hautetfort.com/media/00/00/1795889500.gif"><B><span style="line-height: 70px; font-size: 60px; font-family: verdana,arial;">A</span></B></td>
</tr>
</tbody>
</table>

Pour l'analyser dans le détail :

<table style="height: 70px;" La hauteur spécifiée est de 70 pixels.
align="left" Le texte va s'aligner à gauche de la page contre le tableau.
border="0"> Pour ne pas avoir de bordure, mieux vaut déclarer une épaisseur à "0".
<tbody>
<tr>
On déclare le corps,
puis la première ligne.
<td 
valign="middle"
On ouvre la cellule,
on centre le contenu verticalement.
background="http://
geemee.hautetfort.com/
media/00/00/1795889500.gif">
au lieu d'utiliser un fond de couleur, j'ai téléchargé une image dont j'ai noté l'adresse (clic droit "copier l'adresse du lien" dans Tableaux de bord / Fichiers / Médias).
Si l'image est trop petite, elle sera répétée.
Si elle est trop grande, elle sera tronquée.
<B> Vous retrouvez le B que vous connaissez pour "bold"
<span
style="line-height: 70px;
On commence la mise en forme de la lettre elle même.
Ici on donne la taille de l'interligne.
font-size: 60px; Ici on donne la taille de la police : 60 pixels.
font-family: verdana,arial;"> On donne le nom de la police. Il est plus prudent d'en donner deux. Si "verdana" n'est pas sur le poste, il affichera avec "arial".
A
</span>
</B>
"A" est le seul texte.
On ferme le style,
on ferme "bold".
</td>
</tr>
</tbody>
</table>
On ferme la cellule,
la ligne,
le corps,
puis le tableau.

Vous serez certainement obligés de faire des ajustements successifs pour trouver le bon compromis entre la taille de la cellule et celle du caractère. L'image de fond, ou la couleur, etc.

Ne vous fiez pas à l'aperçu de l'éditeur Haut&Fort, son interprétation n'est pas celle de notre navigateur. Voyez ce qu'il affiche pour cette note.

HF_voir_la_note_lettrine.jpg

Vous devrez faire des allers-retour entre votre éditeur Haut&Fort et la note publiée. Quitte à modifier la date de publication pour la rendre indisponible "un certain temps".

 

12:30 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (3) | Tags : blog, html, lettrine, tableau | |  del.icio.us | | Digg! Digg |  Facebook