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

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free