6 Replies Latest reply: Oct 4, 2010 9:33 AM by Budo Cat RSS

    Editable region

    Budo Cat Community Member

      Help! 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>

        • 1. Re: Editable region
          Nancy O. CommunityMVP

          Sounds like your design is too rigid for the web.

          The best approach is to keep content areas flexible so that long and short pages display without problems. Please don't use height on content areas as this will cause problems when people use increased text sizes in their browser.

           

          Can you post a link?

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb

          • 2. Re: Editable region
            garywpaul Community Member

            I'm not sure I am understanding your issue.

             

            If you are trying to have it that the mainBody expands with the text, remove the height rule. Generally it is a bad idea to have a height rule in elements that have text and content, because if the viewer has their fonts set to large or extra large, you run the risk of the design falling apart.

             

            You can insert a scroll rule overflow:scroll; if for some reason you must have a set height, but I dont see why you would.

             

            Also, Try removing the MainContent <div>, I'm not sure I am seeing its purpose.

             

            Gary

            • 3. Re: Editable region
              Budo Cat Community Member

              Nancy and Paul,

               

              Many thanks for the quick reply.

               

              To clarify, I am building a website that will feature a series of essays, so the content is very text heavy. There will be a photo and occasional graphic to break up the text on each page, but otherwise it's just words, words, words. Even with such a large display space (ie, the mainContent <div>, 800x990 px), these essays will run two to five pages long.

               

              I have not yet gone live, so I cannot post a link. However, I've attached a jpg of the prototype:

              layoutPrototype.JPG.png

               

               

               

              As you can see, I've used a non-repeatable textured background. Hence my problem: The type that I fit into the mainContent cannot run longer than what the <div> allows, as the main content section will not expand. Rather, text runs off the maincontent section and the design breaks where the footer begins (page number at the bottom). I was fooling around with the height rule in a failed effort to create a bottom margin or padding that would stop the type from overflowing.

               

              So, is there a way I can still work with this? Or as Nancy suggested, is my design too regid for the web?

               

              Thank you again for your help. I am brand new to webdesign, and am rather befuddled at the moment....

               

              PS to Gary: The mainContent <div> created a container that gave me my left, right and top padding for the text and photos. (The mainBody <div> margins ran into the black margins on both sides and up to the navBar at the top.)  I had hoped the same <div> would set the bottom padding, too, but it didn't work.

              • 4. Re: Editable region
                garywpaul Community Member

                Take a peek at this.  The only thing I dont really address is your background image.  If you want it not to repeat,

                leave it in the MainBody.  If you want it to repeat, move it to the wrapper, add repeat and also add the rule overflow:hidden;

                 

                http://www.paulgdesigns.com/delete.html

                 

                Gary

                • 5. Re: Editable region
                  Nancy O. CommunityMVP

                  Your background-image is binding you up. Pick one of the following:

                   

                  a) choose a seamless background tile that can be repeated.

                  http://alt-web.com/Backgrounds.shtml

                   

                  b) make an expanding box for your content.

                  http://alt-web.com/DEMOS/Image-slices-in-a-CSS-based-layout.shtml

                   

                  or c) use a solid color instead of a background-image.

                   

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists
                  http://alt-web.com/
                  http://twitter.com/altweb

                  • 6. Re: Editable region
                    Budo Cat Community Member

                    Nancy and Gary,

                     

                    Thanks very, very much. Gary's coding worked like a charm. And I changed the shading on my design, per Nancy's suggestion, to give the background a seamless transition where it starts repeating. I had to lose the rough, parchment border on the original design in order to have a seamless transition, which was a shame. But it was worth the sacrifice.

                     

                    Thank you again for your help.