Need to add a divider image

I would like to have dividers between layout sections with the code below:

<repeater>
<layout label='New Feature'>
  <h2>
   <singleline label="Title" repeatertitle='true' >Title of new feature</singleline>
  </h2>
  <multiline label="Description" >Description</multiline>
</layout>

<layout label='Article, tip or resource'>
  <h2>
   <singleline label="Title" repeatertitle='true' >Title of Article</singleline>
  </h2>
  <multiline label="Description" >Description</multiline>
</layout>

<layout label='Gallery Highlights'>
 <img src="gallery.png" width="140" editable label="Image 1"><br />
 <img src="gallery.png" width="140" editable label="Image 2"><br />
 <img src="gallery.png" width="140" editable label="Image 3">
</layout>
</repeater>
JohnP JohnP, 3 years ago

Just put an image in between each layout section inside the repeater code:

<img style="margin: 0; border: 0; padding: 0; display: block;" src="Images/Divider.png" width="420" height="30" alt="">
roshodgekiss roshodgekiss, 3 years ago

Hey there, to second JohnP, even an <hr> or something like <table style="border-bottom: 1px solid #cccccc;"> may do the trick :)


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

I can see the divider when editing with Dreamweaver but they're gone when I send myself a test.  I hate to plaster code all over the place but this one has me puzzled.  Here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
@media only screen and (max-device-width: 480px) { 
table[class=w0], td[class=w0] { width: 0 !important; }
table[class=w10], td[class=w10], img[class=w10] { width:10px !important; }
table[class=w15], td[class=w15], img[class=w15] { width:5px !important; }
table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }
table[class=w60], td[class=w60], img[class=w60] { width:10px !important; }
table[class=w125], td[class=w125], img[class=w125] { width:80px !important; }
table[class=w130], td[class=w130], img[class=w130] { width:55px !important; }
table[class=w140], td[class=w140], img[class=w140] { width:90px !important; }
table[class=w160], td[class=w160], img[class=w160] { width:180px !important; }
table[class=w170], td[class=w170], img[class=w170] { width:100px !important; }
table[class=w180], td[class=w180], img[class=w180] { width:80px !important; }
table[class=w195], td[class=w195], img[class=w195] { width:80px !important; }
table[class=w220], td[class=w220], img[class=w220] { width:80px !important; }
table[class=w240], td[class=w240], img[class=w240] { width:180px !important; }
table[class=w255], td[class=w255], img[class=w255] { width:185px !important; }
table[class=w275], td[class=w275], img[class=w275] { width:135px !important; }
table[class=w280], td[class=w280], img[class=w280] { width:135px !important; }
table[class=w300], td[class=w300], img[class=w300] { width:140px !important; }
table[class=w325], td[class=w325], img[class=w325] { width:95px !important; }
table[class=w360], td[class=w360], img[class=w360] { width:140px !important; }
table[class=w410], td[class=w410], img[class=w410] { width:180px !important; }
table[class=w470], td[class=w470], img[class=w470] { width:200px !important; }
table[class=w580], td[class=w580], img[class=w580] { width:280px !important; }
table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }
table[class*=hide], td[class*=hide], img[class*=hide], p[class*=hide], span[class*=hide] { display:none !important; }
table[class=h0], td[class=h0] { height: 0 !important; }
p[class=footer-content-left] { text-align: center !important; }
#headline p { font-size: 30px !important; }
.article-content, #left-sidebar{ -webkit-text-size-adjust: 90% !important; -ms-text-size-adjust: 90% !important; }
.header-content, .footer-content-left {-webkit-text-size-adjust: 80% !important; -ms-text-size-adjust: 80% !important;}
img { height: auto; line-height: 100%;}
 } 
/* Client-specific Styles */
#outlook a { padding: 0; }    /* Force Outlook to provide a "view in browser" button. */
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */

