I'm having trouble placing my background image, in the background of my text. I'm using the code I have but it always ends up placing the image in front of my text. Here is the code:
<html>
</style>
<head>
<title>Testing</title>
</head>
<h1 style="text-align: center;">
<img alt="" src="header.png" />
</h1>
<p> </p>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td style="width: 50%">
<h2>
<span style="color: #ffd700;"><span
style="background-color: #0000ff;">Unknown</span>
</h2>
</td>
<td> </td>
<td style="width: 50%">
<h2>
<span style="color: #ffd700;"><span
style="background-color: #0000ff;">Unknown</span>
</h2>
</td>
</tr>
<tr>
<td>
<h4>
<strong>(A bunch of text I had)</strong>
</h4>
<h4>
<strong>(More Text)</strong>
</h4>
<h4>
<strong>(Text)</strong>
</h4>
</td>
<td> </td>
<td>
<p>
<img alt="" src="image.png" />
</p>
<p style="margin: 0in; margin-bottom: .0001pt">
<strong>Person</strong>
<o:p></o:p>
</p>
<p style="margin: 0in 0in 0.0001pt;">
<strong>(More text)</strong>
<o:p></o:p>
</p>
<p style="margin: 0in 0in 0.0001pt;">
<strong>(More text)</strong>
<o:p></o:p>
</p>
<p style="margin: 0in 0in 0.0001pt;">
<strong>(More text)</strong>
<o:p></o:p>
</span>
</p>
<p style="margin: 0in; margin-bottom: .0001pt">
<strong><a href="www.google.com"(Moretext)></a></strong></a>
<o:p></o:p>
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
</div>
</html>
Forgot to add the background image code I had:
<div style="z-index:0;left:0;top:0;width:100%;height:100%">
<img src="background.png" style='width:100%;height:100%'/>
<div style="background: url(background.png);">
Don't use the <img> code - it's unnecessary with this.
And I'd advise you to avoid using z-index unless you really need to because if it's the only one it can probably be avoided using positioning or floats.
Related
I am tring to get word file from HTML . The problem I am facing is that the header and footer repeating on first page of word in body.Is there is work around to remove or hide the table.
I have tried using margin property but that left empty space between header and body (I will show in screen shot).
enter image description here
The code that I am using :
HTML :
<div class="main">
<table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0'>
<tr>
<td>
<div class="header" style='mso-element:header' id="header1">
<p class="MsoHeader">
<table style="float: right;width: 100%;">
<tbody>
<tr>
<td align="right">
<!--<img src="{!URLFOR($Resource.PDF,'PDF/AdaniPort.png')}" style="float: right;" />-->
<img src="https://adanicf--portsdev--c.cs5.content.force.com/servlet/servlet.ImageServer?id=015O00000031R1i&oid=00DO000000555mR&lastMod=1565955266000" height='80' width='60' style="float: right;width=2% !important;height=6% !important"/>
</td>
</tr>
<tr>
<td align="right"><b>{!LogoPortName}</b>
</td>
</tr>
<tr>
<td>
<hr size="2" style="color: black;" />
</td>
</tr>
</tbody>
</table></p>
</div>
</td>
<td>
<div class="footer" style='mso-element:footer' id="footer1">
<p class="MsoFooter">
<!-- <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div> -->
<table id="ftrtbl" style="float: right;width: 100%;">
<tr>
<td colspan="2">
<hr size="2" style="color: black;" />
</td>
</tr>
<tr>
<td style="width:40%;font-size:14px;" align="left" >This Document is strictly confidential</td>
<td style="width:40%;font-size:14px;" align="left" >{!quote.Ref_No__c}</td>
<td style="width:20%;font-size:14px;" align="right"> Page <span style='mso-field-code: PAGE '></span> of <span style='mso-field-code: NUMPAGES '></span><span class="pagenumber" />
</td>
</tr>
</table>
</p>
</div>
</td>
</tr>
CSS (using margin):
#page main {
mso-header:header1;
mso-footer:footer1;
mso-paper-source:0;
mso-header-margin:0.5in;
mso-footer-margin:0.5in;
}
div.main {
page:main;
}
p.MsoFooter, li.MsoFooter, div.MsoFooter {
mso-pagination:widow-orphan;
tab-stops:center 216.0pt right 432.0pt;
}
p.MsoHeader, li.MsoHeader, div.MsoHeader {
mso-pagination:widow-orphan;
width:1px;
height:1px;
}
table#hrdftrtbl{
margin:50in 0in 0in 15in;}
Already Answered kindly check the link
How to use HTML to print header and footer on every printed page of a document?
thead: this is for the repeated header.
tfoot: the repeated footer.
tbody: the content.
I have not found the proper solution but the trick worked for me is I changed the position of header-footer code below the body tag so that the empty space will be shifted from first page to last page.
exp:
Before:
<div class="main">
---------
-----------
</div>
<body>
----------
----------
</body>
After:
<body>
----------
----------
</body>
<div class="main">
---------
-----------
</div>
I have designed a Email Template that we are going to use for one of our client. When i see it from the System Preview i am able to see the color but once email is received the format is set but color is not visible it is displaying as Black & White photo without any colors in the body.
Below is my CSS Code:
<p style="text-align: left;"><span style="font-family: cambria;"> <span style="font-size: 18pt;"> <span style="color: #00629f;">IBM Service Desk</span> </span> </span> <span style="font-family: cambria;"> <img style="align: right;" title="" src="sys_attachment.do?sys_id=0d50b5462f49c010209857892799b644" alt="" width="60" height="60" align="right" border="" hspace="" vspace="" /></span></p>
<style><!--
table {
font-family: cambria;
}
td.bg1{
background-color:#E2E2E3;
color:#00629F;
}
td.bg2{
color:black;
}
--></style>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p>Click here to view Incident: ${URI_REF}</p>
</td>
</tr>
<tr>
<td class="bg1" colspan="5">Short Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${short_description}</td>
</tr>
<tr>
<td class="bg1" colspan="5">Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${description}</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-family: cambria;"><span style="font-size: 12pt;">Thank you</span>,</span></p>
<p><span style="font-family: cambria;"><span style="font-size: 14pt;"><span style="color: #00629f;">IBM Service Desk</span> </span></span></p>
Output when i previewed in the System:
System Preview Email
Once it is received to outlook then the email i am getting as shown Outlook Email
There is no any big mistake in your code, Please arrange your code properly. Table data color not shown because the style property not consuming. In your code you put the style tag as alone, Please move your style tag into head tag. The code will be work fine.
<head>
<style>
table {
font-family: cambria;
}
td.bg1{
background-color:#E2E2E3;
color:#00629F;
}
td.bg2{
color:black;
}
</style>
</head
<body>
<p style="text-align: left;"><span style="font-family: cambria;"> <span style="font-size: 18pt;"> <span style="color: #00629f;">IBM Service Desk</span> </span> </span> <span style="font-family: cambria;"> <img style="align: right;" title="" src="sys_attachment.do?sys_id=0d50b5462f49c010209857892799b644" alt="" width="60" height="60" align="right" border="" hspace="" vspace="" /></span></p>
<style>
</style>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p>Click here to view Incident: ${URI_REF}</p>
</td>
</tr>
<tr>
<td class="bg1" colspan="5">Short Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${short_description}</td>
</tr>
<tr>
<td class="bg1" colspan="5">Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${description}</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-family: cambria;"><span style="font-size: 12pt;">Thank you</span>,</span></p>
<p><span style="font-family: cambria;"><span style="font-size: 14pt;"><span style="color: #00629f;">IBM Service Desk</span> </span></span></p>
</body>
I want to make two div content center "16) test". here please don't remove table. So. Please let me know. How i can do in my case using css ?
Result like . No need line but content center
<div style="width:946px;">
<div style="display: inline-block;">
<div style="float: left; padding-right: 15px; padding-left: 30px; vertical-align: middle;text-align:center; " class="no">
<strong>
<span style="font-size:11.0pt">
16)
</span>
</strong>
</div>
<div style="float: left; width: 765px; word-wrap: break-word; vertical-align: middle;text-align:justify;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<span style="font-size:30.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<span style="font-size:15.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="width:946px;">
<div style="display: table;">
<div style="display:table-cell; padding-right: 15px; padding-left: 30px; vertical-align: middle;text-align:center; " class="no">
<strong>
<span style="font-size:11.0pt">
16)
</span>
</strong>
</div>
<div style="display:table-cell; width: 765px; word-wrap: break-word; vertical-align: middle;text-align:justify;position:relative;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<span style="font-size:30.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="position:absolute;">
<tbody>
<tr>
<td>
<span style="font-size:15.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Vertical alignment of text can be achieved easily by tables. Just make your floating divs displayed as table cell as in the code snippet below.
This code has a lot of inline styles and unused HTML. If needed you can use the code at the bottom to achieve the same result in very less code.
<div style="width:946px;">
<div style="display: table;">
<div style="display:table-cell; padding-right: 15px; padding-left: 30px; vertical-align: middle;text-align:center; " class="no">
<strong>
<span style="font-size:11.0pt">
16)
</span>
</strong>
</div>
<div style="display:table-cell; width: 765px; word-wrap: break-word; vertical-align: middle;text-align:justify;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<span style="font-size:30.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--Simpler approach with inline styles-->
<table>
<tr>
<td style="font-size:11pt; padding: 0 15px 0 30px;"><b>16)</b></td>
<td style="font-size:30.0pt; text-align: left; width: 765px;">Test</td>
</tr>
</table>
have problem with email outlook signature of images which is scalling to bigger sizes, but only in MS outlook 2010.. in new versions everything is ok..
email signature html:
<table border="0" cellspacing="0" style="width: 470px; color: gray; font-family: arial;" width="470px" height="115px">
<tr>
<td width="120px">
<img alt="" src="https://wearemarketing.lt/fez/logo-lt_120d.png" style="margin-left: 4px;" width="120px" height="115px" alt="t" />
</td>
<td style="" width="320px">
<p>
<span class="name" style="font-size: 14pt;">
NAME SURNAME
</span>
<br>
<span class="position" style="font-size: 12pt;">
POSITION
</span>
<br />
</p>
<p style="font-size: 10pt;">
<span class="address">
ADDRESS
</span>
<br>
<span class="tels">
PHONE
</span>
<br>
<span class="mob">
ANOTHER PHOINE
</span>
<br/>
<br/>
</p>
</td>
</tr>
<tr>
<td colspan="2" width="470px">
<img alt="" src="https://wearemarketing.lt/fez/long-lt_470d.png" style="width: 470px;" width="470px" height="89px" alt="t" />
</td>
</tr>
</table>
and is it possible to use not .png, but .svg images?
It looks like you are confusing the formatting of table values for width and height with the way we code CSS values. They are different. In your code you added px to when defining heights with tables and images.
For <table>:
This is correct: width="200"
This is incorrect: width="200px"
I tested your code with a simple HTML wrapper with my fixes in Litmus and Outlook 2010 and the size now looks roughly the same. I didn't measure.
SVG Images:
Outlook, Android and Gmail do not work with SVG images. I suggest sticking with PNG.
Good Luck.
Working Outlook Footer:
<table border="0" cellspacing="0" style="width: 470px; color: gray; font-family: arial;" width="470" height="115">
<tr>
<td width="120">
<img alt="" src="https://wearemarketing.lt/fez/logo-lt_120d.png" style="margin-left: 4px;" width="120" height="115" alt="t" />
</td>
<td style="" width="320">
<p>
<span class="name" style="font-size: 14pt;">
NAME SURNAME
</span>
<br>
<span class="position" style="font-size: 12pt;">
POSITION
</span>
<br />
</p>
<p style="font-size: 10pt;">
<span class="address">
ADDRESS
</span>
<br>
<span class="tels">
PHONE
</span>
<br>
<span class="mob">
ANOTHER PHOINE
</span>
<br/>
<br/>
</p>
</td>
</tr>
<tr>
<td colspan="2" width="470">
<img alt="" src="https://wearemarketing.lt/fez/long-lt_470d.png" style="width: 470px;" width="470" height="89" alt="t" />
</td>
</tr>
</table>
As seen in the green circle. Any ideas as to why this would be happening?
Here is my code:
<table style="margin-top:40px;margin-left:0px;margin-bottom:30px;width:95%" border="0">
<tr height="45">
<td width="105">
<span style="font-family:'Calibri',helvetica,San-Serif;font-size:15px;color:#333;line-height:15px"><b style="font-weight: bold;">CONCUR </b><b style="color:#DE2C38; font-weight:normal;">LABS</b>
</td>
<td>
<div style="height:45px; width:1px; background:#888; margin-right: 2px;"> </div>
</td>
<td>
<span style="font-family:'Calibri',helvetica,San-Serif;font-size:12px;color:#333;line-height:15px"><b style="font-weight: bold;">Alicia</b>, Sr User Experience Designer<br />
<span style="font-family:'Calibri',helvetica,San-Serif;font-size:12px;color:#333;line-height:22px">123.456.7891</b> <b style="color:E9212D;">|</b> alicia#website.com</span>
</td>
</tr>
</table>
Your html have some messy tags, the first <span> not being properly closed in particular.
<table style="margin-top:40px;margin-left:0px;margin-bottom:30px;width:95%" border="0">
<tr height="45">
<td width="105">
<span style="font-family:'Calibri',helvetica,San-Serif;font-size:15px;color:#333;line-height:15px"><b style="font-weight: bold;">CONCUR </b><b style="color:#DE2C38; font-weight:normal;">LABS</b></span>
</td>
<td>
<div style="height:45px; width:1px; background:#888; margin-right: 2px;"> </div>
</td>
<td>
<span style="font-family:'Calibri',helvetica,San-Serif;font-size:12px;color:#333;line-height:15px"><b style="font-weight: bold;">Alicia</b>, Sr User Experience Designer<br />
<span style="font-family:'Calibri',helvetica,San-Serif;font-size:12px;color:#333;line-height:22px">123.456.7891 <b style="color:E9212D;">|</b> alicia#website.com</span>
</td>
</tr>
</table>
There was an un-opened </b> tag and a horrible title:"Call me" I corrected too. :p