Adobe Community: Template Issues

MandyPepperidge Calculating status...

Currently Being Moderated

Template Issues

Jun 12, 2012 11:33 AM

Tags: #template #dreamweaver_templates

Good morning! I need help I have created a template for all of my pages preceding my home page. I have two floating 480 px divs on top, two large content areas below and a footer. Pretty simple right? Each time I add an editable region my page completely shifts leaving gaps between the divs. Any ideas why? My main content area below the divs is set to relative and clear both. I have never had this happen before. Thanks!

826 Views 12 Replies Latest reply: MurraySummers, Jun 13, 2012 4:59 AM

Replies

Currently Being Moderated

1. MurraySummers,

Jun 12, 2012 11:37 AM in reply to MandyPepperidge

Report

Each time I add an editable region my page completely shifts leaving gaps between the divs. Any ideas why? My main content area below the divs is set to relative and clear both. I have never had this happen before. Thanks!

Most likely your code on the page is invalid, but we cannot know without actually seeing what you have. Can you show us the code on your Template page?

|
Mark as:
Currently Being Moderated

2. MandyPepperidge,

Jun 12, 2012 11:45 AM in reply to MurraySummers

Report

<!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>Untitled Document</title>
<style type="text/css">
@import url("menu/menubar.css");
</style>
<link href="styletemplate.css" rel="stylesheet" type="text/css" />
<script language="JavaScript1.2" type="text/javascript" src="menu/mm_css_menu.js"></script>
</head>

<body>
<div id="container">
<div id="menuone"></div>
<div id="menutwo">
    <div id="FWTableContainer1240500753">
      <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="480">
        
        <tr>
          <td><img src="menu/spacer.gif" width="16" height="1" alt="" /></td>
          <td><img src="menu/spacer.gif" width="57" height="1" alt="" /></td>
          <td><img src="menu/spacer.gif" width="71" height="1" alt="" /></td>
          <td><img src="menu/spacer.gif" width="81" height="1" alt="" /></td>
          <td><img src="menu/spacer.gif" width="150" height="1" alt="" /></td>
          <td><img src="menu/spacer.gif" width="105" height="1" alt="" /></td>
          <td><img src="menu/spacer.gif" width="1" height="1" alt="" /></td>
        </tr>
        <tr>
          <td colspan="6"><img name="menubar_r1_c1" src="menu/menubar_r1_c1.png" width="480" height="35" id="menubar_r1_c1" alt="" /></td>
          <td><img src="menu/spacer.gif" width="1" height="35" alt="" /></td>
        </tr>
        <tr>
          <td rowspan="2"><img name="menubar_r2_c1" src="menu/menubar_r2_c1.png" width="16" height="40" id="menubar_r2_c1" alt="" /></td>
          <td><a href="index.html"><img name="menubar_r2_c2" src="menu/menubar_r2_c2.png" width="57" height="22" id="menubar_r2_c2" alt="" /></a></td>
          <td><a href="about.html" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0602173944_0', 'MMMenu0602173944_0',0,24,'menubar_r2_c3');"><img name="menubar_r2_c3" src="menu/menubar_r2_c3.png" width="71" height="22" id="menubar_r2_c3" alt="" /></a></td>
          <td><a href="javascript:;" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0602174212_1', 'MMMenu0602174212_1',0,24,'menubar_r2_c4');"><img name="menubar_r2_c4" src="menu/menubar_r2_c4.png" width="81" height="22" id="menubar_r2_c4" alt="" /></a></td>
          <td><a href="league.html"><img name="menubar_r2_c5" src="menu/menubar_r2_c5.png" width="150" height="22" id="menubar_r2_c5" alt="" /></a></td>
          <td><a href="contacts.html"><img name="menubar_r2_c6" src="menu/menubar_r2_c6.png" width="105" height="22" id="menubar_r2_c6" alt="" /></a></td>
          <td><img src="menu/spacer.gif" width="1" height="22" alt="" /></td>
        </tr>
        <tr>
          <td colspan="5"><img name="menubar_r3_c2" src="menu/menubar_r3_c2.png" width="464" height="18" id="menubar_r3_c2" alt="" /></td>
          <td><img src="menu/spacer.gif" width="1" height="18" alt="" /></td>
        </tr>
      </table>
      <div id="MMMenuContainer0602173944_0">
        <div id="MMMenu0602173944_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="about.html" id="MMMenu0602173944_0_Item_0" class="MMMIFVStyleMMMenu0602173944_0" onmouseover="MM_menuOverMenuItem('MMMenu0602173944_0');"> Company Overview </a> <a href="sponsors.html" id="MMMenu0602173944_0_Item_1" class="MMMIVStyleMMMenu0602173944_0" onmouseover="MM_menuOverMenuItem('MMMenu0602173944_0');"> Our Sponsors </a> </div>
      </div>
      <div id="MMMenuContainer0602174212_1">
        <div id="MMMenu0602174212_1" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="basketball.html" id="MMMenu0602174212_1_Item_0" class="MMMIFVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Basketball Skill Development </a> <a href="strength.html" id="MMMenu0602174212_1_Item_1" class="MMMIVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Strength & Conditioning </a> <a href="personal.html" id="MMMenu0602174212_1_Item_2" class="MMMIVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Personal Training </a> <a href="camps.html" id="MMMenu0602174212_1_Item_3" class="MMMIVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Camps & Clinics </a> <a href="schedule.html" id="MMMenu0602174212_1_Item_4" class="MMMIVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Schedule </a> <a href="trainers.html" id="MMMenu0602174212_1_Item_5" class="MMMIVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Our Trainers </a> <a href="financial.html" id="MMMenu0602174212_1_Item_6" class="MMMIVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Financial Assistance </a> </div>
      </div>
    </div>
