I was creating an email signature by joining images using table tags in HTML. It's looking ok in desktop view. But in mobile view whitespaces come around the images. I used display: block style but it's not working.
here is an example HTML code. I will be very grateful for the solution.
<html>
<head>
<title>email_signature</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
img{
display: block;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (EMS_1.psd) -->
<table id="Table_01" width="1000" height="336" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="https://i.postimg.cc/T3tLTqDC/image-01.jpg" width="806" height="182" alt=""></td>
<td>
<img src="https://i.postimg.cc/CKtRqhJ8/image-02.jpg" width="24" height="182" alt=""></td>
<td>
<img src="https://i.postimg.cc/wM5MZhz5/image-03.jpg" width="31" height="182" alt=""></td>
<td>
<img src="https://i.postimg.cc/qM0znZc1/image-04.jpg" width="27" height="182" alt=""></td>
<td>
<img src="https://i.postimg.cc/4yRnWWDN/image-05.jpg" width="29" height="182" alt=""></td>
<td>
<img src="https://i.postimg.cc/zBgVwsPc/image-06.jpg" width="83" height="182" alt=""></td>
</tr>
<tr>
<td>
<img src="https://i.postimg.cc/tg71JZdy/image-07.jpg" width="806" height="32" alt=""></td>
<td>
<img src="https://i.postimg.cc/44pYYTcK/image-08.jpg" width="24" height="32" alt=""></td>
<td>
<img src="https://i.postimg.cc/DygmcdBn/image-09.jpg width="31" height="32" alt=""></td>
<td>
<img src="https://i.postimg.cc/x118pJ4H/image-10.jpg" width="27" height="32" alt=""></td>
<td>
<img src="https://i.postimg.cc/RZpFkSkY/image-11.jpg" width="29" height="32" alt=""></td>
<td>
<img src="https://i.postimg.cc/N0yMBhYj/image-12.jpg" width="83" height="32" alt=""></td>
</tr>
<tr>
<td>
<img src="https://i.postimg.cc/DZLw4qSV/image-13.jpg" width="806" height="122" alt=""></td>
<td>
<img src="https://i.postimg.cc/mr0rrd2N/image-14.jpg" width="24" height="122" alt=""></td>
<td>
<img src="https://i.postimg.cc/GtRhFHD4/image-15.jpg" width="31" height="122" alt=""></td>
<td>
<img src="https://i.postimg.cc/BbCZM45M/image-16.jpg" width="27" height="122" alt=""></td>
<td>
<img src="https://i.postimg.cc/MZ0GWmkV/image-17.jpg" width="29" height="122" alt=""></td>
<td>
<img src="https://i.postimg.cc/rF8wzRcb/image-18.jpg" width="83" height="122" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Mobile View
Related
I'm building a email signature and have trouble on showing in my email in Outlook. Basically my code had not contained any space or something like that but unfortunately it happened with me.
Here how It's supposed to look:
and here how it's turning out on this:
actually i need to remove unwanted space from there but i don't know how
here is my code:
<html>
<head>
<title>saddam</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 (saddam.png) -->
<table id="Table_01" width="1000" height="332" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="https://i.postimg.cc/5ypGq46F/saddam-01.gif" width="254" height="149" alt=""></td>
<td>
<img src="https://i.postimg.cc/QxxvNTyg/saddam-02.gif" width="72" height="149" alt=""></td>
<td>
<img src="https://i.postimg.cc/T3BscHYQ/saddam-03.gif" width="86" height="149" alt=""></td>
<td>
<img src="https://i.postimg.cc/9F8KDQ66/saddam-04.gif" width="96" height="149" alt=""></td>
<td>
<img src="https://i.postimg.cc/05CLqfc2/saddam-05.gif" width="86" height="149" alt=""></td>
<td>
<img src="https://i.postimg.cc/t4sfWHyY/saddam-06.gif" width="86" height="149" alt=""></td>
<td>
<img src="https://i.postimg.cc/FzFCKMDF/saddam-07.gif" width="320" height="149" alt=""></td>
</tr>
<tr>
<td>
<img src="https://i.postimg.cc/26DXsbWZ/saddam-08.gif" width="254" height="30" alt=""></td>
<td>
<img src="https://i.postimg.cc/9MYNCmPN/saddam-09.gif" width="72" height="30" alt=""></td>
<td>
<img src="https://i.postimg.cc/tRDmcg4s/saddam-10.gif" width="86" height="30" alt=""></td>
<td>
<img src="https://i.postimg.cc/4y8LHWS6/saddam-11.gif" width="96" height="30" alt=""></td>
<td>
<img src="https://i.postimg.cc/7Y6Qry5m/saddam-12.gif" width="86" height="30" alt=""></td>
<td>
<img src="https://i.postimg.cc/vHN2QS9M/saddam-13.gif" width="86" height="30" alt=""></td>
<td>
<img src="https://i.postimg.cc/CxnPdHH8/saddam-14.gif" width="320" height="30" alt=""></td>
</tr>
<tr>
<td>
<img src="https://i.postimg.cc/g09MhXNT/saddam-15.gif" width="254" height="75" alt=""></td>
<td>
<img src="https://i.postimg.cc/9MCJ833P/saddam-16.gif" width="72" height="75" alt=""></td>
<td>
<img src="https://i.postimg.cc/PqmSQX7r/saddam-17.gif" width="86" height="75" alt=""></td>
<td>
<img src="https://i.postimg.cc/kGhsgB2w/saddam-18.gif" width="96" height="75" alt=""></td>
<td>
<img src="https://i.postimg.cc/50gpDP1h/saddam-19.gif" width="86" height="75" alt=""></td>
<td>
<img src="https://i.postimg.cc/vTmXyWZc/saddam-20.gif" width="86" height="75" alt=""></td>
<td>
<img src="https://i.postimg.cc/Kc9JNs0L/saddam-21.gif" width="320" height="75" alt=""></td>
</tr>
<tr>
<td>
<img src="https://i.postimg.cc/tCYDmtcc/saddam-22.gif" width="254" height="78" alt=""></td>
<td>
<img src="https://i.postimg.cc/DyH5V4kw/saddam-23.gif" width="72" height="78" alt=""></td>
<td>
<img src="https://i.postimg.cc/DwG67fnd/saddam-24.gif" width="86" height="78" alt=""></td>
<td>
<img src="https://i.postimg.cc/25fwyp5p/saddam-25.gif" width="96" height="78" alt=""></td>
<td>
<img src="https://i.postimg.cc/xdyPbskX/saddam-26.gif" width="86" height="78" alt=""></td>
<td>
<img src="https://i.postimg.cc/SsSfLW8D/saddam-27.gif" width="86" height="78" alt=""></td>
<td>
<img src="https://i.postimg.cc/0QVdVb0x/saddam-28.gif" width="320" height="78" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
I'm trying to create a HTML document which is to be sent out as a newsletter, but unfortunately it's not showing correctly in Gmail.
For some reason I am getting spacing issues above and below images which are hyperlinked. Like this:
http://i.imgur.com/hesFibq.png
I have tried adding:
style="border-spacing:0;"
to my table as seen elsewhere, as well as the below to all images:
style="display:block;"
Any ideas?
Edit: here's the html as it stands:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>LCTSA</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="701" height="375" border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;">
<tr>
<td colspan="3" rowspan="2">
<img src="http://www.morley.leeds.sch.uk/user/74/183839.png" width="473" height="279" alt="" style="display:block;"></td>
<td>
<a href="mailto:example#co.uk" style="display:block;"><img src="http://www.morley.leeds.sch.uk/user/74/183840.png" width="227" height="145" alt=""
style="display:block;"></td></a>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183848.gif" width="1" height="145" alt="" style="display:block;"></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://www.morley.leeds.sch.uk/user/74/183841.png" width="227" height="179" alt="" style="display:block;"></td>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183848.gif" width="1" height="134" alt="" style="display:block;"></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://www.morley.leeds.sch.uk/user/74/183842.png" width="29" height="96" alt="" style="display:block;"></td>
<td>
<a href="mailto:example#co.uk" style="display:block;"><img src="http://www.morley.leeds.sch.uk/user/74/183843.png" width="176" height="14" alt=""
style="display:block;"></td></a>
<td rowspan="4">
<img src="http://www.morley.leeds.sch.uk/user/74/183844.png" width="268" height="96" alt="" style="display:block;"></td>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183848.gif" width="1" height="14" alt="" style="display:block;"></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://www.morley.leeds.sch.uk/user/74/183845.png" width="176" height="82" alt="" style="display:block;"></td>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183848.gif" width="1" height="31" alt="" style="display:block;"></td>
</tr>
<tr>
<td>
<a href="http://www.google.co.uk" target="_blank" style="display:block;"><img src="http://www.morley.leeds.sch.uk/user/74/183846.png" width="227" height="24" alt=""
style="display:block;"></td></a>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183848.gif" width="1" height="24" alt="" style="display:block;"></td>
</tr>
<tr>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183847.png" width="227" height="27" alt="" style="display:block;"></td>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183848.gif" width="1" height="27" alt="" style="display:block;"></td>
</tr>
</table>
</body>
</html>
You need to make the <a> display: block.
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
<html>
<head>
<title>website page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" width="50%" height="50%">
<!-- Save for Web Slices (website page.psd) -->
<table id="Table_01" width="1681" height="1051" border="0" cellpadding="0" cellspacing="0" align="center" >
<tr>
<td colspan="2">
<img src="images/website-page_01.gif" width="302" height="65" alt=""></td>
<td colspan="6">
<img src="images/website-page_02.gif" width="999" height="65" alt=""></td>
<td colspan="2">
<img src="images/website-page_03.gif" width="379" height="65" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="65" alt=""></td>
</tr>
<tr>
<td>
<img src="images/website-page_04.gif" width="3" height="1" alt=""></td>
<td rowspan="2">
<img src="images/website-page_05.gif" width="299" height="606" alt=""></td>
<td colspan="7" rowspan="2">
<img src="images/website-page_06.gif" width="1050" height="606" alt=""></td>
<td rowspan="2">
<img src="images/website-page_07.gif" width="328" height="606" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/website-page_08.gif" width="3" height="984" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="605" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/website-page_09.gif" width="639" height="379" alt=""></td>
<td rowspan="2">
<img src="images/website-page_10.gif" width="18" height="379" alt=""></td>
<td rowspan="2">
<img src="images/website-page_11.gif" width="342" height="379" alt=""></td>
<td colspan="2">
<img src="images/website-page_12.gif" width="22" height="1" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/website-page_13.gif" width="656" height="379" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/website-page_14.gif" width="21" height="378" alt=""></td>
<td>
<img src="images/website-page_15.gif" width="1" height="378" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="378" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="299" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="340" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="342" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="277" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="328" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
after I finished designing the page using PS and export it as html file, it is ok with 15 inch screen but very big with 13 inch screen.
how can I make it compatible with all screens , with out scrolling .
Solution Update:
I resized the psd file and make it smaller 780*800 , then export it as image/HTML and it is work fine now with all browsers.
You 15 inch display must have higher resolution than the 13 inch display. So its looking bigger. Your webpage should look same on any display having same resolution. You should check your resolution.
Make <img src="images/website-page_02.gif" width="999" height="65" alt=""></td> 's width smaller.
Solution Update: I resized the psd file and make it smaller 780*800 , then export it as image/HTML and it is work fine now with all browsers.
Sorry I'm completely new to this.
Ive designed a website in photoshop, and exported it 'for use with web and devices', (HTML/IMAGES). And I now want to be able to write and add content over a specific 'content slice' (images/GSGOPSD_13.gif (900px X 756px))
Here is the code i have from photoshop:
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<center>
<body bgcolor="#2c2c2c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (GSGOPSD.psd) -->
<table id="Table_01" width="1051" height="1235" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="images/GSGOPSD_01.gif" width="1050" height="359" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="359" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/GSGOPSD_02.gif" width="92" height="2" alt=""></td>
<td rowspan="3">
<img src="images/GSGOPSD_03.gif" alt="" name="Twittr" width="55" height="62" id="Twittr"></td>
<td colspan="2" rowspan="4">
<img src="images/GSGOPSD_04.gif" width="903" height="119" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/GSGOPSD_05.gif" width="13" height="873" alt=""></td>
<td colspan="2">
<img src="images/GSGOPSD_06.gif" alt="" name="Fbook" width="61" height="59" id="Fbook"></td>
<td colspan="2" rowspan="3">
<img src="images/GSGOPSD_07.gif" width="18" height="117" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/GSGOPSD_08.gif" width="61" height="58" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_09.gif" width="55" height="57" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="57" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_10.gif" alt="" name="thumdown" width="60" height="59" id="thumdown"></td>
<td colspan="2" rowspan="2">
<img src="images/GSGOPSD_11.gif" width="16" height="756" alt=""></td>
<td colspan="3">
<img src="images/GSGOPSD_12.gif" alt="" name="thumup" width="61" height="59" id="thumup"></td>
<td rowspan="2">
<img src="images/GSGOPSD_13.gif" width="900" height="756" alt=""></td>
<td> //------------I WANT TO ADD CONTENT OVER THIS IMAGE.
<img src="images/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_14.gif" width="60" height="697" alt=""></td>
<td colspan="3">
<img src="images/GSGOPSD_15.gif" width="61" height="697" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="697" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="55" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="900" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>
I thought that there would be a tut for this somewhere, and it would be a pretty simple thing, thanks for any help!
try going through this tutorial as I think it is what you are trying to aim for. You can relate it to your .psd along the way
You need to remove the image and then you will be able of insert content in the place where the image was.
BUT I would not recommend use tables for designing your layout and also do not use fixed sizes for widht/height. This should be achieved with CSS