|
|
|
Question : Outlook and HTML Newsletter Background images
|
|
I am having a real problem with wrapping my head around this one
I made a html newsletter it looks good in everything that I view it in (hotmail, gmail, and other webmails) except for outlook
and its because of the background images and I can't think of a way of desiging it without using repeating background iamges or percentage based image heights
which neither of which work in outlook
I have a box with white text in it
the text changes all the time so I constrain the width but the height changes
I want to have a border with a drop shadow around the box how can I do this in outlook?
|
Answer : Outlook and HTML Newsletter Background images
|
|
Hi BTMExpert
Here's one I made for out Information Systems Team, the file was saved into C:\Program Files\Common Files\Microsoft Shared\Stationery\ I also saved my one image Banner.jpg to this directory (at root level). I've removed all of my information but you get the gist.
Hope that helps.
Cheers
<html>
<head>
<title>Company Group Name</title>
<meta http-equiv="Content-Type" content="text/html;">
<style type="text/css">
<!--
html, body, #CenterTable {
height:100%;
padding: 0px;
border: none;
text-align: center;
position: relative;
width: 760px;
margin: 0px;
}
a {
color: #993300;
text-decoration: none;
}
#Banner {
height: 101px;
text-align: center;
}
#CenterTable {
border:1 solid #3A677C}
#Content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
vertical-align: top;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.Footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-align: left;
vertical-align: top;
color: #3F657C;
height: 80px;
background-color: #EEEEEE;
padding: 10px;
border-top: 1px solid #3F657C;
border-right: #3F657C;
border-bottom: #3F657C;
border-left: #3F657C;
}
-->
</style>
</head>
<body bgcolor="#ffffff">
<!-- Start Table -->
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" id="CenterTable">
<tr>
<!-- Start Banner -->
<td colspan="4" id="Banner"><img name="Banner" src="Banner.jpg" width="760" height="101"></td>
<!-- End Banner -->
</tr>
<tr>
<!-- Start Content -->
<td colspan="4" id="Content"> </td>
<!-- End Content -->
</tr>
<tr>
<!-- Start Footer -->
<td width="190" class="Footer">
Name<br>
Job Title<br>
Job Group<br>
Company<br>
</td>
<td width="190" class="Footer">
Company Branch<br>
Street<br>
Private Bag 1234<br>
City, New Zealand<br>
<a href="http://www.mydomain.com">www.mydomain.com</a>
</td>
<td width="190" class="Footer">
<div align="right">
Fax:<br>
Phone:<br>
Direct:<br>
Mobile:<br>
Email:<br>
</div>
</td>
<td width="190" class="Footer">
+64 1 123 1234<br>
+64 1 123 1234 Ext: 1234<br>
+64 1 123 1234<br>
+64 12 123 1234<br>
<a href="mailto:email@mydomain.com">email@mydomain.com</a>
</td>
<!-- End Footer -->
</tr>
</table>
</body>
</html>
|
|
|
|
|
|
|