</div>
<div id="pic"></div>
<div id="body"></div>
<div id="footer">
    <table width="200" border="0" align="center" cellpadding="20" cellspacing="0">
      <tr>
        <td><a href="http://www.facebook.com/PacificAthleticCenter"><img src="images/images/fb.jpg" width="37" height="36" alt="fb" /></a></td>
        <td><a href="mailto:info@pacificathleticcenter.com" class="email">info@pacificathleticcenter.com</a></td>
      </tr>
    </table>
</div>
</div>
</body>
</html>

|
Mark as:
Currently Being Moderated

3. MurraySummers,

Jun 12, 2012 12:05 PM in reply to MandyPepperidge

Report

First comment is that this is not a template page so it cannot contain an editable region.

Can we see the template page after you have inserted the editable region that makes your page go haywire?

|
Mark as:
Currently Being Moderated

4. MandyPepperidge,

Jun 12, 2012 12:08 PM in reply to MurraySummers

Report

<!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>Untitled Document</title>

<style type="text/css">
@import url("../menu/menubar.css");
</style>
<link href="../styletemplate.css" rel="stylesheet" type="text/css" />
<script language="JavaScript1.2" type="text/javascript" src="../menu/mm_css_menu.js"></script>


</head>

<body>
<div id="container">
<div id="menuone"></div>
<div id="menutwo">
    <div id="FWTableContainer1240500753">
      <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="480">
        
        <tr>
          <td><img src="../menu/spacer.gif" width="16" height="1" alt="" /></td>
          <td><img src="../menu/spacer.gif" width="57" height="1" alt="" /></td>
          <td><img src="../menu/spacer.gif" width="71" height="1" alt="" /></td>
          <td><img src="../menu/spacer.gif" width="81" height="1" alt="" /></td>
          <td><img src="../menu/spacer.gif" width="150" height="1" alt="" /></td>
          <td><img src="../menu/spacer.gif" width="105" height="1" alt="" /></td>
          <td><img src="../menu/spacer.gif" width="1" height="1" alt="" /></td>
        </tr>
        <tr>
          <td colspan="6"><img name="menubar_r1_c1" src="../menu/menubar_r1_c1.png" width="480" height="35" id="menubar_r1_c1" alt="" /></td>
          <td><img src="../menu/spacer.gif" width="1" height="35" alt="" /></td>
        </tr>
        <tr>
          <td rowspan="2"><img name="menubar_r2_c1" src="../menu/menubar_r2_c1.png" width="16" height="40" id="menubar_r2_c1" alt="" /></td>
          <td><a href="../index.html"><img name="menubar_r2_c2" src="../menu/menubar_r2_c2.png" width="57" height="22" id="menubar_r2_c2" alt="" /></a></td>
          <td><a href="../about.html" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0602173944_0', 'MMMenu0602173944_0',0,24,'menubar_r2_c3');"><img name="menubar_r2_c3" src="../menu/menubar_r2_c3.png" width="71" height="22" id="menubar_r2_c3" alt="" /></a></td>
          <td><a href="javascript:;" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0602174212_1', 'MMMenu0602174212_1',0,24,'menubar_r2_c4');"><img name="menubar_r2_c4" src="../menu/menubar_r2_c4.png" width="81" height="22" id="menubar_r2_c4" alt="" /></a></td>
          <td><a href="../league.html"><img name="menubar_r2_c5" src="../menu/menubar_r2_c5.png" width="150" height="22" id="menubar_r2_c5" alt="" /></a></td>
          <td><a href="../contacts.html"><img name="menubar_r2_c6" src="../menu/menubar_r2_c6.png" width="105" height="22" id="menubar_r2_c6" alt="" /></a></td>
          <td><img src="../menu/spacer.gif" width="1" height="22" alt="" /></td>
        </tr>
        <tr>
          <td colspan="5"><img name="menubar_r3_c2" src="../menu/menubar_r3_c2.png" width="464" height="18" id="menubar_r3_c2" alt="" /></td>
          <td><img src="../menu/spacer.gif" width="1" height="18" alt="" /></td>
        </tr>
      </table>
      <div id="MMMenuContainer0602173944_0">
        <div id="MMMenu0602173944_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="../about.html" id="MMMenu0602173944_0_Item_0" class="MMMIFVStyleMMMenu0602173944_0" onmouseover="MM_menuOverMenuItem('MMMenu0602173944_0');"> Company Overview </a> <a href="../sponsors.html" id="MMMenu0602173944_0_Item_1" class="MMMIVStyleMMMenu0602173944_0" onmouseover="MM_menuOverMenuItem('MMMenu0602173944_0');"> Our Sponsors </a> </div>
      </div>
      <div id="MMMenuContainer0602174212_1">
        <div id="MMMenu0602174212_1" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="../basketball.html" id="MMMenu0602174212_1_Item_0" class="MMMIFVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Basketball Skill Development </a> <a href="../strength.html" id="MMMenu0602174212_1_Item_1" class="MMMIVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Strength & Conditioning </a> <a href="../personal.html" id="MMMenu0602174212_1_Item_2" class="MMMIVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Personal Training </a> <a href="../camps.html" id="MMMenu0602174212_1_Item_3" class="MMMIVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Camps & Clinics </a> <a href="../schedule.html" id="MMMenu0602174212_1_Item_4" class="MMMIVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Schedule </a> <a href="../trainers.html" id="MMMenu0602174212_1_Item_5" class="MMMIVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Our Trainers </a> <a href="../financial.html" id="MMMenu0602174212_1_Item_6" class="MMMIVStyleMMMenu0602174212_1" onmouseover="MM_menuOverMenuItem('MMMenu0602174212_1');"> Financial Assistance </a> </div>
      </div>
    </div>
