Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Placing Text On Top Of Image

    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 -->

  • #2
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by LP32 View Post
    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?

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    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.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •