Jump to content
Stef's Coding Community
Sign in to follow this  
Aspire

CSS Layout problems

Recommended Posts

I’m setting up a newsletter template to be sent out by email. It has sections for different articles, some small (on the left) and some longer (on the right) with links to the full articles at the end of the newsletter. My template needs to be expandable, which I thought I could do by adding more sidebar and content boxes.

 

Three things are not working:

 

1) To get the second sidebar to sit below the first one, I used “clear”. How can I get the content boxes on the right to start at the top beside sidebar1?

 

2) I have three content boxes with different color backgrounds. Why are they all coming up with the same color background?

 

3) This will be sent out by email using MS Outlook. The layout is fine in MS Explorer, but when I “File>Send>page by email”, the sidebar and content boxes no long touch. The sidebar box has become narrower. Is there a way to fix this?

 

I would really appreciate some help with these questions. Thanks in advance.

ebulletin_css.html

Share this post


Link to post
Share on other sites

if you are creating an email template, you really need to -- unfortunately -- be using tables. Different email clients, including online email clients like gmail, yahoo mail, etc, render html email differently, and this helps preserve consistency between email clients.

 

http://www.mailchimp.com/articles/how_to_code_html_emails/

http://articles.sitepoint.com/article/code-html-email-newsletters

http://www.campaignmonitor.com/css/

Share this post


Link to post
Share on other sites

Thanks for that information, Benjamin. It is extremely helpful, but frustrating because I first designed the whole template using tables. When I set up the table, I had six columns and I gave each column a width. Then to get the sections I merged cells - four on the right and two on the left. So far so good, but as soon as I started adding content to the cells, using Dreamweaver as the end users will, the cell widths randomly changed. By the time I had three articles in, the table was a mess.

 

Since this template will be used by staff, I have to build a basic file that doesn't come with surprises for them.

 

So can anyone tell me how to lock the table grid widths?

 

