I did outlook HTML signature and it's look good and work good, but on mobile it's look pretty big. If it possible to do my signature responsive?
My HTML code:
<html>
<head>
<title>Signature</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Signature4.psd) -->
<table id="Table_01" width="880" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img src="images/Signature4_01.png" width="880" height="263" alt=""></td>
</tr>
<tr>
<td>
<a href="matt.yesmaniski#themenorahgroup.com">
<img src="images/email.png" width="301" height="37" border="0" alt=""></a></td>
<td>
<img src="images/Signature4_03.png" width="58" height="37" alt=""></td>
<td>
<a href="https://www.facebook.com/pages/Imagine-Built-Homes/109522549076128" target="_blank">
<img src="images/facebook.png" width="28" height="37" border="0" alt=""></a></td>
<td>
<img src="images/Signature4_05.png" width="1" height="37" alt=""></td>
<td>
<a href="https://twitter.com/ImagineBltHomes" target="_blank">
<img src="images/twitter.png" width="28" height="37" border="0" alt=""></a></td>
<td>
<img src="images/Signature4_07.png" width="464" height="37" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
If you try replacing all your fixed widths with percentages, that should adjust to fit the device. For example, make table width 100% instead of 880 etc
Related
i am trying to embed the following html form in email, using Thunderbird.
<html>
<head>
<title>eisitirio</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (eisitirio.psd) -->
<table id="Table_01" width="835" height="4724" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="eisitirio_01.png" width="835" height="1338" alt=""></td>
</tr>
<tr>
<td colspan="4">
<a href="https://www.ticketservices.gr/event/goutou-goupatou-theatro-aneton/?fbclid=IwAR0Gy0HRV9hRApR7jZajDtZ9Bt4Xa7FliSTHbDR7M1-kOO8kHgMdIvveLNw" target="_blank">
<img src="tickets.png" width="835" height="245" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="4">
<img src="eisitirio_03.png" width="835" height="1231" alt=""></td>
</tr>
<tr>
<td colspan="4">
<a href="https://www.youtube.com/watch?v=03upwfqlKEo" target="_blank">
<img src="teaser.png" width="835" height="305" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="4">
<img src="eisitirio_05.png" width="835" height="1325" alt=""></td>
</tr>
<tr>
<td>
<a href="https://www.facebook.com/endynameiensemble" target="_blank">
<img src="facebook.png" width="243" height="280" border="0" alt=""></a></td>
<td>
<a href="https://www.youtube.com/channel/UC4ecFndGyTEbycrUpnEkqUw" target="_blank">
<img src="youtube.png" width="186" height="280" border="0" alt=""></a></td>
<td>
<a href="https://www.instagram.com/endynamei.ensemble/" target="_blank">
<img src="instagram.png" width="174" height="280" border="0" alt=""></a></td>
<td>
<a href="http://www.endynamei.com/menoy" target="_blank">
<img src="site.png" width="232" height="280" border="0" alt=""></a></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
I try to insert the html code by choosing insert->HTML in thunderbird
I can not make it work properly . Can somebody help me please.
I want to make an html signature for my webmail. I have following html signature.
<html>
<head>
<title>last-one</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="900" height="420" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_01.png" width="960" height="119" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_02.png" width="960" height="109" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_03.png" width="960" height="16" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_04.png" width="960" height="19" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_05.png" width="960" height="30" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_06.png" width="960" height="26" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_07.png" width="960" height="88" alt=""></td>
</tr>
<tr>
<td>
<img src="EMAIL-SIGNETURE-2_08.png" width="179" height="79" alt="">
</td>
<td>
<img src="EMAIL-SIGNETURE-2_09.png" width="34" height="79" alt="">
</td>
<td>
<img src="EMAIL-SIGNETURE-2_10.png" width="35" height="79" alt="">
</td>
<td>
<img src="EMAIL-SIGNETURE-2_11.png" width="40" height="79" alt="">
</td>
<td>
<img src="EMAIL-SIGNETURE-2_12.png" width="675" height="79" alt=""></td>
</tr>
</table>
</body>
</html>
And my expected output if following
But when i paste the html code in Web mail html signature section my output slightly change which look like this.
Can you please tell me what's wrong with expected vs original output?
try this if css:
table {border-collapse: collapse;}
or inline html style
<table id="Table_01" width="900" height="420" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
Requirement
I want to create an image with multiple hyperlinks on it and email it to someone.
What I did
I used Photoshop's slicing method and added URL to the slices. I saved the composition for web. For it to work on my recipient's end, I uploaded each slice to an online photo hosting website and edited the HTML tag img src="local photo location" to img src = "online photo location". But the problem is I get multiple white-spaces between each slice which distorts the overall image.
Code
<html>
<head>
<title>General Infosheet July 25</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (General Infosheet July 25.jpg) -->
<table id="Table_01" width="800" height="1034" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://facebook.com/">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_01_zpsgxd25oae.jpg" width="539" height="158" border="0" alt=""></a></td>
<td rowspan="2">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_02_zpsmqhre1ll.jpg" width="260" height="452" alt=""></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="158" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_03_zpsnfkulzvt.jpg" width="539" height="876" alt=""></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="294" alt=""></td>
</tr>
<tr>
<td>
<a href="http://twitter.com/">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_04_zps239b1stn.jpg" width="260" height="144" border="0" alt=""></a></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="144" alt=""></td>
</tr>
<tr>
<td>
<a href="http://instagram.com/">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_05_zpsuwqhoawm.jpg" width="260" height="134" border="0" alt=""></a></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="134" alt=""></td>
</tr>
<tr>
<td>
<a href="http://photobucket.com/">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_06_zpsiwxkb9ty.jpg" width="260" height="304" border="0" alt=""></a></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="304" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Question
I want to remove white-space between the images. Please provide code edits that will help to remove these white-space.
Make sure that the padding for each table cell is 0px, and then set the border-spacing property to 0, and the border-collapse property to collapse. Tables by default have spacing, resulting in whitespace.
Answer
I was able to solve this problem by inspecting the body section of the email in Hotmail, and then pasting entire HTML code in the inspector. That way, the code is not interpreted by Outlook, but rather by the web browser engine. So, this might be a resolute solution for anyone trying to email complex HTML code.
I know this is a basic question but I'm having difficultly making my site responsive.
It is a basic page that I've done in Photoshop. I've tried a lot of things to make it responsive with no luck.
Here is my HTML code:
<html>
<head>
<title>newbeebosite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (newbeebosite.psd) -->
<table id="Table_01" width="1601" height="1401" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/Home_01.jpg" width="1600" height="21" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/Home_02.jpg" width="1216" height="46" alt=""></td>
<td>
<img src="images/Home_03.jpg" width="192" height="45" alt=""></td>
<td>
<img src="images/Home_04.jpg" width="192" height="45" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="45" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/Home_05.jpg" width="384" height="88" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Home_06.jpg" width="78" height="87" alt=""></td>
<td>
<img src="images/Home_07.jpg" width="251" height="87" alt=""></td>
<td colspan="3">
<img src="images/Home_08.jpg" width="887" height="87" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="87" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Home_09.jpg" width="971" height="160" alt=""></td>
<td>
<img src="images/Home_10.jpg" width="1" height="160" alt=""></td>
<td colspan="2">
<img src="images/Home_11.jpg" width="436" height="160" alt=""></td>
<td>
<img src="images/Home_12.jpg" width="192" height="160" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="160" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/Home_13.jpg" width="1600" height="1086" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1086" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="78" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="251" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="642" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="244" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="192" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="192" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
As a starter I would add:
<meta name="viewport" content="width=device-width, initial-scale=1">
in the head of your html document.
Explanation
This tells the browsers CSS engine "use the screen width of the device (measured in "device independent pixels") as the basis for your HTML element" - and therefore all "fluidly styled" descendant (child) elements will be affected because their height and width properties are based on their parent elements size.
width=device-width is what instructs the page to match the screen's width in device independent pixels. (as opposed to say width=1024 which would explicitly set the width of the page.)
Now when the browser width changes your CSS rules will be hooked into those changes.
I believe initial-scale=1 establishs a 1:1 relationship between CSS pixels and device independent pixels (If that doesnt make sense dont worry - but I would include it).
Then you need to make the table responsive by removing the fixed width definitions and replacing with width definition that change as the parent containers change size.
There is a good explanation of this here - https://developers.google.com/speed/docs/insights/ConfigureViewport
e.g. like this:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (newbeebosite.psd) -->
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="http://lorempixel.com/400/200/" width="80%" height="21" alt=""></td>
<td>
<img src="http://lorempixel.com/400/200/" width="80%" height="21" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="http://lorempixel.com/400/200/" width="80%" height="46" alt=""></td>
<td>
<img src="http://lorempixel.com/400/200/" width="80%" height="45" alt=""></td>
<td>
<img src="http://lorempixel.com/400/200/" width="80%" height="45" alt=""></td>
<td>
<img src="http://lorempixel.com/400/200/" width="80%" height="45" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
Here is a working demo - http://jsbin.com/dilejobofu/1/edit?html,output
I wanted to send simple html code to email but in outlook it apears as a html code not images and text styled.
Should I include any more code so that outlook would recognize it as email and will not display the message as html code?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Dragooon</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#e2e3e7" style="font-family:Arial, Helvetica, sans-serif;">
<table id="Table_01" width="602" align="center" height="3401" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="10">
<img style="display:block" src="/images/Concept1_01.gif" width="1" height="394" alt=""></td>
<td colspan="47">
<img style="display:block" src="/images/Concept1_02.gif" width="600" height="56" alt=""></td>
<td>
<img style="display:block" src="/images/spacer.gif" width="1" height="56" alt=""></td>
</tr><td>
<img style="display:block" src="/images/spacer.gif" width="1" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Your images are missing because you need to add the domain in front of it for example:
<td rowspan="10">
<img style="display:block" src="http://test.com/images/Concept1_01.gif" width="1" height="394" alt=""></td>
<td colspan="47">
<img style="display:block" src="http://test.com/images/Concept1_02.gif" width="600" height="56" alt=""></td>
<td>
<img style="display:block" src="http://test.com/images/spacer.gif" width="1" height="56" alt=""></td>
</tr><td>
<img style="display:block" src="http://test.com/images/spacer.gif" width="1" height="1" alt=""></td>
<td></td>
I think this might put you on the right track
http://www.emailaddressmanager.com/tips/html-email.html