email
HTML ईमेल संरचना और आउटलुक पेचीदगियां
खोज…
पृष्ठभूमि छवियों
पूर्ण चौड़ाई तालिका सेल पृष्ठभूमि छवियां
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
<table width="100%" height="20">
<tr>
<td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#33cc99">
<table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td bgcolor="#ffff99" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</body>
</html>
- Outlook 2010 में OSX 10.9.2 पर विंडोज 7 VMWare के माध्यम से परीक्षण किया गया
टाइल की पूरी चौड़ाई तालिका सेल पृष्ठभूमि छवियों
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
<table width="100%">
<tr>
<td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="tile" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</body>
</html>
- Outlook 2010 में OSX 10.9.2 पर विंडोज 7 VMWare के माध्यम से परीक्षण किया गया
निर्दिष्ट चौड़ाई तालिका सेल पृष्ठभूमि छवियों
यहाँ एक उदाहरण है, दो पंक्तियाँ, पहली पंक्ति में 3 अलग-अलग पृष्ठभूमि की छवियों के साथ 3 कॉलम हैं, दूसरी पंक्ति पूरी पृष्ठभूमि छवि के रूप में सभी तरह से फैली हुई है।
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/300/80" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
<td style="width: 100px; height: 80px; background-image: url('http://placekitten.com/g/100/80');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/100/80" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="80" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
<td style="width: 200px; height: 80px; background-image: url('http://placekitten.com/g/200/100');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/200/100" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="200" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 600px; height: 150px; background-image: url('http://placekitten.com/g/600/150');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/600/150" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="150" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
- Outlook 2010 में OSX 10.9.2 पर विंडोज 7 VMWare के माध्यम से परीक्षण किया गया
स्पेसर्स का निर्माण
कुछ ईमेल क्लाइंट (विशेष रूप से विंडोज डेस्कटॉप आउटलुक) किसी भी सामग्री के साथ तालिकाओं को ध्वस्त करते हैं, भले ही आयाम या पैडिंग हो।
स्पेसर तालिका को ढहने से इन ग्राहकों को रोकने के लिए, आप एक अदृश्य जोड़ सकते हैं यह सामग्री के रूप में कार्य करता है। फिर चरित्र के font-size और line-height शून्य करें ताकि यह <table> आयामों को प्रभावित न करे। ऊंचाई (या चौड़ाई) विशेषता अब केवल स्पेसर के आयामों को प्रभावित करने वाली चीज है।
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td height="40" style="font-size: 0; line-height: 0;">
</td>
</tr>
</table>
एक स्पेसर के रूप में 1x1 पारदर्शी .gif का उपयोग करना आम बात थी , लेकिन इस विधि को पदावनत किया जाता है।
तत्व का अंतर
आउटलुक कभी-कभी एक तत्व के बाईं और दाईं ओर थोड़ा सा रिक्ति जोड़ सकता है जो कुछ लेआउट-संबंधी सिरदर्द पैदा कर सकता है। विक्रेता-विशिष्ट mso-table-lspace और mso-table-rspace CSS गुणों का उपयोग करके, आप उन स्थानों से छुटकारा पा सकते हैं और आउटलुक के कारण होने वाली लाखों अन्य समस्याओं से निपटने के लिए जारी रख सकते हैं।
table{
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
छवि का आकार बदलना
अपने मार्कअप में छवियों का आकार बदलने के लिए चौड़ाई या ऊंचाई टैग का उपयोग करके इंटरनेट एक्सप्लोरर ब्राउज़रों में एक समस्या पैदा हो सकती है। यदि आपका पाठक एक ईमेल इन-ब्राउज़र देख रहा है, और उस ईमेल में तरल चित्र हैं, तो वे आकार बदलने के साथ ही बहुत बदसूरत दिखेंगे। उपयोग -ms-प्रक्षेप-मोड: बाइबिक; यह सुनिश्चित करता है कि आपकी छवियां थोड़ी बेहतर दिखें।
img{
-ms-interpolation-mode:bicubic;
}
Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow