Trying to make an e-mail signature. Almost done, positioning and size problems
Question
I am trying to complete an e-mail signature. I have two problems: 1.It is too big! 2.The text gathers over it and not above it (could be something to do with the 'absolute' positioning). See screenshot attached.
How can I re size the whole body, so it can appear 5-10 times smaller? 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 answers
solution1
0 ACCPTED 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
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 :(
CSS Support Guide for Email Clients : 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
E-Mail Signature
HTML position:absolute, e-mail signature
Responsive HTML E-mail Signature
MsoNormal in mail footer signature. How to remove?
E-mail signature does not work properly on mobile
HTML e-mail signature is disaplayed differently by gmail
Trying to send e-mail from html form with PHP
How do I make a forward e-mail link?
Perl script for e-mail responder has problems with HTML-formatted e-mails
How to include inline images in e-mail signature when sent out with python?
Related Tags