Comment positionner du texte sur une image d'arrière plan ?

[What-if-I-fall]

Bonjour, ou bonsoir, suivant l'heure à laquelle vous me lisez =) !

Bon et bien je m'étais jurée de ne pas revenir ici SAUF si vraiment je ne trouvais pas la réponse ailleurs, mais force est de constater que.. je ne la trouve pas 8D.
Je m'explique ; j'ai bien essayé de passer par du padding, du margin et autres joyeusetés, suivant certaines explications données sur forumactif, mais rien n'y fait et je bloque depuis des heures avec mes codes.
J'ai crée une image de fond pour la page d'accueil de mon forum ; la voici : http://www.noelshack.com/uploads/images/17320532313546_tableau2.png

Jusqu'ici tout va bien Mais ! Ça se complique quand je veux insérer du texte et d'autres trucs dans les joulies cadres. IMPOSSIBLE ! j'ai crée un bête tableau et j'ai essayé de bidouiller les td pour qu'ils soient bien là où je veux qu'ils soient mais rien n'y fait.

Alors je m'adresse à vous, en étant désolée de ne pas trouver la solution toute seule :/ je vais continuer à chercher de mon côté tout de même =)
Merci beaucoup à ceux qui tenteront d'aider une telle douée

What if I fall

[Anzu]

Bonsoir ^^

Vous aviez pourtant bien commencé: le tableau.

Vous voulez du texte dans tous les cadres ? Que je vous explique comment faire ^^

Cordialement.

[What-if-I-fall]

Huuuuuuuu ANZU
Ha c'est trop bien, je vais pouvoir dire "cordialement" avec le smiley batman à côté !
(Entre temps vous m'avez bien aidé sans le savoir, d'ailleurs.)
Tout d'abord merci beaucoup de bien vouloir m'aider et de me faire profiter de votre immense savoir htmlial. Ce mot existe, j'en suis convaincue.
Effectivement, j'aimerais du texte dans tous les joulies cadres (8D) même si j'envisageais d'y inclure des images, genre pour ma superbe tête en temps que superbe admin déréglée, vous voyez le genre de trucs banals mais tellement indispensables .
Merci d'avance pour une néophyte des plus invétérées,

Cordialement, Miraculeusement, Tabloïdement, Totalement votre,

What if I fall

[Anzu]

XDD
Nan faut pas exagérer non plus
--

Je vais essayer d'être claire, c'est plus facile d'expliquer oralement que par écrit, je vais faire au mieux =>

• Première Etape: On prend les dimensions de l'image (ici 700 en largeur sur 580 en hauteur) ainsi que celles des cadres de votre image (Pourquoi ? Pour délimiter le contenu tout simplement.

• Deuxième Etape: On se fait un petit tête à tête avec l'image, on l'analyse et on pond la structure de base du tableau. Ce qui nous donne:

Code:

<table><tr><td>Contenu 1</td><td>Contenu 2</td></tr><tr><td colspan="2"><table><tr><td>Contenu 3</td><td>Contenu 4</td><td>Contenu 5</td></tr></table></td></tr></table>

Oh pourquoi un tableau dans un tableau ? Parce que tous les td ont une largeur différente, et on ne pouvait pas les faire coïncider dans un seul tableau. En bref, c'est comme ca et pas autrement

Troisième Etape: On complète le code, parce que pour le moment il est tout nu !

•• Dans le table de base, on met son background avec l'image de fond, la largeur de l'image et la hauteur.

•• Dans les td, on met nos fameuses largeurs (celles des cadres), on met nos padding top et padding left pour positionner correctement nos contenus et un valign top (ca vous pouvez l'enlever, question de préférence).

On assemble le tout et paf ca fait des codapic =>

Code:

<table background="http://www.noelshack.com/uploads/images/17320532313546_tableau2.png" width="700px" height="580px"><tr height="330px"><td  style="padding-top: 60px; padding-left: 20px;" valign="top" width="365px">Contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu </td><td style="padding-top: 225px; " valign="top">Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu </td></tr><tr><td colspan="2" valign="top"> <table><tr><td width="305px" valign="top" style="padding-left: 15px; padding-top: 5px;" >Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu </td><td  valign="top"width="172px" style="padding-left: 15px; padding-top: 5px;" >Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu </td><td width="223px" valign="top" style="padding-left: 15px; padding-top: 5px;" >Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu </td></tr></table></td></tr></table>

Si vous avez des questions, n'hésitez pas ^^

Cordialement

[What-if-I-fall]

Hé bien je... je...
Vous dites que c'est plus facile d'expliquer oralement, mais vu que c'est pas facile d'embrasser virtuellement....

MERCI BEAUCOUP

Spoiler:

C'est très clair et ça marche à merveille. Bon, j'ai rien compris au coup du tableau dans le tableau, mais si c'est comme ça et pas autrement, hein, on va pas se taper la tête contre le mur MÉCHANT DOBBY !
Merci, merci encore et....


ANZUMENT !

What if I fall