(I'd still like to figure out the CSS problems too.)

Share this post


Link to post
Share on other sites

You have to specify a width for your table cells. You can do this easily in DW, click the top of your table in Design View and select each column then specify the width in the properties panel.

Share this post


Link to post
Share on other sites
When I set up the table, I had six columns and I gave each column a width. Then to get the sections I merged cells - four on the right and two on the left. So far so good, but as soon as I started adding content to the cells, using Dreamweaver as the end users will, the cell widths randomly changed.

 

It's possible that your merging of the cells cleared the widths you had set... I don't know though, the only way I can really tell is if I look at the code.

Share this post


Link to post
Share on other sites

In regards to your original question, the way I would handle this is to wrap all of your sidebar divs in a div that is floated left with a set width, and do the same with all your content divs -- wrap them in a div floated right with a set width.

 

Something like this:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <title>Test</title>
   <style type="text/css">
/*<![CDATA[*/

   body {
   margin: auto;
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   background-color: #CCCCCC;
   }
   * { margin: 0; padding: 0; 
   }

   #wrap { width: 740px; margin: auto; background: #fff; }
   #wrapper {position: relative; text-align: left; width: 250px; backgroun-image: url(http://edtowis.net/images/_sidebar_gradient.gif) }
   #header { height: auto; background: #f8c926; }
   #header2 { height: auto; background: #005594; margin: 0; padding: 10px; }

   #sidebarcol { float:left; width: 216px; }
  		#sidebar { background: skyblue; padding: 12px 12px 12px 12px; clear: left;}
   	#sidebar2 { background: #ddc17a; position: relative; padding: 12px 12px 12px 12px; clear: left;}
   	#sidebar3 { background: #f4f1d3; position: relative; padding: 12px 12px 12px 12px; clear: left;}

   #contentcol { float:right; width:476px; }
   	#content { background: #fbea95; padding: 12px 12px 12px 12px; clear: right;}
   	#content2 { background: #ddc17a; padding: 12px 12px 12px 12px; clear: right;}
   	#content3 { background: #cddfeb; padding: 12px 12px 12px 12px; clear: right;}

   #footer1 { position: relative; clear: both; height: auto; background: #f4f1d3; padding: 12px 12px 12px 12px;}
   #footer2 { position: relative; clear: both; height: auto; background: #ffffff; padding: 12px 12px 12px 12px;}
   #footer3 { position: relative; clear: both; height: 40px; background: #f8c926; padding: 12px 12px 12px 12px;}
   .clear {clear: both; }
   .spacer { margin-top: 40px; }
   p { margin-top: 0; text-align: left; font: arial, sans-serif;
   line-height: 1.4; color: #000000;   
   }
   body,td,th {
   font-family: Arial, Helvetica, sans-serif;
   font-size: small;
   color: #000000;
   }
   a:link {
   color: #FF9900;
   }
   a:visited {
   color: #CC6600;
   }
   a:hover {
   color: #FFCC00;
   }
   a:active {
   color: #ddc17a;
   }
   h1,h2,h3,h4,h5,h6 {
   font-weight: bold;
   }
   h1 {
   color: #005594;
   }
   h2 {
   color: #005594;
   }
   h3 {
   color: #005594;
   }
   /*]]>*/
   </style>
</head>

<body>
   <div id="wrap">
       <div id="header">
           <p>HEADER IMAGE</p>

           <p><br /></p>
       </div>
       <div id="header2">
           <p><br /></p>
       </div>

	<div id="sidebarcol">
        <div id="sidebar">
            <p>Sidebar</p>
            <p class="spacer">Sidebar</p>
        </div>
        <div id="sidebar2">
            <p>Sidebar</p>
            <p class="spacer">Sidebar</p>
        </div>
        <div id="sidebar3">
            <p>Sidebar</p>
            <p class="spacer">Sidebar</p>
        </div>
       </div>

	<div id="contentcol">
        <div id="content">
            <h1><strong>Responding to Media Questions</strong></h1>
            <p><a href="#more1"><strong>Read more ...</strong></a></p>
        </div>
        <div id="content2">
            <p>Content</p>
            <p class="spacer">Content</p>
            <p class="spacer">Content</p>
            <p class="spacer">Content</p>
            <p class="spacer">Content</p>
            <p class="spacer"><a href="#more2"><strong>Read more ...</strong></a></p>
        </div>
        <div id="content3"></div>
	</div>

       <h3> </h3>

       <div id="footer1">
           <p>... <a id="more1"></a>continued</p>
           <p> </p>
       </div>

       <div id="footer2">
           <p>... <a id="more2"></a>continued</p>
           <p> </p>
       </div>

       <div id="footer3">
           <p>Other Footer content</p>
       </div>
   </div>
</body>
</html>

Share this post


Link to post
Share on other sites

Re: Shifting table cells -

 

Here is the code Dreamweaver came up with for the merged cell with content added:

 

<td colspan="2" rowspan="2" valign="top" bgcolor="cddfeb"><h3>Approving the Budget </h3>

<p> Last month ... </p></td>

 

A row with merged cells and no content looks like this:

<tr>

<td colspan="2" valign="top" bgcolor="#FFFFFF"> </td>

<td width="123" valign="top" bgcolor="#FFFFFF"> </td>

<td width="123" valign="top" bgcolor="#FFFFFF"> </td>

</tr>

 

which is odd because that row actually contains a merged cell spanning 4 columns and a merged cell spanning 2 columns.

Share this post


Link to post
Share on other sites

So now that I know I need to lay out the newsletter in tables, I have been working on the td width for colspan cells. Any suggestions of how to stop the width of the merged cells from changing as content is added?

Share this post


Link to post
Share on other sites

So now that I know I need to lay out the newsletter in tables, I have been working on the td width for colspan cells. Any suggestions of how to stop the width of the merged cells from changing as content is added?

 

I'd really need to see the code for the entire table -- since you have some cells spanning other cells, I can't really figure it out without it.

Share this post


Link to post
Share on other sites

I havent look at your code, but have you tried to use the style WORD-BREAK:BREAK-ALL;

 

Last I knew about it, it was an IE style only, though might have changed??!?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...