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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post

    creating a continuous sidebar

    I am trying to create (for an html email) a continuous sidebar.

    I broke the sidebar into 3 parts the top the middle and the bottom. the middle is the continuous portion which is supposed to be stretched. What I am trying to accomplish is getting it to stretch when the adjacent table or div is stretched due to adding more writing to the newsletter.

    So far I have not been able to achieve this. Can anyone offer some guidance? Thanks so much.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Not quite sure what you mean, but if you use a div without entering the height, it will expand to take in what you put there.

    Some useful help at this site.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    Sorry I'm not explaining it well. here is the link to the page http://tinyurl.com/mnqnkg

    within the table I added 3 divs the top the middle and the bottom like so:

    Code:
     <td width="23%">
        <div style="height:213px; width:251px; background:url(http://www.colorectal-cancer.ca/newsletter/sidebar_top.jpg);"></div>
        <div style= "width:251px; background:url(http://www.colorectal-cancer.ca/newsletter/sidebar_middle.jpg);"></div>
        <div style="height:226px; width:251px; background:url(http://www.colorectal-cancer.ca/newsletter/sidebar_bottom.jpg);"></div>
           
        </td>
    The middle portion however just disappears since I added no height. I tried making the height 100% as well but that had no effect.

    I'm pretty sure I'm forgetting something pretty simple.

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    Sorry for the bump. I still have not been able to get it working.

  • #5
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    The middle portion is there, it's just not being stretched to make a visible difference. To do this, you need to add background-repeat:repeat-y; in the style attribute for the middle image. You can then set the height with pixels.

    (For some reason, setting the height by percentage still doesn't seem to work though, maybe someone else can help there.)

  • #6
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    It's an empty div, and it will collapse. Just split your page in 3 and then add padding to move your content over.

    Try this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CCAC Newsletter</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    #top {
    	height:213px;
    	background:url(http://www.colorectal-cancer.ca/newsletter/sidebar_top.jpg) no-repeat;
    	padding-left:251px;
    }
    #middle {
    	background:url(http://www.colorectal-cancer.ca/newsletter/sidebar_middle.jpg) repeat-y;
    	padding-left:251px;
    }
    #bottom {
    	height:226px;
    	background:url(http://www.colorectal-cancer.ca/newsletter/sidebar_bottom.jpg) no-repeat;
    	padding-left:251px;
    }
    </style>
    </head>
    <body>
    <div id="top">
      <h1 align="center" ><a href="http://www.colorectal-cancer.ca"><img style="border-style: none;" src="http://www.colorectal-cancer.ca/images/ccac-head-logo-en-left.png" /></a></h1>
      <h2 align="center" style="font-size: 13px; font-family: Verdana, Helvetica, sans-serif; color:#013D79;">Colorectal Cancer is  Preventable, Treatable and Beatable.<br />
        Together we can make a  difference!</h2>
    </div>
    <div id="middle">
      <h2 align="right" style="font-size: 15px; font-family: Verdana, Helvetica, sans-serif; color:#013D79;"> June 08, 2009</h2>
      <h3 align="left">News in Treatment</h3>
      <h4 align="left" style="font-size: 12px; font-family: Verdana, Helvetica, sans-serif; color:#013D79;">KRAS Biomarker</h4>
      <p align="left">content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
      <h3 align="left">Giant Colon Tour<br />
      </h3>
      <h4 align="left" style="font-size: 12px; font-family: Verdana, Helvetica, sans-serif; color:#013D79;">Colon Touring Canada</h4>
      <p align="left">content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
      <h3 align="left">Support for patients and  families<br />
      </h3>
      <h4 align="left" style="font-size: 12px; font-family: Verdana, Helvetica, sans-serif; color:#013D79;">Cancer Coaches</h4>
      <p align="left">content content content content content content content content content content content content content content content content content content content content content content content content content content <br />
      </p>
      <h3 align="left">Advocacy<br />
      </h3>
      <h4 align="left" style="font-size: 12px; font-family: Verdana, Helvetica, sans-serif; color:#013D79;">Round Table, Parliamentary BC  approved, QC not</h4>
      <p align="left">content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
    </div>
    <div id="bottom">
      <hr style="margin-bottom:0px" />
      <p align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; margin-top:0;">5 Place Ville Marie, #1230 Montréal, Quebec H3B 2G2      T:  (514) 875.7745 F: (514) 875.7746<br />
        60 St. Clair Avenue East, # 204, Toronto, Ontario M4T 1N5 T: (416) 920.4333 F: (416) 920.3004<br />
        <br />
        Toll free: 1.877.50.COLON </span><a href="http://www.colorectal-cancer.ca">www.colorectal-cancer.ca</a> </p>
    </div>
    <br />
    <a href="mailto:info@colorectal-cancer.ca" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold; color:#006699;">For more information or to unsubscribe</a>
    </div>
    </body>
    </html>

  • Users who have thanked Fisher for this post:

    sackstein (06-11-2009)

  • #7
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    Of course the div was empty! That doesnt seem to work in an html email however...

    I think due to the styling in the header. What can I do to fix that?

  • #8
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    I put the div styling from the header into the seperate div styles. I can't however add in the

    Code:
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    </style>
    adding in the margin and padding separately to each div does not work for some reason?

  • #9
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Okay then, emails are different and depend alot on the mail client I'm guessing.

    Use a 1 column table layout instead. This should work:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CCAC Newsletter</title>
    <style type="text/css"></style>
    </head>
    <body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td style="height:213px; background:url(http://www.colorectal-cancer.ca/newsletter/sidebar_top.jpg) no-repeat; padding-left:251px;"><h1 align="center" ><a href="http://www.colorectal-cancer.ca"><img style="border-style: none;" src="http://www.colorectal-cancer.ca/images/ccac-head-logo-en-left.png" /></a></h1>
          <h2 align="center" style="font-size: 13px; font-family: Verdana, Helvetica, sans-serif; color:#013D79;">Colorectal Cancer is  Preventable, Treatable and Beatable.<br />
            Together we can make a  difference!</h2></td>
      </tr>
      <tr>
        <td style="background:url(http://www.colorectal-cancer.ca/newsletter/sidebar_middle.jpg) repeat-y; padding-left:251px;"><h2 align="right" style="font-size: 15px; font-family: Verdana, Helvetica, sans-serif; color:#013D79;"> June 08, 2009</h2>
          <h3 align="left">News in Treatment</h3>
          <h4 align="left" style="font-size: 12px; font-family: Verdana, Helvetica, sans-serif; color:#013D79;">KRAS Biomarker</h4>
          <p align="left">content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
          <h3 align="left">Giant Colon Tour<br />
          </h3>
          <h4 align="left" style="font-size: 12px; font-family: Verdana, Helvetica, sans-serif; color:#013D79;">Colon Touring Canada</h4>
          <p align="left">content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
          <h3 align="left">Support for patients and  families<br />
          </h3>
          <h4 align="left" style="font-size: 12px; font-family: Verdana, Helvetica, sans-serif; color:#013D79;">Cancer Coaches</h4>
          <p align="left">content content content content content content content content content content content content content content content content content content content content content content content content content content <br />
          </p>
          <h3 align="left">Advocacy<br />
          </h3>
          <h4 align="left" style="font-size: 12px; font-family: Verdana, Helvetica, sans-serif; color:#013D79;">Round Table, Parliamentary BC  approved, QC not</h4>
          <p align="left">content content content content content content content content content content content content content content content content content content content content content content content content content content </p></td>
      </tr>
      <tr>
        <td style="height:226px; background:url(http://www.colorectal-cancer.ca/newsletter/sidebar_bottom.jpg) no-repeat; padding-left:251px;"><hr style="margin-bottom:0px" />
          <p align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; margin-top:0;">5 Place Ville Marie, #1230 Montréal, Quebec H3B 2G2      T:  (514) 875.7745 F: (514) 875.7746<br />
            60 St. Clair Avenue East, # 204, Toronto, Ontario M4T 1N5 T: (416) 920.4333 F: (416) 920.3004<br />
            <br />
            Toll free: 1.877.50.COLON </span><a href="http://www.colorectal-cancer.ca">www.colorectal-cancer.ca</a> </p>
          <br />
          <a href="mailto:info@colorectal-cancer.ca" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold; color:#006699;">For more information or to unsubscribe</a> </td>
      </tr>
    </table>
    </body>
    </html>

  • #10
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    Thank you for all your help so far. This works perfectly however I just recently found out that for e-mail newsletters many mail clients do not display background images!

    Is there any way you can think of that will give me the same effect but not treat the image as a background? Thanks so much.


  •  

    Posting Permissions

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