Help Placing Text On Top Of Image

LP32 · 12-02-2011, 03:00 AM

Hi,

I am making some modifications to an email template and want three one (or two) word columns of text on top of my banner image in the top of the email. I want the text to be on the bottom of the image and read "December 2011" "View Online" and "Forward" respectively.

As you can (hopefully) tell from the code below, right now I have the December, View and Forward text as a table below the image. Is there a way to move that text up and place it on top of the image (so there's not that extra white space below)?

I've tried the image background method but seem to be missing something in application. All help is appreciated. Thank you in advance.

Code:

 <table align="center" cellpadding="0" cellspacing="0" id="container" style="width: 100%; margin: 0pt; padding: 0pt; background-color: rgb(238, 238, 238);">
      <!-- Start of main container -->
      <tbody>
        <tr>
          <td style="padding: 0pt 20px;">
            <p>
              <!--Start of Logo and view online | forward links --></p>
            <p>
      <table align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse; text-align: left; font-family: Arial,Helvetica,sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: rgb(153, 153, 153); margin: 0pt auto;" width="620">
              <tbody>
                <tr>
                  <td colspan="3" style="color: rgb(255, 255, 255); padding: 20px 0pt;">
                    <span style="color: rgb(51, 51, 51);"><img alt="" height="90" src="https://staticapp.icpsc.com/icp/loadimage.php/mogile/611237/b933eb6deae68a1fa8bf7731a63fe47d/image/jpeg" style="width: 620px; height: 90px; border-width: 0px; border-style: solid; border-color: rgb(255, 255, 255); margin: 0px; display: inline;" width="620" /></span></td>
                </tr>
                <tr>
                  <td style="color: rgb(255, 255, 255); padding: 20px 0pt;">
                    <span style="color: rgb(51, 51, 51);">December 2011</span></td>
                  <td style="padding: 20px 0pt;" valign="bottom" width="100">
                    <img alt="-" border="0" height="7" src="https://staticapp.icpsc.com/icp/loadimage.php/mogile/611237/0caa12edb4b86425e2555515ed45f1ee/image/gif" width="10" /><a href="#" style="border-bottom: 1px dotted rgb(218, 32, 54); text-decoration: none; color: rgb(218, 32, 54);">View online</a></td>
                  <td style="padding: 20px 0pt;" valign="bottom" width="100">
                    <img alt="-" border="0" height="7" src="https://staticapp.icpsc.com/icp/loadimage.php/mogile/611237/0caa12edb4b86425e2555515ed45f1ee/image/gif" width="10" /><a href="#" style="border-bottom: 1px dotted rgb(218, 32, 54); text-decoration: none; color: rgb(218, 32, 54);">Forward</a></td>
                </tr>
              </tbody>
            </table>
            <!--End of Logo and view online | forward links --><!--Start of main content container - row#1 -->

rj_yan31 · 12-02-2011, 05:41 AM

Quote:

Originally Posted by LP32

Hi,

I am making some modifications to an email template and want three one (or two) word columns of text on top of my banner image in the top of the email. I want the text to be on the bottom of the image and read "December 2011" "View Online" and "Forward" respectively.

As you can (hopefully) tell from the code below, right now I have the December, View and Forward text as a table below the image. Is there a way to move that text up and place it on top of the image (so there's not that extra white space below)?

I've tried the image background method but seem to be missing something in application. All help is appreciated. Thank you in advance.

Code:

 <table align="center" cellpadding="0" cellspacing="0" id="container" style="width: 100%; margin: 0pt; padding: 0pt; background-color: rgb(238, 238, 238);">
      <!-- Start of main container -->
      <tbody>
        <tr>
          <td style="padding: 0pt 20px;">
            <p>
              <!--Start of Logo and view online | forward links --></p>
            <p>
      <table align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse; text-align: left; font-family: Arial,Helvetica,sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: rgb(153, 153, 153); margin: 0pt auto;" width="620">
              <tbody>
                <tr>
                  <td colspan="3" style="color: rgb(255, 255, 255); padding: 20px 0pt;">
                    <span style="color: rgb(51, 51, 51);"><img alt="" height="90" src="https://staticapp.icpsc.com/icp/loadimage.php/mogile/611237/b933eb6deae68a1fa8bf7731a63fe47d/image/jpeg" style="width: 620px; height: 90px; border-width: 0px; border-style: solid; border-color: rgb(255, 255, 255); margin: 0px; display: inline;" width="620" /></span></td>
                </tr>
                <tr>
                  <td style="color: rgb(255, 255, 255); padding: 20px 0pt;">
                    <span style="color: rgb(51, 51, 51);">December 2011</span></td>
                  <td style="padding: 20px 0pt;" valign="bottom" width="100">
                    <img alt="-" border="0" height="7" src="https://staticapp.icpsc.com/icp/loadimage.php/mogile/611237/0caa12edb4b86425e2555515ed45f1ee/image/gif" width="10" /><a href="#" style="border-bottom: 1px dotted rgb(218, 32, 54); text-decoration: none; color: rgb(218, 32, 54);">View online</a></td>
                  <td style="padding: 20px 0pt;" valign="bottom" width="100">
                    <img alt="-" border="0" height="7" src="https://staticapp.icpsc.com/icp/loadimage.php/mogile/611237/0caa12edb4b86425e2555515ed45f1ee/image/gif" width="10" /><a href="#" style="border-bottom: 1px dotted rgb(218, 32, 54); text-decoration: none; color: rgb(218, 32, 54);">Forward</a></td>
                </tr>
              </tbody>
            </table>
            <!--End of Logo and view online | forward links --><!--Start of main content container - row#1 -->

can you post the whole html and css so i can picture out what you are trying to do?

resdog · 12-02-2011, 01:23 PM

When you're dealing with HTML emails, this kind of thing isn't possible. Some email clients will allow you to do background-image and position, but clients like Outlook don't allow it.

The best way to do it so it's compatible with ALL email clients would be to create the composite in photoshop and then slice it up. Then put the images into a table layout, making sure to add the "alt" tags so people can see what the links are. And also make a multi-part email.