[RESOLU] Signature css html background table

elge · Message par **elge** » 05 mars 2008, 01:48

bonjour les gens !

J'ai eu beau retourner le forum (et le web) je ne trouve pas la solution à mon problème,,
je débute en html et je m'acharne sur un truc que certains d'entre vous jugerons très vil :
c'est à dire creer une signature en html, avec css,
Ce n'est pas pour l'utiliser à chaque fois, rassurez vous.

pour çà, je passe par la création d'une page html, dont voici le code :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>signature_09</title>
  <style type="text/css">
<!--
.Style1 {
	font-family: Rockwell, Arial, Geneva, sans-serif;
	color: #33FF33;
	font-size: 16px;
	letter-spacing: 2px;
	text-align: center;
}
.Style2 {
	font-family: Rockwell, Arial, Geneva, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	letter-spacing: 2px;
	text-align: left;
}
.Style3 {
	background-image: url(file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/Albator_09.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 54px;
}
.Style4 {
	background-image: url(file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/Rebours_09.gif);
	background-repeat: no-repeat;
	background-position: left top;
	width: 54px;
}
.Style5 {
	background-image: url(file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/XploZ_10.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
-->
  </style>
</head>
<body bgcolor="#000000" text="#ffffff">
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0"
 height="514" width="965">
  <tbody>
    <tr>
      <td width="160" height="118" align="left" valign="top"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/Thunder/Thunder_1.jpg" alt="°" width="160" height="118"><br></td>
      <td height="118" align="center" valign="top"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/Thunder/Thunder_2.jpg" alt="°" width="100%" height="118"><br></td>
      <td width="160" height="118" align="left" valign="top"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/Thunder/Thunder_3.jpg" alt="°" width="160" height="118"><br></td>
      <td valign="top"><br></td>
    </tr>
    <tr>
      <td width="160" align="center" valign="top"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/Thunder/Thunder_4.jpg" alt="°" width="160" height="100%"><br></td>
      <td valign="top" class="Style5"><p align="center" class="Style1">-------------------------------message-------------------------------</p>
        <p align="center" class="Style2">&nbsp;</p>
        <p class="Style2">&nbsp;</p>
        <p class="Style2">&nbsp;</p>
        <p class="Style2">&nbsp;</p>
        <p class="Style2">&nbsp;</p>
        <p class="Style2">&nbsp;</p>
        <p class="Style1"><span class="Style1">--------------------------------------------------------------------stv.</span><br>      
        </p></td>
      <td width="160" align="center" valign="top"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/Thunder/Thunder_5.jpg" alt="°" width="160" height="100%"><br></td>
      <td width="54" align="left" valign="top" class="Style3"></td>
    </tr>
    <tr>
      <td width="160" height="139" align="left" valign="top"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/Thunder/Thunder_6.jpg" alt="°" width="160" height="139"><br></td>
      <td height="139" align="center" valign="top"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/Thunder/Thunder_7.jpg" alt="°" width="100%" height="139"><br></td>
      <td width="160" height="139" align="left" valign="top"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/Thunder/Thunder_8.jpg" alt="°" width="160" height="139"><br></td>
      <td width="54" align="left" valign="top" class="Style4"></td>
    </tr>
  </tbody>
</table>
<br>
<br>
</body>
</html>

bon, tout va bien quand je regarde en local, même sur TH.

le problème, c'est à la réception,il ne charge pas les images en background définies dans les css,,
ce sont des images de fond dans des cellules de tableau !!

voici le code du message à la réception :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
</head><body bgcolor="#000000" text="#ffffff">
<br>
<div class="moz-signature">-- <br><title>signature_09</title>

<style type="text/css">
<!--
.Style1 {
	font-family: Rockwell, Arial, Geneva, sans-serif;
	color: #33FF33;
	font-size: 16px;
	letter-spacing: 2px;
	text-align: center;
}
.Style2 {
	font-family: Rockwell, Arial, Geneva, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	letter-spacing: 2px;
	text-align: left;
}
.Style3 {
	background-image: url(file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/Albator_09.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 54px;
}
.Style4 {
	background-image: url(file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/Rebours_09.gif);
	background-repeat: no-repeat;
	background-position: left top;
	width: 54px;
}
.Style5 {
	background-image: url(file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/signature_09/XploZ_10.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
-->
  </style>
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" height="514" width="965">
  <tbody>
    <tr>
      <td align="left" height="118" valign="top" width="160"><img src="mailbox:///Users/klauskinski/Library/Thunderbird/Profiles/qpvl1mfu.default/Mail/Local%20Folders/Templates?number=87713840&part=1.1.2&filename=Thunder_1.jpg" alt="°" height="118" width="160"><br>
      </td>
      <td align="center" height="118" valign="top"><img src="mailbox:///Users/klauskinski/Library/Thunderbird/Profiles/qpvl1mfu.default/Mail/Local%20Folders/Templates?number=87713840&part=1.1.3&filename=Thunder_2.jpg" alt="°" height="118" width="100%"><br>
      </td>
      <td align="left" height="118" valign="top" width="160"><img src="mailbox:///Users/klauskinski/Library/Thunderbird/Profiles/qpvl1mfu.default/Mail/Local%20Folders/Templates?number=87713840&part=1.1.4&filename=Thunder_3.jpg" alt="°" height="118" width="160"><br>
      </td>
      <td valign="top"><br>
      </td>
    </tr>
    <tr>
      <td align="center" valign="top" width="160"><img src="mailbox:///Users/klauskinski/Library/Thunderbird/Profiles/qpvl1mfu.default/Mail/Local%20Folders/Templates?number=87713840&part=1.1.5&filename=Thunder_4.jpg" alt="°" height="100%" width="160"><br>
      </td>
      <td class="Style5" valign="top">
      <p class="Style1" align="center">-------------------------------message-------------------------------</p>
      <p class="Style2" align="center"> </p>
      <p class="Style2"> </p>
      <p class="Style2"> </p>
      <p class="Style2"> </p>
      <p class="Style2"> </p>
      <p class="Style2"> </p>
      <p class="Style1"><span class="Style1">--------------------------------------------------------------------stv.</span><br>
      </p>
      </td>
      <td align="center" valign="top" width="160"><img src="mailbox:///Users/klauskinski/Library/Thunderbird/Profiles/qpvl1mfu.default/Mail/Local%20Folders/Templates?number=87713840&part=1.1.6&filename=Thunder_5.jpg" alt="°" height="100%" width="160"><br>
      </td>
      <td class="Style3" align="left" valign="top" width="54"><br>
      </td>
    </tr>
    <tr>
      <td align="left" height="139" valign="top" width="160"><img src="mailbox:///Users/klauskinski/Library/Thunderbird/Profiles/qpvl1mfu.default/Mail/Local%20Folders/Templates?number=87713840&part=1.1.7&filename=Thunder_6.jpg" alt="°" height="139" width="160"><br>
      </td>
      <td align="center" height="139" valign="top"><img src="mailbox:///Users/klauskinski/Library/Thunderbird/Profiles/qpvl1mfu.default/Mail/Local%20Folders/Templates?number=87713840&part=1.1.8&filename=Thunder_7.jpg" alt="°" height="139" width="100%"><br>
      </td>
      <td align="left" height="139" valign="top" width="160"><img src="mailbox:///Users/klauskinski/Library/Thunderbird/Profiles/qpvl1mfu.default/Mail/Local%20Folders/Templates?number=87713840&part=1.1.9&filename=Thunder_8.jpg" alt="°" height="139" width="160"><br>
      </td>
      <td class="Style4" align="left" valign="top" width="54"><br>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>
</div>
</body></html>

bon, je crois que je ne définis pas correctement les adresses, ou les emplacements, de mes images..

quelqu'un saurait-il m'aider ? ou me conseiller,,
merci

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

elge · Message par **elge** » 05 mars 2008, 12:23

J'ai réessayer en insérant les background dans ma page directement, même résultat, les fichiers ne sont pas chargés dans les répertoires de TH, leurs adresses restent définies en fonction de mon disque local ??
Thunderbird, ne gèrerait-il pas les background dans les cellules de tableau ??

j'ai pourtant lu sur ce site que ce devrait-être possible ??!

http://www.campaignmonitor.com/blog/arc ... _2.html#pc

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Message par **caméléon** » 05 mars 2008, 20:11

Je ne pense pas que tu doives utiliser des css dans tes courriels. A mon avis peu de webmail ou de clients supportent cette fonctionnalité.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

elge · Message par **elge** » 06 mars 2008, 07:26

bon, Caméléon, tu as raison,, avec tout ce que j'ai lu, j'aurais dû m'en douter,,

enfin merci, pour ton conseil, parce qu'en me cresant un peu les méninges j'ai réussi à faire à peu près ce que je voulais sans les css, c'est à dire en html pur..

le + dur pour moi ce fût de comprendre que je ne devais pas travailler avec l'éditeur de modèle de TH, qui répertorie les fichier dans son arborescence interne,,,, j'ai donc travailler avec un éditeur html, pour localiser mes fichiers proprement en local,, ( sauf un que j'ai mis sur un serveur distant parceque TH accepte de me faire du background avec çà).

du coup j'obtient un fichier à peu près pas trop dégeu,,
pour celles et ceux que çà intéresse, voilà ce que çà donne :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body bgcolor="#000000" text="#ffffff">
<div class="moz-signature">
<div class="moz-signature">
<title></title>
<div class="moz-signature">
<div>
<title>signature_09</title>
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0"
 height="464" width="965">
  <tbody>
    <tr>
      <td align="left" height="118" valign="top" width="160"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/Thunder/Thunder_1.jpg" alt="°" width="160" height="118"><br>
      </td>
      <td align="center" height="118" valign="top"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/Thunder/Thunder_2.jpg" alt="°" width="100%" height="118"><br>
      </td>
      <td align="left" height="118" valign="top" width="160"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/Thunder/Thunder_3.jpg" alt="°" width="160" height="118"><br>
      </td>
      <td valign="top" width="62"><br>
      </td>
    </tr>
    <tr>
      <td align="center" valign="top" width="160"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/Thunder/Thunder_4.jpg" alt="°" width="160" height="100%"><br>
      </td>
      <td
 style="background-repeat: no-repeat; background-position: center;"
 background="http://nsm01.casimages.com/img/2008/03/06//080306044013242281795033.gif"
 valign="top">
      <p align="center"><font color="#33ff33">-----------------------------------------message-----------------------------------------</font></p>
      <p><font color="#ffffff">✧<br>
      </font></p>
      <p><font color="#ffffff">&nbsp; </font><font color="#ffffff"><br>
      </font></p>
      <p align="center"><font color="#ffffff"> <font color="#33ff33"><span>-------------------------------------------------------------------------------------------stv.</span></font><br>
      </font></p>
      <font color="#ffffff"> </font></td>
      <td align="center" valign="top" width="160"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/Thunder/Thunder_5.jpg" alt="°" width="160" height="100%"><br>
      </td>
      <td style="" align="left" valign="top" width="62"><br>
      </td>
    </tr>
    <tr>
      <td align="left" height="52" valign="top" width="160"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/Thunder/Thunder_6.jpg" alt="°" width="160" height="60"><br>
      </td>
      <td align="center" height="52" valign="top" width="100%"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/Thunder/Thunder_7.jpg" alt="°" width="100%" height="60"><br>
      </td>
      <td align="left" height="52" valign="top" width="160"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/Thunder/Thunder_8.jpg" alt="°" width="160" height="60"><br>
      </td>
      <td align="left" height="60" valign="top" width="62"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/Albator/Albator_09.gif" width="62" height="60" alt="°"><br>
      </td>
    </tr>
    <tr>
      <td align="left" height="22" valign="top"><br>
      </td>
      <td align="center" height="22" valign="top"><br>
      </td>
      <td align="left" height="22" valign="top"><br>
      </td>
      <td align="left" height="22" valign="top" width="62"><img src="file:///KlausKinski/Users/klauskinski/Pictures/Stock/signature/Rebours/rebours_09.gif" width="62" height="22" alt="°"><br>
      </td>
    </tr>
    <tr>
      <td align="left" height="62" valign="top"><br>
      </td>
      <td align="center" height="62" valign="top"><br>
      </td>
      <td align="left" height="62" valign="top"><br>
      </td>
      <td align="left" height="62" valign="top"><br>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>
</div>
</div>
</div>
</div>
</body>
</html>

voilà, je me permet de mettre résolu sur mon entête parce que je crois avoir compris que la rencontre e-mail + css ,, c'est pas encore pour maintenant !

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

elge · Message par **elge** » 10 mars 2008, 23:06

j'ai améliorer ce code en mettant les images en background,, le message ne pèse que 4 ko à l'envoi,, l'ai expliqué çà là :

http://www.geckozone.org/forum/viewtopic.php?t=63643

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Geckozone

[RESOLU] Signature css html background table

[RESOLU] Signature css html background table

background

Qui est en ligne ?