Tutoriel trois cadres simple en un

Bonjour ou bonsoir,

Voici un code HTML qui vous permet de faire 3 cadres d'un coup en modifiant juste l'image de fond pour que ce soient celles de votre choix.
Pour changer l'image de fond, il vous suffit de changer l'URL de l'image du cadre http://obsession27.free.fr/divers/fonds/pp3.png par votre URL (il faut le faire 3 fois, car il nous demande le lien du fond 3 fois dans le code HTML, regarder bien).

Prévisualisation du résultat:
https://2img.net/r/hpimg15/pics/647355Sanstitre31.png

Spoiler:

Pour changer la taille des bords des cadres il faux modifier ceci:

Code:

border: #000000 2px solid

en l’occurrence le chiffre 2 par 3 si vous les voulez plus épais ou part 1 si vous les voulez plus fin.

Le code HTML avec l'URL de l'image déjà dedans:

Code:

<p><span style="color: #ffffff; font-family: 'Trebuchet MS', Verdana, Arial; font-size: 14px;"> </span></p>
<table>
<tbody>
<tr>
<td style="background-image: url(http://obsession27.free.fr/divers/fonds/pp3.png); font-size: 12px; border: #000000 2px solid;" width="100%">
<blockquote>
<div style="margin: auto; text-align: center; width: 100%;"><span style="font-family: Georgia;"><span style="color: #000000;"><span style="font-size: 22px; line-height: normal;">Nom Prénom(s) ou Doll(z)</span></span></span><br /><br />" Une petite phrase ou citation de votre choix "<br /><br /><br /></div>
<div style="background-color: #ffffff; text-align: justify; padding: 8px; overflow: auto; height: 175px; border: #000000 2px solid;"><span style="color: #000000;">[Présentation de vous même et de votre doll(z)] Du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici.</span></div>
</blockquote>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><br style="color: #735c43; font-family: Courier, 'Courier New', sans-serif; font-size: 11px; line-height: 13px; background-color: #f5ae44;" /><br style="color: #735c43; font-family: Courier, 'Courier New', sans-serif; font-size: 11px; line-height: 13px; background-color: #f5ae44;" /></p>
<table>
<tbody>
<tr>
<td style="background-image: url(http://obsession27.free.fr/divers/fonds/pp3.png); font-size: 12px; border: #000000 2px solid;" width="100%">
<blockquote>
<div style="margin: auto; text-align: center; width: 100%;"><span style="font-family: Georgia;"><span style="color: #000000;"><span style="font-size: 22px; line-height: normal;">Mes amies:</span></span></span></div>
<br />
<div style="background-color: #ffffff; text-align: justify; padding: 8px; overflow: auto; height: 175px; border: #000000 2px solid;">[Présenter vos amies] Du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici.</div>
</blockquote>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><br style="color: #735c43; font-family: Courier, 'Courier New', sans-serif; font-size: 11px; line-height: 13px; background-color: #f5ae44;" /><br style="color: #735c43; font-family: Courier, 'Courier New', sans-serif; font-size: 11px; line-height: 13px; background-color: #f5ae44;" /></p>
<table>
<tbody>
<tr>
<td style="background-image: url(http://obsession27.free.fr/divers/fonds/pp3.png); font-size: 12px; border: #000000 2px solid;" width="100%">
<blockquote>
<div style="margin: auto; text-align: center; width: 100%;"><span style="font-family: Georgia; font-size: 22px;">http://OhMyDollz.cultureforum.net/</span></div>
<br />
<div style="background-color: #ffffff; text-align: justify; padding: 8px; overflow: auto; height: 175px; border: #000000 2px solid;"><span style="font-family: 'trebuchet ms', geneva; font-size: small; line-height: 16px; text-align: start;">OhMydollz.com est ton site de jeux favoris . Si tu veux connaître des astuces pour ton loft, les quêtes, les Qui-suis-je, discuter avec des joueuses qui partagent la même passion que toi, inscris-toi vite sur OhMydollz.cultureforum.net ! Partage tes créations, tes idées, fait de la publicité tout est possible, mais sans toi, tout ça n'existe pas ! Rejoins notre communauté de plus de 900 membres, l'inscriiption est rapide, simple des astuces et des soluces sont ajoutés de jour en jour, le site évolue au fil du temps.OhMyDollz.culturefroum.net, une communauté qui a besoin de toi !</span></div>
<span style="text-align: justify;"> </span></blockquote>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"> </p>

