Help! Can't get newsletter centred & need some images made into links!

I have designed a newsletter in Photoshop and have converted it to code using

I have then uploaded it to Campaign Monitor.

However, there are issues -

1. It is not centred

2. I need the 'Twitter' and 'Facebook' images to be links

3. I need the 'Contactushere' image made into an email link

4. I need an unsubscribe link added

Does anyone think they could help me?


Code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "">
<html xmlns="">
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <style type="text/css">
 body {
     margin: 0;
     padding: 0;
      left: 0px; 
      top: 0px; 
      position: relative; 
      margin-left: auto; 
      margin-right: auto; 
      width: 690px;
      height: 1783px; 
      overflow: hidden;

      left: 0px; 
      top: 0px; 
      position: absolute; 
      width: 690px;
      height: 1783px;

      left: 74px; 
      top: 1614px; 
      position: absolute; 
      width: 522px;
      height: 127px;

      left: 444px; 
      top: 1684px; 
      position: absolute; 
      width: 27px;
      height: 10px;

      left: 425px; 
      top: 1642px; 
      position: absolute; 
      width: 28px;
      height: 22px;

      left: 43px; 
      top: 44px; 
      position: absolute; 
      width: 603px;
      height: 775px;

      left: 32px; 
      top: 874px; 
      position: absolute; 
      width: 627px;
      height: 228px;

      left: 66px; 
      top: 1406px; 
      position: absolute; 
      width: 519px;
      height: 159px;

      left: 69px; 
      top: 1134px; 
      position: absolute; 
      width: 555px;
      height: 227px;

      left: 234px; 
      top: 87px; 
      position: absolute; 
      width: 218px;
      height: 165px;

      left: 389px; 
      top: 1643px; 
      position: absolute; 
      width: 23px;
      height: 22px;

          <div id="background">
               <div id="Background"><img src="images/Background.png"></div>
               <div id="Footer"><img src="images/Footer.png"></div>
               <div id="Contactushere"><img src="images/Contactushere.png"></div>
               <div id="Twitter"><img src="images/Twitter.png"></div>
               <div id="Illustration"><img src="images/Illustration.png"></div>
               <div id="CelebratedAustralian"><img src="images/CelebratedAustralian.png"></div>
               <div id="TheSydneyboxcoincide"><img src="images/TheSydneyboxcoincide.png"></div>
               <div id="Boxandmacarons"><img src="images/Boxandmacarons.png"></div>
               <div id="Signature"><img src="images/Signature.png"></div>
               <div id="Facebook"><img src="images/Facebook.png"></div>
dedra dedra, 1 year ago

Hi marapage,

at first, ID attribute is case-insensitive, then "background" and "Background" is the same. Change all ID's to unique name for separate CSS for both different "<div>" elements.

Then edit CSS and do not use "position: absolute;" and/or "position: relative;" style. Update your CSS, so that you do not use "top" and/or "left" style, only where it is needed, but rather use margins instead position.

If you can centered it, put main "<div>" element into another "<div>" element and add style attribute "text-align: center;" to it for Internet Explorer and / or Outlook, second "<div>" element leave as is, but add "margin: 0px auto;". Both make your content centered in all e-mail clients and web browsers.

To make some images as link, you must put image to "<a>" element.

Please read some documents about HTML, CSS and mainly CampaignMonitor CSS Suport Guide here for learn which clients support or does not support which element style.

Finally, you can decide, if you use page layout with "<div>" elements, or you use layout with tables. One way or another, for some mail clients you must use inline style instead CSS "<style>" element, even in "<head>" or "<body>" element.

At last, you can download some template from Campaign Monitor templates gallery and look on it, how it is designed and styled.


kairav22, 1 year ago

to make image as a link, use this :

<div id="Facebook"><a href="http://xxx"><img src="images/Facebook.png"></a></div>

change "xxx" with link you wanted.

Jual beli mobil bekas, mobil murah, audio mobil dan info modifikasi mobil - Raja Mobil.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free