5 Replies Latest reply on Apr 29, 2010 10:50 AM by osgood_

    Using CSS and Layouts

    Traveling Person

      Below is the source code of something that I want to understand if it can it be done. The green box is centered, which is what I want. I now want to place the grey box anywhere within the green box and have it stay where I move it with respect to the boundries of the green box. What code changes/parameters do I need to make to make it happen?

      Thanks

       

       

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

      <!--

      body {

      background-color: #FFFF99;

      }

      #apDiv1 {

      position:relative;

      width:900px;

      height:600px;

      z-index:1;

      background-color: #99FF99;

      margin-right: auto;

      margin-left: auto;

      }

      #apDiv2 {

      position:relative;

      width:200px;

      height:115px;

      z-index:1;

      background-color: #999999;

      }

      -->

      </style>

      <script type="text/javascript">

      <!--

      function MM_reloadPage(init) {  //reloads the window if Nav4 resized

        if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

          document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

        else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

      }

      MM_reloadPage(true);

      //-->

      </script>

      </head>

       

      <body>

      <div id="apDiv1">

        <div id="apDiv2"></div>

      </div>

      </body>

      </html>

        • 1. Re: Using CSS and Layouts
          osgood_ Level 8

          You would change the properties of the apDiv2:

           

           

          #apDiv2 {
          position: absolute;
          top: 100px;
          left: 100px;
          width:200px;
          height:115px;
          z-index:1;
          background-color: #999999;
          }

           

           

          Not sure what you are doing but building a complete website like this is not correct. You can use this technic sparingly.

           

          A better way would be to use the margin property to position the <div>:

           

           

          #apDiv2 {
          margin-top: 100px;
          margin-left: 100px;
          width:200px;
          height:115px;
          z-index:1;
          background-color: #999999;
          }

           

           

          But I'm not sure what your end goal is.

           

          If you use the margin technic then you also need to add - padding-top: 1px; - to the apDiv1 css otherwise the top-margin will collapse.

          • 2. Re: Using CSS and Layouts
            Nancy OShea Adobe Community Professional & MVP
            I now want to place the grey box anywhere within the green box and have it stay where I move it ...

            Just so we're clear on this point, DW is not a drag & drop app.  For best results, you must abandon any notions you may have about using DW like a desktop publisher such as MS Word.  It doesn't work that way.

             

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

            • 3. Re: Using CSS and Layouts
              Traveling Person Level 1

              If one cannot use layouts, what is the purpose? They look like a great tool for laying out a web page.

              • 4. Re: Using CSS and Layouts
                Nancy OShea Adobe Community Professional & MVP

                If one cannot use layouts, what is the purpose? They look like a great tool for laying out a web page.

                 

                A nice idea that fails to produce good code or good cross browser results.

                Read why below:

                http://apptools.com/examples/pagelayout101.php

                 

                 

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

                • 5. Re: Using CSS and Layouts
                  osgood_ Level 8

                  Traveling Person wrote:

                   

                  If one cannot use layouts, what is the purpose? They look like a great tool for laying out a web page.

                   

                  Layouts?

                   

                  Absolutely positioned <divs> (as in my first example) should not be used frequently in a web page construction because they have limited flexibility given you set the position absolutely and they will not interact with any other element on your page. As a result of this you could end up with a completely scrambled mess, where elements overlap, maybe not in the browser you are viewing in but in other peoples browsers who are potentailly using a completely different set up to yours. Therefore you must build flexibility into the construction to accommodate a wide range of different browser variations.

                   

                  Method 2 which uses margins to position what is know as a 'static' <div> is far better as this will ineract with other elements on the page.

                   

                  Basically a good solid construction is one of a series of static <div> boxes which are positioned (if needs be) by using margin, padding, floating using css.