Vertical Image Placement

I've modified a template and everything is working fine.  What I'm (my client) trying to do is find a way of placing within a second paragraph of my content.  Currently if defaults to the top right.  I've added another css entry to float right with preset image size (140x104 px) and a left padding of 6 px and abottom padding of 2 px.  The same problem..if I place my mouse in front of the second paragraph and add my image, it still puts it in front of the first paragraph. 

I'm fairly familiar with css and the inline code for the pages but it seems as though something else is determining where the images are placed.

Any help ....thank you in advance

fyredefyre fyredefyre, 7 years ago

Perhaps sharing your HTML may help. Otherwise, try <... valign="x"....> may fix your issue without using CSS.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
torweb, 7 years ago

Thanks for the reply.  I think "valign" will give it a specific vertical placement.  I need it to actually insert at the cursor point...like it would with any HTML type doc/page when adding an image to text.  It now seems to automatically place it at the top of the text body so you can put an image, say, two paragraphs done.  Suppose the first paragraph is about your trip to Spain and the second paragraph is a picture and paragraph about you drinking wine at a cafe while in spain.  I'll post the code below (though I don't if it's the correct thing to do on this forum).

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Template 9 - Left Sidebar</title>
   <style type="text/css" media="screen">
      body {
         margin: 0;
         padding: 0;
         background-color: #ffffff;
      }

      td.permission {
    padding: 12px 0;
    background-color: #D8E9E6;
      }

      td.permission p {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #151515;
      }

      td.permission p a {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #a72323;
      }

      td.header {
         background-image: url(header.jpg);
         background-repeat: no-repeat;
         background-position: center top;
         background-color: #028283;
         height: 130px;
      }

      td.header h1 {
         font-family: Georgia, serif;
         font-size: 30px;
         font-weight: normal;
         color: #333333;
         margin-left: 50px;
         margin-bottom: 24px;
      }

      table.content {
         background-color: #f5f5f5;
      }

      td.sidebar a {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 11px;
         font-weight: normal;
         color: #a72323;
         text-decoration: none;
      }

      td.sidebar ul {
         margin: 0 0 0 24px;
         padding: 0;
      }

      td.sidebar ul li,
      td.sidebar ul li a {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #a72323;
      }

      td.sidebar h3 {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 16px;
         font-weight: bold;
         color: #333333;
         margin: 10px 0 14px 0;
         padding: 0;
      }

      td.sidebar h3.buttons {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 16px;
         font-weight: bold;
         color: #333333;
         margin: 0 0 4px 0;
         padding: 0;
      }

      td.sidebar h4 {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 13px;
         font-weight: bold;
         color: #333333;
         margin: 0 0 2px 0;
         padding: 0;
      }

      td.sidebar p {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 11px;
         font-weight: normal;
         color: #505050;
         margin: 0 0 13px 0;
         padding: 0;
      }

      td.sidebar p.buttons {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 11px;
         font-weight: normal;
         color: #505050;
         margin: 0 0 4px 0;
         padding: 0;
      }

      td.border {
         border-right: 2px solid #e0e0e0;
      }

      td.mainbar a {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #028283;
         text-decoration: none;
      }

      td.mainbar h2 {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 16px;
         font-weight: bold;
         color: #4672A3;
         margin: 0 0 4px 0;
         padding: 0 0 4px 0;
         border-bottom: 1px solid #cbcbcb;
      }

      td.mainbar h3 {
         font-family: Georgia, serif;
         font-size: 16px;
         font-weight: normal;
         color: #333333;
         margin: 10px 0 14px 0;
         padding: 0;
      }

      td.mainbar p {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #333333;
         margin: 0 0 16px 0;
         padding: 0;
      }

      td.mainbar p.top {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: bold;
         color: #a72323;
         margin: 0 0 30px 0;
         padding: 0;
      }

      td.mainbar p.top a {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: bold;
         color: #a72323;
      }

      td.mainbar ul {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #333333;
         margin: 0 0 20px 24px;
         padding: 0;
      }

      td.footer {
         padding: 20px 0 20px 0;
      }

      td.footer p {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #151515;
      }
   </style>
