Editable region
Budo Cat Oct 1, 2010 2:43 PMHelp! Is there a way to limit an editable region to a fixed size?
I have a pretty simple design sliced into four pieces: Header, horizontal navbar, main body, footer. I've made the mainbody into an editable region. But if I add more text that the exact size of the mainbody divtag, my page breaks apart wehre the mainbody and footer meet.
I have gone into CSS and typed in the height dimension in the div (#wrapper #mainBody #mainContent), but it didn't make a difference. When I added it to the paragraph div (#wrapper #mainBody #mainContent p), the type went crazy.
I've spent hours trying to work this out. I'm now considering just working around this -- ie, inserting content until I see the page breaks up. But there must be a simpler and safer method to do this.
Many thanks to anyone who can help. CSS and HTML coding is below:
@charset "UTF-8";
* {
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#wrapper {
background-color: #999;
width: 800px;
}
#wrapper #header {
background-color: #999;
height: 150px;
width: 800px;
}
#wrapper #navBar {
height: 50px;
width: 800px;
background-image: url(../template%20images/navBar.jpg);
margin: 0px;
}
#wrapper #mainBody {
height: 990px;
width: 800px;
background-image: url(../template%20images/body.jpg);
}
#wrapper #footer {
background-image: url(../template%20images/footer.jpg);
height: 60px;
width: 800px;
}
#wrapper #mainBody #mainContent {
padding-top: 25px;
padding-right: 80px;
padding-bottom: 0px;
padding-left: 80px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 965px;
}
#wrapper #mainBody #mainContent p {
height: 0px;
margin: 0px;
}
#wrapper #footer #pageNumber {
font-size: 18px;
font-weight: normal;
padding-top: 10px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
HTML:
<body>
10
<div id="wrapper">
<div id="header"><img src="template images/header.jpg" width="800" height="150" alt="project name" />
</div><!--close header-->
<div id="navBar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">home</a> </li>
<li><a href="#">about</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">contact</a></li>
<li><a class="MenuBarItemSubmenu" href="#">index</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Homeland</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">subject here</a>
<ul>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</div><!--close navBar-->
<div id="mainBody">
<div id="mainContent"> <!--Begin editable region-->
<!-- TemplateBeginEditable name="2000Template1" -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisl metus, aliquam et ultricies vitae, faucibus ut libero. Fusce molestie lectus nunc, vel interdum leo. Nunc gravida mattis leo, a laoreet felis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et sapien in felis consequat vestibulum eu ac felis. Praesent pellentesque dolor vel mi euismod eget ultrices velit dignissim. Duis erat urna, aliquam vel malesuada eu, sollicitudin vel ante. Maecenas vitae dui nisi, ac molestie dolor. Suspendisse non neque odio, et dapibus lacus. Pellentesque bibendum justo non turpis tempor a porta risus pharetra. Etiam a felis quis orci molestie aliquet. Phasellus aliquam lacus sed magna venenatis et accumsan justo blandit. Sed id velit turpis. Nunc sit amet placerat libero. Nam sollicitudin, sem ut sollicitudin convallis, dolor tellus volutpat risus, quis lacinia diam purus nec tellus. Quisque at purus euismod lorem semper rhoncus. In hac habitasse platea dictumst. </p>
<!-- TemplateEndEditable --></div><!--Close editable region-->
</div><!--close mainBody-->
<div id="footer">
<div id="pageNumber"><!--Start optional edit region-->
<p><< Previous Page 1 : 2 : 3 Continue >></p>
</div><!--close optional edit region-->
</div><!--close footer-->
</div><!--close wrapper-->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>




