7 Replies Latest reply: Oct 14, 2010 1:43 PM by Budo Cat RSS

    How to center page in Split and Design view?

    Budo Cat Community Member

      When I look at my template in Design or Split View, it is flush right on my screen with a top margin of 20 px or so. But when I check it in Live View, or when I preview it on Firefox/Safari/Chrome/Opera, it is centered and flush against the top of the screen.

       

      I should add that the template was fine in Design and split, until I started mucking about the a spry menu. My page fell apart, I deleted the spry with plans ot start over. But then I discovered my template flush right (in Design and Split, anyway).

       

      Can anyone please tell me how to correct this? I suppose it's more of a nuisance than a tragedy, as long as the page is centered when it goes online. But it is a nuisance to work on the right side of the screen.

       

      Coding follows:

      * {
          margin-top: 0px;
          margin-left: 0px;
      }
         
         
      #wrapper {
          background-image: url(../template%20images/mainBody.jpg);
          background-repeat: repeat;
          overflow: hidden;
          width: 800px;
          background-color: #CCC;
          margin-right: auto;
          margin-left: auto;
          }
      #wrapper #header {
          height: 150px;
          width: 800px;
          background-color: #CCC;
          background-image: url(../template%20images/header.jpg);
      }
      #wrapper #navBar {
          height: 55px;
          width: 800px;
          background-color: #666;
          background-image: url(../template%20images/navBar.jpg);
      }
      #wrapper #mainBody {
          width: 80%;
          margin: 0 auto;
          padding-top: 20px;
          font-family: Arial, Helvetica, sans-serif;
         
      }
      #wrapper #footer {
          background-image: url(../template%20images/footer.jpg);
          width: 800px;
          height: 60px;
          text-align: center;
          font-size: 16pt;
          clear: both;
      }

       

      <!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" />
      <!-- TemplateBeginEditable name="doctitle" -->
      <title>2000_template</title>
      <!-- TemplateEndEditable -->
      <link href="../CSS/layout.css" rel="stylesheet" type="text/css" />
      <style type="text/css">
      <!--
      -->
      </style>

       

      </head>

       

      <body>
      <div id="wrapper">
      <div id="header">

       

      </div><!--close header-->

       

      <div id="navBar">

       

        </div><!--close navBar-->
      <div id="mainBody"><!--begin mainBody--><!-- TemplateBeginEditable name="mainContent" -->

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor libero, aliquam vitae scelerisque in, malesuada non neque. </p>
       
        <p>Phasellus dignissim arcu eget velit posuere vel varius magna dapibus. Phasellus pharetra imperdiet nunc, vel interdum dolor fermentum id. Integer luctus mollis tempor. Nunc lacus urna, blandit sollicitudin cursus at, ultrices et erat. Sed rhoncus, ipsum vitae dictum scelerisque, diam felis euismod augue, a facilisis massa augue ut nibh. </p>
       
        <p>Sed ac ante magna. Nulla consequat posuere ullamcorper. In interdum, elit sed tempor suscipit, quam mauris egestas justo, sed lobortis sem magna a mi. Etiam tincidunt fringilla sapien, congue condimentum augue adipiscing ut. Nam pretium egestas lacus in elementum. Vivamus eros erat, varius nec aliquam quis, congue at orci.</p>

       

      <p>Vivamus eget felis purus, in porta tellus. Nullam ac orci eu arcu luctus ornare. Aliquam quis ligula metus. Morbi congue cursus justo, et sagittis sem adipiscing blandit. </p>

       

      <p>Quisque sed bibendum nisi. Curabitur ultrices imperdiet lacus in ullamcorper. Etiam pulvinar magna et neque congue eu aliquam metus semper. </p>

       
      <!-- TemplateEndEditable --></div>
      <!--close main body-->
      <div id="footer"><!-- TemplateBeginEditable name="footerPage" -->
        <p> &#8249; &#8249; Previous    1 :: 2 :: 3 :: 4    Continue &#8250; &#8250;</p>
      <!-- TemplateEndEditable --></div><!--close footer-->
      </div><!--close wrapper-->
      </body>
      </html>