Le code HTML sans l'URL de l'image (il faux donc mettre les votre à la place de ICI L'URL DE VOTRE IMAGE:

Code:

<p><span style="color: #ffffff; font-family: 'Trebuchet MS', Verdana, Arial; font-size: 14px;"> </span></p>
<table>
<tbody>
<tr>
<td style="background-image: url(ICI L'URL DE VOTRE IMAGE); font-size: 12px; border: #000000 2px solid;" width="100%">
<blockquote>
<div style="margin: auto; text-align: center; width: 100%;"><span style="font-family: Georgia;"><span style="color: #000000;"><span style="font-size: 22px; line-height: normal;">Nom Prénom(s) ou Doll(z)</span></span></span><br /><br />" Une petite phrase ou citation de votre choix "<br /><br /><br /></div>
<div style="background-color: #ffffff; text-align: justify; padding: 8px; overflow: auto; height: 175px; border: #000000 2px solid;"><span style="color: #000000;">[Présentation de vous même et de votre doll(z)] Du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici.</span></div>
</blockquote>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><br style="color: #735c43; font-family: Courier, 'Courier New', sans-serif; font-size: 11px; line-height: 13px; background-color: #f5ae44;" /><br style="color: #735c43; font-family: Courier, 'Courier New', sans-serif; font-size: 11px; line-height: 13px; background-color: #f5ae44;" /></p>
<table>
<tbody>
<tr>
<td style="background-image: url(ICI L'URL DE VOTRE IMAGE); font-size: 12px; border: #000000 2px solid;" width="100%">
<blockquote>
<div style="margin: auto; text-align: center; width: 100%;"><span style="font-family: Georgia;"><span style="color: #000000;"><span style="font-size: 22px; line-height: normal;">Mes amies:</span></span></span></div>
<br />
<div style="background-color: #ffffff; text-align: justify; padding: 8px; overflow: auto; height: 175px; border: #000000 2px solid;">[Présenter vos amies] Du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici.</div>
</blockquote>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><br style="color: #735c43; font-family: Courier, 'Courier New', sans-serif; font-size: 11px; line-height: 13px; background-color: #f5ae44;" /><br style="color: #735c43; font-family: Courier, 'Courier New', sans-serif; font-size: 11px; line-height: 13px; background-color: #f5ae44;" /></p>
<table>
<tbody>
<tr>
<td style="background-image: url(ICI L'URL DE VOTRE IMAGE); font-size: 12px; border: #000000 2px solid;" width="100%">
<blockquote>
<div style="margin: auto; text-align: center; width: 100%;"><span style="font-family: Georgia; font-size: 22px;">http://OhMyDollz.cultureforum.net/</span></div>
<br />
<div style="background-color: #ffffff; text-align: justify; padding: 8px; overflow: auto; height: 175px; border: #000000 2px solid;"><span style="font-family: 'trebuchet ms', geneva; font-size: small; line-height: 16px; text-align: start;">OhMydollz.com est ton site de jeux favoris . Si tu veux connaître des astuces pour ton loft, les quêtes, les Qui-suis-je, discuter avec des joueuses qui partagent la même passion que toi, inscris-toi vite sur OhMydollz.cultureforum.net ! Partage tes créations, tes idées, fait de la publicité tout est possible, mais sans toi, tout ça n'existe pas ! Rejoins notre communauté de plus de 900 membres, l'inscriiption est rapide, simple des astuces et des soluces sont ajoutés de jour en jour, le site évolue au fil du temps.OhMyDollz.culturefroum.net, une communauté qui a besoin de toi !</span></div>
<span style="text-align: justify;"> </span></blockquote>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"> </p>

Merci beaucoup . .

Oh mon dieu il est trop beau. *_*

Merci !

/!\Message éditer par l'admin pour manque de majuscule/!\

Coucou ! J'ai un problème, dès que je rentre l'adresse Url de l'image, sa ne me la met pas ^^' Alors si quelqu'un pourrait m'aider sa me serais d'une grande aide !?

Graph a écrit:Coucou ! J'ai un problème, dès que je rentre l'adresse Url de l'image, sa ne me la met pas ^^' Alors si quelqu'un pourrait m'aider sa me serais d'une grande aide !?

Tu n'as qu'à l'héberger sur HostingPics ou sur tout autre hébergeur. ^^ Par contre, si tu l'avais déjà fait, ça me surprend un peu car moi j'y arrive sans problème.. ._.

Allègement du code:

SANS IMAGE:

Code:


<table style="border: #000000 2px solid;">
  <tbody>
     <tr>
        <td style="background-image: url(ICI L'URL DE VOTRE IMAGE); font-size: 12px; border: #000000 2px solid;" width="100%">
           <div style="margin: auto; text-align: center; width: 100%;">
              <span style="font-family: Georgia; font-size: 22px; line-height: normal; color: #000000;">
                 Nom Prénom(s) ou Doll(z)
              </span>
              <br />
              <br />
              " Une petite phrase ou citation de votre choix "
              <br />
              <br />
              <br />
           </div>
           <div style="background-color: #ffffff; text-align: justify; padding: 8px; overflow: auto; height: 175px; border: #000000 2px solid;">
              <span style="color: #000000;">
                 [Présentation de vous même et de votre doll(z)] Du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici.
              </span>
           </div>
        </td>
     </tr>
     <tr>
        <td style="background-image: url(ICI L'URL DE VOTRE IMAGE); font-size: 12px; border: #000000 2px solid;" width="100%">
           <div style="margin: auto; text-align: center; width: 100%;">
              <span style="font-family: Georgia; font-size: 22px; line-height: normal; color: #000000;">
                 Mes amies:
              </span>
           </div>
           <br />
           <div style="background-color: #ffffff; text-align: justify; padding: 8px; overflow: auto; height: 175px; border: #000000 2px solid;">
              [Présenter vos amies] Du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici.
           </div>
        </td>
     </tr>
     <tr>
        <td style="background-image: url(ICI L'URL DE VOTRE IMAGE); font-size: 12px; border: #000000 2px solid;" width="100%">
           <div style="margin: auto; text-align: center; width: 100%;">
              <span style="font-family: Georgia; font-size: 22px;">
                 http://OhMyDollz.cultureforum.net/
              </span>
           </div>
           <br />
           <div style="background-color: #ffffff; text-align: justify; padding: 8px; overflow: auto; height: 175px; border: #000000 2px solid;">
              <span style="font-family: 'trebuchet ms', geneva; font-size: small; line-height: 16px; text-align: start;">
                 OhMydollz.com est ton site de jeux favoris . Si tu veux connaître des astuces pour ton loft, les quêtes, les Qui-suis-je, discuter avec des joueuses qui partagent la même passion que toi, inscris-toi vite sur OhMydollz.cultureforum.net ! Partage tes créations, tes idées, fait de la publicité tout est possible, mais sans toi, tout ça n'existe pas ! Rejoins notre communauté de plus de 900 membres, l'inscriiption est rapide, simple des astuces et des soluces sont ajoutés de jour en jour, le site évolue au fil du temps. www.OhMyDollz.culturefroum.net, une communauté qui a besoin de toi !
              </span>
           </div>
        </td>
     </tr>
  </tbody>
</table>


Avec image:

Code:

<table style="border: #000000 2px solid;">
 <tbody>
    <tr>
      <td style="background-image: url(http://obsession27.free.fr/divers/fonds/pp3.png); font-size: 12px; border: #000000 2px solid;" width="100%">
          <div style="margin: auto; text-align: center; width: 100%;">
            <span style="font-family: Georgia; font-size: 22px; line-height: normal; color: #000000;">
                Nom Prénom(s) ou Doll(z)
            </span>
            <br />
            <br />
            " Une petite phrase ou citation de votre choix "
            <br />
            <br />
            <br />
          </div>
          <div style="background-color: #ffffff; text-align: justify; padding: 8px; overflow: auto; height: 175px; border: #000000 2px solid;">
            <span style="color: #000000;">
                [Présentation de vous même et de votre doll(z)] Du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici.
            </span>
          </div>
      </td>
    </tr>
    <tr>
      <td style="background-image: url(http://obsession27.free.fr/divers/fonds/pp3.png); font-size: 12px; border: #000000 2px solid;" width="100%">
          <div style="margin: auto; text-align: center; width: 100%;">
            <span style="font-family: Georgia; font-size: 22px; line-height: normal; color: #000000;">
                Mes amies:
            </span>
          </div>
          <br />
          <div style="background-color: #ffffff; text-align: justify; padding: 8px; overflow: auto; height: 175px; border: #000000 2px solid;">
            [Présenter vos amies] Du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici, du texte ici.
          </div>
      </td>
    </tr>
    <tr>
      <td style="background-image: url(http://obsession27.free.fr/divers/fonds/pp3.png); font-size: 12px; border: #000000 2px solid;" width="100%">
          <div style="margin: auto; text-align: center; width: 100%;">
            <span style="font-family: Georgia; font-size: 22px;">
                http://OhMyDollz.cultureforum.net/
            </span>
          </div>
          <br />
          <div style="background-color: #ffffff; text-align: justify; padding: 8px; overflow: auto; height: 175px; border: #000000 2px solid;">
            <span style="font-family: 'trebuchet ms', geneva; font-size: small; line-height: 16px; text-align: start;">
                OhMydollz.com est ton site de jeux favoris . Si tu veux connaître des astuces pour ton loft, les quêtes, les Qui-suis-je, discuter avec des joueuses qui partagent la même passion que toi, inscris-toi vite sur OhMydollz.cultureforum.net ! Partage tes créations, tes idées, fait de la publicité tout est possible, mais sans toi, tout ça n'existe pas ! Rejoins notre communauté de plus de 900 membres, l'inscriiption est rapide, simple des astuces et des soluces sont ajoutés de jour en jour, le site évolue au fil du temps. www.OhMyDollz.culturefroum.net, une communauté qui a besoin de toi !
            </span>
          </div>
      </td>
    </tr>
 </tbody>
</table>

Aperçu (avec image):

Spoiler:

Merci infiniemment pour ces magnifiques cadres !