尝试进行电子邮件签名。 即将完成的定位和尺寸问题
[英]Trying to make an e-mail signature. Almost done, positioning and size problems
问题描述
I am trying to complete an e-mail signature. 
我正在尝试完成电子邮件签名。 I have two problems: 1.It is too big! 我有两个问题：1.太大了！ 2.The text gathers over it and not above it (could be something to do with the 'absolute' positioning). 2文本聚集在文本上方而不是文本上方（可能与``绝对''位置有关）。 See screenshot attached. 请参阅所附的屏幕截图。
How can I re size the whole body, so it can appear 5-10 times smaller? 如何调整整个身体的大小，使其看起来小5-10倍？ What should I do, so the text in the e-mail goes above the signature, not next to it? 我该怎么办，因此电子邮件中的文字位于签名上方，而不是旁边？
<html> <head> <title>sig-noborders</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div style="position:absolute; left:0px; top:0px; width:1312px; height:612px;"> <div style="background-image:url(sig-noborders_01.png); position:absolute; left:0px; top:0px; width:1312px; height:126px;" title=""> </div> <div style="background-image:url(sig-noborders_02.png); position:absolute; left:0px; top:126px; width:146px; height:486px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_03.png~original); position:absolute; left:146px; top:126px; width:374px; height:370px;" title=""> </div> <div style="background-image:url(sig-noborders_04.png); position:absolute; left:520px; top:126px; width:160px; height:255px;" title=""> </div> <a href="http://benjaminjayshand.com" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_05.png~original); position:absolute; left:680px; top:126px; width:31px; height:30px;" title=""> </div></a> <div style="background-image:url(sig-noborders_06.png); position:absolute; left:711px; top:126px; width:601px; height:3px;" title=""> </div> <div style="background-image:url(sig-noborders_07.png); position:absolute; left:711px; top:129px; width:59px; height:252px;" title=""> </div> <a href="http://benjaminjayshand.com" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_08.png~original); position:absolute; left:770px; top:129px; width:352px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_09.png); position:absolute; left:1122px; top:129px; width:190px; height:167px;" title=""> </div> <div style="background-image:url(sig-noborders_10.png); position:absolute; left:770px; top:154px; width:352px; height:58px;" title=""> </div> <div style="background-image:url(sig-noborders_11.png); position:absolute; left:680px; top:156px; width:31px; height:53px;" title=""> </div> <div style="background-image:url(sig-noborders_12.png); position:absolute; left:680px; top:209px; width:2px; height:84px;" title=""> </div> <a href="http://designtel.co" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_13.png~original); position:absolute; left:682px; top:209px; width:27px; height:29px;" title=""> </div></a> <div style="background-image:url(sig-noborders_14.png); position:absolute; left:709px; top:209px; width:2px; height:84px;" title=""> </div> <a href="http://designtel.co" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_15.png~original); position:absolute; left:770px; top:212px; width:220px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_16.png); position:absolute; left:990px; top:212px; width:132px; height:84px;" title=""> </div> <div style="background-image:url(sig-noborders_17.png); position:absolute; left:770px; top:237px; width:220px; height:59px;" title=""> </div> <div style="background-image:url(sig-noborders_18.png); position:absolute; left:682px; top:238px; width:27px; height:55px;" title=""> </div> <div style="background-image:url(sig-noborders_19.png); position:absolute; left:680px; top:293px; width:1px; height:88px;" title=""> </div> <a href="https://www.instagram.com/benjaminjayshand/" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_20.png~original); position:absolute; left:681px; top:293px; width:30px; height:31px;" title=""> </div></a> <div style="background-image:url(sig-noborders_21.png); position:absolute; left:770px; top:296px; width:3px; height:86px;" title=""> </div> <a href="https://www.instagram.com/designtel" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_22.png~original); position:absolute; left:773px; top:296px; width:236px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_23.png); position:absolute; left:1009px; top:296px; width:33px; height:5px;" title=""> </div> <a href="https://www.instagram.com/designtel" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_24.png~original); position:absolute; left:1042px; top:296px; width:127px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_25.png); position:absolute; left:1169px; top:296px; width:143px; height:316px;" title=""> </div> <div style="background-image:url(sig-noborders_26.png); position:absolute; left:1009px; top:301px; width:9px; height:81px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_27.png~original); position:absolute; left:1018px; top:301px; width:13px; height:14px;" title=""> </div> <div style="background-image:url(sig-noborders_28.png); position:absolute; left:1031px; top:301px; width:11px; height:81px;" title=""> </div> <div style="background-image:url(sig-noborders_29.png); position:absolute; left:1018px; top:315px; width:13px; height:67px;" title=""> </div> <div style="background-image:url(sig-noborders_30.png); position:absolute; left:773px; top:321px; width:236px; height:61px;" title=""> </div> <div style="background-image:url(sig-noborders_31.png); position:absolute; left:1042px; top:321px; width:127px; height:61px;" title=""> </div> <div style="background-image:url(sig-noborders_32.png); position:absolute; left:681px; top:324px; width:30px; height:57px;" title=""> </div> <div style="background-image:url(sig-noborders_33.png); position:absolute; left:520px; top:381px; width:159px; height:231px;" title=""> </div> <a href="mailto:info@benjaminjayshand.com"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_34.png~original); position:absolute; left:679px; top:381px; width:33px; height:27px;" title=""> </div></a> <div style="background-image:url(sig-noborders_35.png); position:absolute; left:712px; top:381px; width:58px; height:1px;" title=""> </div> <div style="background-image:url(sig-noborders_36.png); position:absolute; left:712px; top:382px; width:57px; height:89px;" title=""> </div> <a href="mailto:info@benjaminjayshand.com"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_37.png~original); position:absolute; left:769px; top:382px; width:340px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_38.png); position:absolute; left:1109px; top:382px; width:60px; height:230px;" title=""> </div> <div style="background-image:url(sig-noborders_39.png); position:absolute; left:769px; top:407px; width:340px; height:62px;" title=""> </div> <div style="background-image:url(sig-noborders_40.png); position:absolute; left:679px; top:408px; width:33px; height:63px;" title=""> </div> <div style="background-image:url(sig-noborders_41.png); position:absolute; left:769px; top:469px; width:1px; height:143px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_42.png~original); position:absolute; left:770px; top:469px; width:156px; height:19px;" title=""> </div> <div style="background-image:url(sig-noborders_43.png); position:absolute; left:926px; top:469px; width:183px; height:143px;" title=""> </div> <div style="background-image:url(sig-noborders_44.png); position:absolute; left:679px; top:471px; width:1px; height:9px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_45.png~original); position:absolute; left:680px; top:471px; width:33px; height:8px;" title=""> </div> <div style="background-image:url(sig-noborders_46.png); position:absolute; left:713px; top:471px; width:56px; height:141px;" title=""> </div> <div style="background-image:url(sig-noborders_47.png); position:absolute; left:680px; top:479px; width:33px; height:1px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_48.png~original); position:absolute; left:679px; top:480px; width:11px; height:6px;" title=""> </div> <div style="background-image:url(sig-noborders_49.png); position:absolute; left:690px; top:480px; width:12px; height:132px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_50.png~original); position:absolute; left:702px; top:480px; width:11px; height:6px;" title=""> </div> <div style="background-image:url(sig-noborders_51.png); position:absolute; left:679px; top:486px; width:11px; height:126px;" title=""> </div> <div style="background-image:url(sig-noborders_52.png); position:absolute; left:702px; top:486px; width:11px; height:126px;" title=""> </div> <div style="background-image:url(sig-noborders_53.png); position:absolute; left:770px; top:488px; width:156px; height:124px;" title=""> </div> <div style="background-image:url(sig-noborders_54.png); position:absolute; left:146px; top:496px; width:374px; height:116px;" title=""> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2016-03-28 22:57:38
If you are going to use that in an email you will have massive issues with cross-email client compatibility. 如果要在电子邮件中使用它，则跨电子邮件客户端兼容性会遇到很多问题。
Some good reading would be: https://litmus.com/blog/the-tyranny-of-tables-why-web-and-email-design-are-so-different 一些不错的读物是： https : //litmus.com/blog/the-tyranny-of-tables-why-web-and-email-design-are-so-different
I would suggest you build take a bit of time to work out how best to make an email signature using tables, as much as I hate them for positioning and such and wish email clients would adopt web standards, they just aren't that kind :( 我建议您花一些时间来弄清楚如何最好地使用表格进行电子邮件签名，因为我讨厌它们用于定位，并且希望电子邮件客户采用Web标准，但它们不是那种类型： （
CSS Support Guide for Email Clients : https://www.campaignmonitor.com/css/ 电子邮件客户端的CSS支持指南： https ： //www.campaignmonitor.com/css/
Use a table like this: 使用这样的表：
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="295">
benjamin <br/>
jayshand
</td>
<td width="10"> </td>
<td width="295">
<ul>
<li>Right One</li>
<li>Right Two</li>
<li>Right Three</li>
<li>Right Five</li>
<li>Right Five</li>
</ul>
</td>
</tr>
</table>
and then just use inline styles to style to how you want it. 然后只需使用内联样式来设置所需样式即可。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
电子邮件签名 - E-Mail Signature
HTML位置：绝对的电子邮件签名 - HTML position:absolute, e-mail signature
响应式HTML电子邮件签名 - Responsive HTML E-mail Signature
邮件页脚签名中的 MsoNormal。 如何去除？ - MsoNormal in mail footer signature. How to remove?
电子邮件签名无法在手机上正常工作 - E-mail signature does not work properly on mobile
gmail对HTML电子邮件签名的处理方式不同 - HTML e-mail signature is disaplayed differently by gmail
尝试使用PHP从html表单发送电子邮件 - Trying to send e-mail from html form with PHP
如何建立转发电子邮件链接？ - How do I make a forward e-mail link?
电子邮件响应程序的Perl脚本对HTML格式的电子邮件有问题 - Perl script for e-mail responder has problems with HTML-formatted e-mails
使用python发送时如何在电子邮件签名中包含内嵌图像？ - How to include inline images in e-mail signature when sent out with python?
相关标签