</head>
<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="center">
         
         <table width="580" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td class="permission" align="center">
                  <p>You're receiving this newsletter because you are on our private email list.<br>
                  Having trouble reading this email? <webversion>View it on your browser</webversion>. Not interested anymore? <unsubscribe>Unsubscribe Instantly</unsubscribe>.</p>
              </td>
            </tr>
            <tr>
               <td class="header" align="left" valign="bottom">
                  <img src="header.jpg" alt="ABC Widgets" width="580" height="130" />
               </td>
            </tr>
            <tr>
               <td>
                  <table width="580" height="130" border="0" cellspacing="16" cellpadding="0" class="content">
                     <tr>
                        <td class="sidebar" align="left" valign="top" width="192">
                           <h3>In This Issue</h3>
                           <ul>
                              <tableofcontents>
                                <li><$repeatertitle$></li>
                              </tableofcontents>
                           </ul>
                           <img src="hr-small.gif" alt="Small hr" width="192" height="28" />
                           
                           <h3>Also This Month</h3>
                           
                           <repeater>
                              <h4><$title link='true' default='Enter your title'$></h4>
                              <$description default='<p>Enter your description</p>'$>
                           </repeater>
                           
                           <img src="hr-small.gif" alt="Small hr" width="192" height="28" />
                           
                           <h3 class="buttons">Forward</h3>
                           <p class="buttons">Know someone who might be interested in the email? <forwardtoafriend>Forward this email to a friend</forwardtoafriend>.</p>
                           <img src="hr-small.gif" alt="Small hr" width="192" height="28" />
                           
                           <h3 class="buttons">Unsubscribe</h3>
                           <p class="buttons">If you no longer wish to receive this email <unsubscribe>please unsubscribe</unsubscribe>.</p>
                           
                        </td>
                        <td class="border" width="2">&nbsp;</td>
                        <td class="mainbar" align="left" valign="top" width="354"><p><$currentdayname$> <$currentmonthname$> <$currentday$>, <$currentyear$></p>
                          <repeater toc='true'>
  <h2><$title link='true' default='Enter your title'$></h2>
                                <img src="<$imagesrc link='true'$>" alt="Inline Image" width="144" height="144" align="right" />
                              <$description default='<p>Enter your description</p>'$>
                                <p class="top"><a href="#top">back to top</a> <img src="top-arrow.gif" alt="Back to top" width="8" height="8" /></p>
                          </repeater>
                             
                      </td></tr>
                  </table>
               </td>
            </tr>
         </table>
         <table width="580" border="0 cellspacing="0" cellpadding="0">
            <tr>
               <td align="center" valign="top"><img src="footer-tail.jpg" width="580" height="30"></td>
            </tr>
            <tr>
               <td align="center" class="footer"><p>Stetson Powel Orthopedics <br />
                   191 South Buena Vista Street - Suite 470 - Burbank, CA 91505 - PH 818-848-3030<BR>
               </p></td>
            </tr>
        </table>
      </td>
   </tr>
</table>

</body>
</html>

torweb, 7 years ago

Any Ideas?

fyredefyre fyredefyre, 7 years ago

Unless you wish to add padding-top: *px then you won't really be able to line up the image with a second paragraph, otherwise you could create a custom cell for the image to sit in which is probably what I would reccomend.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
torweb, 7 years ago

If I understand your reply, if I have a section of content with two paragraphs and my client wants to add an image at the start of the second paragraph, it will still be placed automatically at the top of the paragraph...not where he places his cursor and clicks "add image."

Too bad...also the fact that it's not possible to add two images to the above example...one for the first paragraph and one for the second.  Seems the only possibility is to create two separate sections of content

Still a GREAT application..but darn, they always seem to leave out some obvious things..

fyredefyre fyredefyre, 7 years ago

Ultimately at the end of the day, you're still restricted to the limitations of HTML.

By building a table with two cells your client could just add an extra row and slot in the image accordingly. Perhaps a little training your client may be able to do this quite easily.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
Mathew Mathew, 7 years ago

A custom cell would be the way to go, as suggested above.

We appreciate we don't have exactly what you want, but what you might consider to be an obvious requirement, others would see as unnecessary distractions and low priority...you can imagine the number of different requests we get!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
torweb, 7 years ago

Thanks for the reply Matthew.  First I really like the application and am using it, building my templates from scratch without any real technical issues...that is they work great.

The idea of image placement is really a standard requirement in dozens of CMS applications.  If I have three paragraphs and the second is talking about my client's promotion and I want to insert a thumbnail of "mr. client" I should be able to click there, insert image, and have it wrap...again, it works that way with blog templates, cms applications, wysiwyg html editors, and etc.  I thought it was real basic with regards to page formatting and not an unnecessary distraction.  As it is now, I will need to do a whole bunch of "code trickery" to deal with this. 

I just built four templates for different client who all asked how they could place an image somewhere besides the top or bottom of their content...I've got eight more clients in the loop that I'm sure will ask the same thing.  It's something they are used to seeing.

I know your design guideline is to keep it simple, and again to that end things work fantastic!!!!

Campaign Monitor and become a nice little source of revenue for me with regards to template design. I don't even have a problem going up against Constant Contact.  This would just be one of those changes that would really make a difference in how a page could be built to look more like a "hand-built" newsletter...

Thanks for a great tool

torweb, 7 years ago

One more question before I put this post out of my head until further notice....

I did get things to work my inserting an image while viewing the page in Source (html) mode.  It looks great except the image won't display in my email application unless I opt to view the page in a browser.  This is out of my expertise, but is there a way to get the image to display in the email window?  Here is the code I used for the content in HTML mode:

<p><img hspace="6" align="left" style="width: 130px; height: 130px;" alt="" src="http://consultyounet.createsend.com/ei/r/A1/BEC/790/byhgk/shire_web1.jpg" />Real Estate Development &amp; Management Services<br />

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
1-888-533-8098