31 juil. 2010

Encadrer un article avec des textures

Voici une méthode pour réaliser un encadrement en couleur ou en texture d'un article.
Les codes présents dans les encadrements sont à coller en HTML

L'encadrement simple en couleur :

En rouge, la couleur du fond de l'encadrement extérieur
En bleu, la couleur du fond intérieur


<table cellspacing="0" cellpadding="40" width="90%" border="1">
 <tbody>
  <tr>
   <td width="100%" bgcolor="#000033">
      <center>
   <table width="100%" border="1">
    <tbody>
     <tr>
      <td width="100%" bgcolor="#f5f5dc">
      <p align="left">Votre Texte</p>
      </td>
     </tr>
    </tbody>
   </table>
   </center></td>
  </tr>
 </tbody>
</table>

L'encadrement simple en texture :



<table cellspacing="0" cellpadding="40" width="90%" background="adresse image de l'extérieur" border="1">
    <tbody>
        <tr>
            <td width="100%">
            <p></p>
            <center>
            <table width="100%" background="adresse image de l'intérieur"
border="1">
                <tbody>
                    <tr>
                        <td width="100%">
                        <p align="left">Votre Texte</p>                   
                        </td>
                    </tr>
                </tbody>
            </table>
            </center></td>
        </tr>
    </tbody>
</table>

L'encadrement double en couleur :

En bleu, la couleur extérieure bleu
En rouge, la couleur du milieu rouge
En rose, la couleur centrale beige





<table cellspacing="1" cellpadding="1" border="1">
 <tbody>
  <tr>
   <td bgcolor="#000033">
   <div align="center">&nbsp;</div>
   <div align="center">
   <table cellspacing="0" cellpadding="40" width="90%" align="center" border="1">
    <tbody>
     <tr>
      <td bgcolor="#660033">
      <div align="center">
      <table width="100%" align="center" border="1">
       <tbody>
        <tr>
         <td bgcolor="#f5f5dc">
         <p align="center">VOTRE TEXTE</p>
         </td>
        </tr>
       </tbody>
      </table>
      </div>
      </td>
     </tr>
    </tbody>
   </table>
   </div>
   <p>&nbsp;</p>
   </td>
  </tr>
 </tbody>
</table>
</center>



L'encadrement double en texture :





<table cellspacing="1" cellpadding="1" background="texture extérieure" border="1">
    <tbody>
        <tr>
            <td>
            <div align="center">&nbsp;</div>
            <div align="center">
            <table cellspacing="0" cellpadding="40" width="90%" align="center" background="texture de milieu d'encadrement" border="1">
                <tbody>
                    <tr>
                        <td>
                        <div align="center">
                        <table width="100%"
align="center" background="texture de l'article" border="1">                   
<tbody>                       
<tr>                             
<td>                               
<p align="center">VOTRE TEXTE</p>                            
</td>                     
</tr>          
</tbody>
                        </table>
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            </td>
        </tr>
    </tbody>
</table>
</center>


3 commentaires:

  1. Intéressante cette méthode! Néanmoins, faut-il passer en mode CSS ? Pas possible de réaliser un encadrement spécifique à un seul article ? J'ai suivi à la lettre vos conseils mais c'est sans succès.
    Merci pour tous vos conseils précieux.

    RépondreSupprimer
  2. Bonjour,
    Superbe ces encadrements mais je n'arrive pas à les centrer au milieu de l'article ? je ne comprends donc pas pourquoi ni comment faire.
    Merci d'avance pour votre réponse, cordialement Domi

    RépondreSupprimer
  3. Idem, je n'y arrive pas, je suis sous wordpress,
    j'arrive pas a centrer le cadre, je veux dire le diminuer a droite et gauche car mon billet fait en general 600 px

    pourriez vous me renseigner, pardon si je ne formule peut etre pas bien ma question vu que je connais pas bien la technique

    en fait j'ai déjà fait des cadres sur mes billets, mais qu'on m'a gentiment offert avec les codes, j'aimerai faire moi même mes propres creations egalement pour aider d'autres gens et aussi ne pas en ennuyer d'autres,

    bien cordialement, et merci pour ce blog, que je lis depuis tout a l'heure, je peux plus me decrocher

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)