</div>
<div id="pic">
    <div id="textbox">
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
    </div>
</div>
<div id="body">
    <div id="bodytext"></div>
</div>
<div id="footer">
    <table width="200" border="0" align="center" cellpadding="20" cellspacing="0">
      <tr>
        <td><a href="http://www.facebook.com/PacificAthleticCenter"><img src="../images/images/fb.jpg" width="37" height="36" alt="fb" /></a></td>
        <td><a href="mailto:info@pacificathleticcenter.com" class="email">info@pacificathleticcenter.com</a></td>
      </tr>
    </table>
</div>
</div>
</body>
</html>

|
Mark as:
Currently Being Moderated

5. MurraySummers,

Jun 12, 2012 12:13 PM in reply to MandyPepperidge

Report

Both sets of code are valid XHTML. I don't see anything in either editable region that would serve as a layout buster. Do you have one of the sideways pages uploaded so we can see what you are talking about?

|
Mark as:
Currently Being Moderated

6. MandyPepperidge,

Jun 12, 2012 12:27 PM in reply to MurraySummers

Report

|
Mark as:
Currently Being Moderated

7. MandyPepperidge,

Jun 12, 2012 12:31 PM in reply to MandyPepperidge

Report

no link yet

|
Mark as:
Currently Being Moderated

8. MurraySummers,

Jun 12, 2012 2:16 PM in reply to MandyPepperidge

Report

What's in your CSS (styletemplate.css)?

|
Mark as:
Currently Being Moderated

9. MandyPepperidge,

Jun 12, 2012 2:24 PM in reply to MurraySummers

Report

@charset "utf-8";
.email {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFF;
}

#bodytext {
    height: 267px;
}
#textbox {
    width: 550px;
    height: 365px;
}
#container {
    height: 800px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#menuone {
    float: left;
    height: 75px;
    width: 480px;
    background-image: url(images/pacbanner.jpg);
}
#menutwo {
    width: 480px;
    height: 75px;
    float: left;
}
#pic {
    clear: both;
    height: 365px;
    width: 960px;
    background-image: url(images/images/images/images/personal_04.jpg);
    position: relative;
}
#body {
    background-image: url(images/01-home_08.jpg);
    height: 267px;
}
#footer {
    height: 93px;
    width: 960px;
    background-image: url(images/footer.jpg);
}


body {
    background-color: #000;
}
#div {
    width: 550px;
    height: 290px;
    padding-left: 15px;
}
.largetext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFF;
}
.heading {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
}

|
Mark as:
Currently Being Moderated

10. MurraySummers,

Jun 12, 2012 2:37 PM in reply to MandyPepperidge

Report

Try adding this to your CSS -

#textbox, #bodytext { overflow:hidden; }

Does that kill the gaps?

|
Mark as:
Currently Being Moderated

11. MandyPepperidge,

Jun 12, 2012 4:48 PM in reply to MurraySummers

Report

By golly! I think that worked. It still shows a gap in design mode but in live mode and in browser mode the gap is gone. Thank you so much!!

|
Mark as:
Currently Being Moderated

12. MurraySummers,

Jun 13, 2012 4:59 AM in reply to MandyPepperidge

Report

The gaps are commonly occuring on layout pages. They result in this kind of situation -

<div><img></div>
<div>
<h1>Some text</h1>
</div>

What happens is that the top margin of the <h1> tag escapes from the bounding box (the div container), and pushes that container down from the one preceding it. In your case, there were two gaps, one from an <h#> tag, and one from a <p> tag (I'm guessing here). By adding the overflow:hidden style to both of those text containing ids, you force the container to prevent that margin from escaping and the gap is closed. The gap in design view is likely just caused by the visual aid of the cyan tab for the editable region....

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points

Dreamweaver

Template Issues

Jun 12, 2012 11:33 AM

More Like This

Bookmarked By (0)

Answers + Points = Status