3 Replies Latest reply on May 8, 2010 10:37 AM by Nancy OShea

    Getting AP div boxes into container

    Cohek Level 1

      I am new to Dreamweaver, but have experience in layout like Indesign and it's associated programs. I am trying to set up a layout, choosing a Dreamweaver template that is fixed and centered. When I use the AP div drawing tool to add my boxes to the layout they seem to be independent of the main container. When I preview them, the boxes jump to a different place on the page. Is there a way to get the AP div boxes inside and attached to the main container.

        • 1. Re: Getting AP div boxes into container
          Zabeth69 Level 5

          Ah, the magical jumping APdiv difficulty...

           

          First I will give you a standard caveat about APdivs: although they seem easy to apply, they are tricky (as you have found) to keep under control. Best not to use them if relatively-positioned divs will do what you need. In the old days, it was common to create a layout using APdivs and then convert them to a table. Don't do that, either. If you do layout visually, you could possibly use APdivs as a tool on your way to relative divs, but my acquaintances pooh-pooh that as a tool. I say, if it works, don't let it trip you up but use it temporarily. You can actually measure with the rulers in Dreamweaver, so you should not need to use this folding pocket scale that is known as measuring by APdiv.

           

          Second, APdivs are positioned absolutely within the nearest containing div that has position. If you have not applied any position...any at all...to the immediately containing div, the APdiv will look to the next container, and the next, until it gets back to the page body (the whole viewport) to position the APdiv to. And then, no matter where in the code you have inserted your APdiv, it will be positioned relative to that viewport, as the viewport is the only containing element that bears position.

           

          So.

           

          How to get this under control? Give a POSITION to the div that you want controlling your APdiv. As in:

          #container {position: relative;}

          A relative position will not actually affect the position of the #container, but will make it possible for you to nest your APdiv inside it and use the boundaries of the #container to position the APdiv.

           

          Beth

          • 2. Re: Getting AP div boxes into container
            Cohek Level 1

            Thank you for your reply Zabeth. I will try your suggestion shortly. I have become proficient in several adobe programs, but Dreamweaver has really kicked my butt, even with lots of tutorials. What would you suggest is the best way to create a simple layout in Dreamweaver?

            • 3. Re: Getting AP div boxes into container
              Nancy OShea Adobe Community Professional & MVP

              Start with a pre-built CSS layout that has been thoroughly tested to perform well in all browsers.

              Project Seven's products are rock solid and they build nice extensions for DW.  A++

               

              PVII CSS Templates

              http://www.projectseven.com/products/templates/index.htm

               

              PVII CSS Layout Magic (Extension for DW)

              http://www.projectseven.com/products/templates/pagepacks/cssmagic/

               

              In addition, you'll find many open source CSS layout tools on the web, but a working knowledge of HTML and CSS code is required to use them.

               

              Start here:

              HTML & CSS Tutorials - http://w3schools.com/

               

              Open Source CSS Grids, Frameworks and Multi-Column Layouts
              http://EZ-CSS.org
              http://960.gs/
              http://code.google.com/p/blueprintcss/
              http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-width s

               

              Best of luck,

               

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