2 Replies Latest reply on Feb 25, 2010 12:32 PM by kdelany

    Help with dreamweaver div wrapper

    kdelany Level 1

      I am creating a web page using a div wrapper to contain all my div layout.

       

      What I want it to do is automatically adjust the layout if a browser size is changed. Right now the site remains fixed when a window size is changed. Is this because I am using divs and not tables?

      Any help and suggestions would be welcome.

      This is my code

       

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

      <!--

      .wrapper {

      height: auto;

      width: 100%;

      margin: 0;

      }

      #copyright {

      }

      body,td,th {

      font-family: Verdana, Geneva, sans-serif;

      font-size: 12px;

      color: #333;

      }

      body {

      background-color: #343434;

      }

      a {

      font-size: 12px;

      color: #CCC;

      }

      h1 {

      font-size: 24px;

      color: #000;

      }

      h2 {

      font-size: 18px;

      color: #940101;

      }

      h3 {

      font-size: 16px;

      color: #333;

      }

      h4 {

      font-size: 14px;

      color: #940101;

      }

      #background {

      position:absolute;

      left:201px;

      top:31px;

      width:930px;

      height:772px;

      z-index:1;

      background-image: url(component%20images/background1.png);

      }

      #apDiv1 {

      position:absolute;

      left:539px;

      top:34px;

      width:548px;

      height:791px;

      z-index:2;

      }

      #apDiv2 {

      position:absolute;

      left:642px;

      top:227px;

      width:423px;

      height:47px;

      z-index:2;

      }

      #apDiv3 {

      position:absolute;

      left:371px;

      top:377px;

      width:137px;

      height:35px;

      z-index:3;

      }

      #apDiv4 {

      position:absolute;

      left:370px;

      top:436px;

      width:121px;

      height:31px;

      z-index:4;

      }

      #apDiv5 {

      position:absolute;

      left:373px;

      top:490px;

      width:120px;

      height:41px;

      z-index:5;

      }

      #apDiv6 {

      position:absolute;

      left:372px;

      top:554px;

      width:126px;

      height:36px;

      z-index:6;

      }

      #copyright {

      position:absolute;

      left:798px;

      top:811px;

      width:335px;

      height:13px;

      z-index:7;

      font-family: Verdana, Geneva, sans-serif;

      font-size: 10px;

      color: #CCC;

      }

      -->

      </style>

      </head>

       

      <body>

      <div id="wrapper" align="center">

      <div id="background"></div>

      <div id="apDiv2">

        <h2 align="right"><em>If you can dream it ... we can build it!</em></h2>

      </div>

      <div id="apDiv3">Home</div>

      <div id="apDiv4">Services</div>

      <div id="apDiv5">Portfolio</div>

      <div id="apDiv6">Contact</div>

      <div id="copyright">

        <div align="right">&copy; 2010 Center Line Construction &amp; Remodeling</div>

      </div>

       

       

       

       

        <p>  </p>

      <!-- end #wrapper --></div>

      </body>

      </html>

      Thanks