body {
    background-color: #D2DF76 !important;
}
.article-title { font-size: 18px; line-height:30px; color: #007E66; font-weight:bold; margin-top:0px; margin-bottom:8px; font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; }
.centerhead {background-color:#FFFFFF !important; }
.centerhead_body {padding-top: 10px !important; padding-bottom: 10px !important; }
.right_col {width: 200px !important; background-color: #00477B;}
.left_col {width: 420px !important;}
.right_col_txt {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; font-weight:bold; padding-left: 14px !important; padding-right: 12px !important; padding-bottom: 14px;}

.article-content { font-size: 13px; line-height: 18px; color: #444444; margin-top: 0px; margin-bottom: 18px; font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; }
.article-content a { color: #00477B; font-weight:bold; text-decoration:none; }
.article-content img { max-width: 100% }
.article-content ol, .article-content ul { margin-top:0px; margin-bottom:18px; margin-left:19px; padding:0; }
.article-content li { font-size: 13px; line-height: 18px; color: #444444; }
.article-content li a { color: #00477B; text-decoration:underline; }
.article-content p {margin-bottom: 15px;}

.right_top_tips {margin-top: 0px !important; padding-top: 0px !important;}
.clicks_image {margin-bottom: 12px !important;}
.webview {font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #00477B; font-weight:bold;}
.footer {background-color: #D2DF76; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#333333;}
.border_1 { border-bottom-color:#3366CC; border-bottom-style:solid; border-bottom-width:thin;}
a img {border:none !important;}
a {
    font-size: 12px;
    color: #FFFFFF;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: underline;
    color: #FFFFFF;
}
a:active {
    text-decoration: none;
    color: #FFFFFF;
}
.themenu a:link       {color:#000000 !important;}
.themenu a:visited    {color:#000000 !important;}
.themenu a:hover      {color:#000000 !important;}
.themenu a:active     {color:#000000 !important;}

.border_1 { border-bottom-color:#3366CC; border-bottom-style:solid; border-bottom-width:thin;}
-->
</style>
</head>

<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center"><table width="640" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="640" class="centerhead"><table width="640" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle" class="webview" ><table width="640" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><div align="center" class="themenu"><div align="center" class="themenu"><webversion>View In Web Browser</webversion></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</td>
  </tr>

</table>
</td>
      </tr>
      <tr>
        <td align="center" valign="top"><img src="HEADER.png" width="640" height="92" border="0" align="top"" class="w640" id="customHeaderImage" style="display: inline" label="Header Image" editable="true"HEADER.png></td>
      </tr>
      <tr>
        <td class="centerhead"><table width="640" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="top"><table width="440" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td><table class="w470" border="0" cellpadding="0" cellspacing="0" width="430">
                  <tbody>
                    <tr>
                      <td class="w30" width="30"></td>
                      <td class="w410" width="410"><repeater> 
                      
                      <layout label="Text only">
                      
                       <table class="w410" border="0" cellpadding="0" cellspacing="0" width="410" >
                            <tbody>
                              <tr>
                                <td class="w410" width="410"><p class="article-title" align="left"><singleline repeatertitle="true" label="Article Title">Add a title</singleline></p>
                                    <div class="article-content" align="left"><multiline label="Description">Enter your description</multiline></div></td>
                              </tr>
                              <tr>
                                <td class="w410" height="10" width="410"></td>
                              </tr>
                            </tbody>
                          </table>
                 
                        </layout>
                        <img style="margin: 0; border: 0; padding: 0; display: block; "src="divider.png" width="420" height="30" alt="" >
                         <layout label="Text with full-width image">
                    
                          <table class="w410" border="0" cellpadding="0" cellspacing="0" width="410">
                            <tbody>
                              <tr>
                                <td class="w410" width="410"><p class="article-title" align="left"><singleline repeatertitle="true" label="Article Title">Add a title</singleline></p></td>
                              </tr>
                              <tr>
                                <td class="w410" width="410"><img editable="true" label="Image" class="w410" border="0" width="410"></td>
                              </tr>
                              <tr>
                                <td class="w410" height="15" width="410"></td>
                              </tr>
                              <tr>
                                <td class="w410" width="410"><div class="article-content" align="left"><multiline label="Description">Enter your description</multiline></div></td>
                              </tr>
                              <tr>
                                <td class="w410" height="10" width="410"></td>
                              </tr>
                            </tbody>
                          </table>
                    
                        </layout> 
                        <img style="margin: 0; border: 0; padding: 0; display: block;" src="divider.png" width="420" height="30" alt="">
                        <layout label="Text with right-aligned image">
               
                          <table class="w410" border="0" cellpadding="0" cellspacing="0" width="410">
                            <tbody>
                              <tr>
                                <td class="w410" width="410"><p class="article-title" align="left"><singleline repeatertitle="true" label="Article Title">Add a title</singleline></p>
                                    <table border="0" cellpadding="0" cellspacing="0" align="right">
                                      <tbody>
                                        <tr>
                                          <td class="w30" width="15"></td>
                                          <td><img editable="true" label="Image" class="w220" border="0" width="220"></td>
                                        </tr>
                                        <tr>
                                          <td class="w30" height="5" width="15"></td>
                                          <td></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <div class="article-content" align="left"><multiline label="Description">Enter your description</multiline></div></td>
                              </tr>
                              <tr>
                                <td class="w410" height="10" width="410"></td>
                              </tr>
                            </tbody>
                          </table>
                  
                        </layout>
                        <img style="margin: 0; border: 0; padding: 0; display: block;" src="divider.png" width="420" height="30" alt="">
                        <layout label="Text with left-aligned image">
                        
                          <table class="w410" border="0" cellpadding="0" cellspacing="0" width="410">
                            <tbody>
                              <tr>
                                <td class="w410" width="410"><p class="article-title" align="left"><singleline repeatertitle="true" label="Article Title">Add a title</singleline></p>
                                    <table border="0" cellpadding="0" cellspacing="0" align="left">
                                      <tbody>
                                        <tr>
                                          <td><img editable="true" label="Image" class="w220" border="0" width="220"></td>
                                          <td class="w30" width="15"></td>
                                        </tr>
                                        <tr>
                                          <td></td>
                                          <td class="w30" height="5" width="15"></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <div class="article-content" align="left"><multiline label="Description">Enter your description</multiline></div></td>
                              </tr>
                              <tr>
                                <td class="w410" height="10" width="410" ></td>
                              </tr>
                            </tbody>
                          </table>
                    
                        </layout>
                        <img style="margin: 0; border: 0; padding: 0; display: block;" src="divider.png" width="420" height="30" alt="">
                         <layout label="Image gallery">
           
                          <table class="w410" border="0" cellpadding="0" cellspacing="0" width="410">
                            <tbody>
                              <tr>
                                <td class="w195" valign="top" width="195"><table class="w195" border="0" cellpadding="0" cellspacing="0" width="195">
                                    <tbody>
                                      <tr>
                                        <td class="w195" width="195"><img editable="true" label="Image" class="w195" border="0" width="195"></td>
                                      </tr>
                                      <tr>
                                        <td class="w195" height="10" width="195"></td>
                                      </tr>
                                      <tr>
                                        <td class="w195" width="195"><div class="article-content" align="left"><multiline label="Description">Enter your description</multiline></div></td>
                                      </tr>
                                      <tr>
                                        <td class="w195" height="10" width="195"></td>
                                      </tr>
                                    </tbody>
                                </table></td>
                                <td width="20"></td>
                                <td class="w195" valign="top" width="195"><table class="w195" border="0" cellpadding="0" cellspacing="0" width="195">
                                    <tbody>
                                      <tr>
                                        <td class="w195" width="195"><img editable="true" label="Image" class="w195" border="0" width="195"></td>
                                      </tr>
                                      <tr>
                                        <td class="w195" height="10" width="195"></td>
                                      </tr>
                                      <tr>
                                        <td class="w195" width="195"><div class="article-content" align="left"><multiline label="Description">Enter your description</multiline></div></td>
                                      </tr>
                                      <tr>
                                        <td class="w195" height="10" width="195"></td>
                                      </tr>
                                    </tbody>
                                </table></td>
                              </tr>
                            </tbody>
                          </table>
    
                      </layout> 
                      <img style="margin: 0; border: 0; padding: 0; display: block;" src="divider.png" width="420" height="30" alt="">
                      </repeater> </td>
                      <td class="w30" width="30"></td>
                    </tr>
                  </tbody>
                </table></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table></td>
            <td align="left" valign="top" class="right_col"><table width="200" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="200" align="left" valign="top" class="right_top_tips"><img src="right_top_img.png" width="200" height="219"></td>
              </tr>
              <tr>
                <td align="left" valign="top" class="clicks_image"><img src="quick_clicks.png" width="200" height="81"></td>
              </tr>
              <tr>
                <td align="left" valign="top" class="right_col_txt"><multiline label='Main Feature Intro'>Main feature introduction</multiline></td>
              </tr>
              <tr>
                <td align="left" valign="top"><img src="news.png" width="200" height="63"></td>
              </tr>
              <tr>
                <td align="left" valign="top" class="right_col_txt"><multiline label='Main Feature Intro'>Main feature introduction</multiline></td>
              </tr>
              <tr>
                <td align="left" valign="top"><img src="team.png" width="200" height="81"></td>
              </tr>
              <tr>
                <td align="left" valign="top" class="right_col_txt"><multiline label='Main Feature Intro'>Main feature introduction</multiline></td>
              </tr>
              <tr>
                <td align="left" valign="top"><table width="200" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td><forwardtoafriend lang="en"><img src="share.png"></forwardtoafriend></td>
                  </tr>

                </table></td>
              </tr>
            </table>
            </td>
          </tr>
        </table><img src="footer.png" width="640" height="144"></td>
      </tr>
    
      <tr>
        <td align="center" valign="top"></td>
      </tr>
      <tr>
        <td align="center" valign="top" class="footer"><table width="640" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><div align="center" class="themenu"><unsubscribe>Click Here to Unsubscribe</unsubscribe></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>
torweb, 3 years ago

Again, sorry about the long line of code.  I did get it to work by placing before each closing layout (</layout>).  Is that "legal"

roshodgekiss roshodgekiss, 3 years ago

Hi torweb, if it works, it's certainly legal. All's fair in love and email :)


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

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