Search code examples
htmlhtml-tablealignmenthtml-emailemail-client

Paragraph not aligned properly

Basically I am trying to create an email template using HTML and Dreamweaver. It's my first template. The fact that I cannot use <div> tag for email templates is really giving me headache. I am having difficulty aligning the social icons with the "I am social text". They both are assigned with align="center" inside the td tag. The image that is displayed below is "footer" section of my email template.

Here's the screenshot:

enter image description here

I am only posting the code for footer section because my content and header section is working fine.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrickyPhotoshop Newsletter</title>
<style type="text/css">
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    background: #CCC;
}
 h4.copyright, p.copyright {
    padding-left: 50px;
    color: #FFF
}
h4.social {
    padding-left: 50px;
    color: #fff;
}
p.footer {
    color: #FFF;
}
</style>
</head>

<body>

<table width="600" align="center" bgcolor="#999999">
  <tr>
    <td align="center"><h4 class="social">I am also social</h4></td>
  </tr>
  <tr>
    <td align="center"><p class="footer">
        <a href="http://www.facebook.com/trickyphotoshop">
          <img src=
"images/Facebook-256.gif" width="25px" height="25px"/>
        </a>
        <a href="http://www.tricky-photoshop.com">
          <img src="images/g+.gif" width="25px" height="25px" />
        </a>
        <a href="http://www.twitter.com/trickyphotoshop/">
          <img src="images/twitter.gif" width="25px" height="25px" />
        </a>
      </p></td>
  </tr>
  <tr>
    <td height="10"><h4 class="copyright">Copyright Area</h4></td>
  </tr>
  <tr>
    <td height="10"><p class="copyright">
        &copy All rights reserved
      </p></td>
  </tr>
</table>
</body>
</html>

Basically I want two things:

  1. I want to properly align "I am also social" text with the three icons i.e. facebook, twitter, google+
  2. As you can see there is a huge space between "Copyright Area" and "All Rights Reserved". I want to remove this space.

I know that my code is not too much professional but it's my first HTML code.

Solution

  • You should change the style as follows:

    h4.social {
  /* remove: padding-left: 50px; */
  color: #fff;
}
h4.copyright, p.copyright {
  padding-left: 50px;
  margin: 0px; /* add this line */
  color: #FFF;
}

    I recommend using this chrome extension for "playing" with CSS changes