17 Replies Latest reply on Mar 26, 2010 1:34 AM by osgood_

    AP Div Problem ?

    Roy Marnewick

      After extensive reading and experimenting - I have finally completed my website - and it has been published!

       

      I needed to place images exactly where I required them - not the standard Left/right/absolute etc! I then discovered AP DIV's and what a pleasure. My pages previewed perfectly on my computer using Internet Explorer as my browser. I showcased my new website to my wife on her laptop - and was hoorified to find that all of the images which were placed in AP Div's had moved and were now placed over text!

       

      I have ascertained that this results from our different display settings (1024x768 vs 1280x768). Please save my sanity by advising how I can get around this problem. My site uses the 2 Column, Header & Footer, Liquid layout (one of the standard layouts) - can this possibly have something to do with the problem?

      Thanks

        • 1. Re: AP Div Problem ?
          osgood_ Level 8

          Roy Marnewick wrote:

           

          After extensive reading and experimenting - I have finally completed my website - and it has been published!

           

          I needed to place images exactly where I required them - not the standard Left/right/absolute etc! I then discovered AP DIV's and what a pleasure.

          Unfortunately AP <divs> are not a pleasure but a real pain.

           

          My pages previewed perfectly on my computer using Internet Explorer as my browser. I showcased my new website to my wife on her laptop - and was hoorified to find that all of the images which were placed in AP Div's had moved and were now placed over text!

           

          AP <divs> don't move around as they are absolutely positioned BUT the other content on your page may move around which gives the appearance of the AP <divs> moving.

           

           

          I have ascertained that this results from our different display settings (1024x768 vs 1280x768). Please save my sanity by advising how I can get around this problem. My site uses the 2 Column, Header & Footer, Liquid layout (one of the standard layouts) - can this possibly have something to do with the problem?

          Thanks

          Yes, computers are set up quite differently. What you see on yours won't always be what other people see on theirs.

           

          There's nothing wrong with the 2 Col, Header & Footer, Liquid layout which ships with Dreamweaver but everything wrong with the way you have used AP <divs>. They stay still whilst the rest of the content moves in a liquid layout, in most cases that's not what you want, so don't use AP <divs>.

           

          You can 'anchor' AP <divs> to a certain spot in a liquid layout by making a container in the construction have a position of relative, inserting your AP <divs> in that and then they will take their position from the top left of the relatively positioned box.

          • 2. Re: AP Div Problem ?
            Roy Marnewick Level 1

            Hi Osgood

             

            Many thanks for your rapid response.

             

            I am part of the way there in understanding your proposed solution.

            However - I understand basics only at this stage, and get by by

            experimentation to achieve what I need. You have mentioned a "container" -

            which I have seen mentioned in various documentation but do not understand

            exactly what it is - or how I place one in my document!

             

            I would be most grateful if you could :

            1. tell me what it is?

            2. how do I place a container in the document?

            3. how do I set the relative position?

             

            As a side issue - if these AP divs float around - how are they used usefully

            if not placed in a container - or are they always meant to be in a

            container?

             

             

            Regards

            Roy

            • 3. Re: AP Div Problem ?
              osgood_ Level 8

              Roy Marnewick wrote:

               

              Hi Osgood

               

              Many thanks for your rapid response.

               

              I am part of the way there in understanding your proposed solution.

              However - I understand basics only at this stage, and get by by

              experimentation to achieve what I need. You have mentioned a "container" -

              which I have seen mentioned in various documentation but do not understand

              exactly what it is - or how I place one in my document!

               

              I would be most grateful if you could :

              1. tell me what it is?

              2. how do I place a container in the document?

              3. how do I set the relative position?

               

              As a side issue - if these AP divs float around - how are they used usefully

              if not placed in a container - or are they always meant to be in a

              container?

               

               

              Regards

              Roy

              1) A container is just a box on your page, could be a <div> or something else, a table cell, a paragraph etc.

               

              2) You will already have many containers in your document.

               

              3) To set the containers position to relative use css:

               

              position: relative;

               

              Example:

               

              <div id="content">Some content here</div>

               

              Set its position to relative with css:

               

              #content {

              width: 750px

              margin: 0 auto;

              position: relative;

              }

               

              Now if you want to use an AP <div> and have that AP <div> move along with the content when the browser window is widened or narrowed you have to insert the AP <div> inside the relatively positioned container,

               

              <div id="content">

              <div id="fixed">This AP <div> takes its co-ordinantes from the top left of the content box</div>

              Some content here

              </div>

               

              The css:

               

              #fixed {

              position: absolute;

              left: 50px;

              top: 150px;

              }

               

              AP <divs> are really quite useless apart from the odd ocassions (like the above example) and maybe the most simplest of site constructions

              • 4. Re: AP Div Problem ?
                Roy Marnewick Level 1

                Hi Osgood

                 

                Many thanks for your response and info.

                 

                I could understand what was required in principle - but had a problem

                implementing it as HTML code and me do not mix! The Div kept popping around

                to various locations and I could sometimes pick up a bit of a pattern. I

                also referred to another article on the forums - which I also could not

                fully follow the HTML /CSS code - but could pick up bits and pieces.

                 

                Anyway - after many hours, the penny dropped and I think I now have it. I'm

                like a dog with a bone!! At least I have learnt something.

                 

                Once again - thanks for the time and effort you put in to help me solve

                this.

                 

                Regards

                Roy

                • 5. Re: AP Div Problem ?
                  siddichan

                  This solution didn't help me.


                  • 6. Re: AP Div Problem ?
                    osgood_ Level 8

                    siddichan wrote:

                     

                    This solution didn't help me.


                     

                    Then you ned to supply a link to the page/code/css in question and perhaps someone can help.

                    • 7. Re: AP Div Problem ?
                      Roy Marnewick Level 1

                      Hi Siddichan

                       

                      I am a Dreamweaver virgin! However, I do seem to be advancing on my site.

                       

                      I see that Osgood has offered you help - but you have not succeeeded. I

                      spent over 15hrs trying to resolve the issue, but finally resolved it with

                      the help of Osgood's input as well as another forum contributor and with a

                      lot of further experimentation. It must be mission impossible for a remote

                      person to give help as the help seeker cannot always communicate needs and

                      problems correctly and the solution provider cannot see obstacles that we

                      may have created!

                       

                      I am out for most of the day - so will respond with my solution later in the

                      day.

                       

                      Please advise ;

                      1. are you just trying to place a graphic / text on a template - or do you

                      want an editable area for adding content to a completed template?

                      2. Are you using Dreaweaver CS4?

                       

                      If you have a landline - I do not mind phoning you to try and help as it is

                      difficult doing it by email.

                       

                      Regards

                      Roy

                      • 8. Re: AP Div Problem ?
                        siddichan Level 1

                        Sorry, I openeda new thread for my own problem. You can see it here: http://forums.adobe.com/thread/602571

                         

                        Thank you so much! If you can help me, that'd be amazing!

                         

                        -Siddichan

                        • 9. Re: AP Div Problem ?
                          siddichan Level 1

                          I opened a new thread for my own problem in case people thought it was solved as well. The thread is here - http://forums.adobe.com/thread/602571

                           

                          If you can help me with it, that will be great!

                          • 10. Re: AP Div Problem ?
                            Roy Marnewick Level 1

                            Hi Siddichan

                             

                            I suspect that you are not using dreamweaver CS4. I think that CS3 is almost

                            the same. Also, I have read that Layers are not recommended - not that I

                            know anything about them because CS4 does not use them. So stay away from

                            Layers as it may influence what I do as a solution.

                             

                            Principle:

                            Basically we need to place an AP div in the document - which by default is

                            placed "absolute". Change it to "relative". Place another AP Div inside the

                            "relative" AP Div and then place your content (image, text etc.) inside the

                            "absolute" AP Div.

                             

                            Method:

                            1. Some of the procedures may not be required to the T - but I had problems

                            until I did it as below!

                            2. Remove the AP Div or text or image that you want to place, to a temp.

                            place initially to clear our target area.

                            3. Insert an AP Div (say No1)

                            4. Position the left of the AP Div almost against the left margin of the

                            Contents container i.e. the main area of the page. Use the sizing handles to

                            resize it - but ensure that it does not overlap with anything already on the

                            page - this may affect it - but I do not know for sure.

                            5. open the CSS Styles Panel (normally on RH of screen).

                            6. In LH column of the top half - look for "left". On the RH column it

                            should read "auto"

                            7. If not - Click on this line and it will highlight and bring up that line

                            in the bottom half of the panel.

                            8. In the bottom part - click in the appropriate colum to bring up a scroll

                            menu. Click on "auto"

                            8B. Repeat steps 6-8 for the "Top"

                            9. In LH column of the top half - look for "position". On the RH column it

                            should read "absolute"

                            10. Click on this line and it will highlight and bring up that line in the

                            bottom half of the panel.

                            11. In the bottom part - click on "absolute" to bring up a scroll menu.

                            Click on "relative"

                            12. Take a note of the Z-Index value. This is the stacking order control.

                            13. Insert an AP Div (say No2) inside AP Div (No1). This will by default be

                            "absolute" in position

                            14. Drag it to anywhere inside No1. Resize appropriately. Check that its

                            Z-Indez is greater than that for AP Div (No1) - so it is placed over No 1.

                            15. Lastly - place your image or text etc. inside AP Div (No2). Use the

                            Properties box to position the contents within AP Div (No2) - i.e. left /

                            right/ absolute / top etc.)

                            16. Most importantly - put your hands together - shut eyes - hold breath -

                            and test it!!

                             

                            Good luck.

                             

                            Roy

                            • 11. Re: AP Div Problem ?
                              siddichan Level 1

                              I'm afraid to say that your solution didn't work either.

                               

                              I think my biggest problem is not knowing where to insert the div code. Whenever I draw an AP div, regardless of where I draw it, it automatically inserts the code at the very top, right under Body.  The moment I set this AP div to relative, it automatically adds a gap the height of the div to the top most portion of my template, causing the whole template to slide down.

                               

                              I hope that's enough of an explanation.

                               

                              I've also replaced the ap div with a div class in the css, and I still have the same issue.

                               

                              I'm assuming it has something to do with the .dwt in the particular template I'm using.  The one by Codify, #2.  All I want to do is utilize the space better by taking advantage of that left pane and I'm hitting walls.

                               

                               

                              On the same note; does anyone know any quick fixes for how firefox and ie7 shows tables inside a div content? I've put padding at 0, and it still readjusts every row to be the same height when I go to preview/live, even though I've even tried setting TD's to varying heights. Seems I'm running into one hangup after another.

                              • 12. Re: AP Div Problem ?
                                Roy Marnewick Level 1

                                Hi Siddichan

                                 

                                You are not alone - I have spent hours today trying to resolve things.

                                 

                                I had the same problem of the gap being generated as soon as "relative" is

                                selected. Try setting the left and top positions of the AP Div to "auto"

                                before selecting "relative". Also ensure that there is no content (text ,

                                image etc.) within the zone that you place AP Div No1. After it is placed

                                and sized, you can then place items in it. Maybe there is some template item

                                in there!

                                 

                                I still cannot create a new CSS - always some form of violation or it does

                                not work or I get lost!! I will stick to the basics!

                                 

                                Good Luck

                                 

                                Roy

                                • 13. Re: AP Div Problem ?
                                  siddichan Level 1

                                  Hey Roy,

                                   

                                  Is it possible for you to take a look at the 2nd template by Codify there and tell me if you can add an AP div directly under the navigation bar at the left hand side?  I mean, maybe I'm not doing it right or maybe you'll see some content where I'm seeing none.

                                   

                                  Here's the link to the Codify template sample page: http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html

                                   

                                  Thank you so much!

                                  • 14. Re: AP Div Problem ?
                                    osgood_ Level 8

                                    siddichan wrote:

                                     

                                    Hey Roy,

                                     

                                    Is it possible for you to take a look at the 2nd template by Codify there and tell me if you can add an AP div directly under the navigation bar at the left hand side?  I mean, maybe I'm not doing it right or maybe you'll see some content where I'm seeing none.

                                     

                                    Here's the link to the Codify template sample page: http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.ht ml

                                     

                                    Thank you so much!

                                    It's not the right way to go about putting new content in that area. However, the way the construction has been set up it would mean a re-build so I guess a 'sticking plaster' solution is better than nothing.

                                     

                                    First insert the AP <div> inside the first list (<li></li>) tag as shown below. (Go into code view and do this)

                                     

                                    <ul class="leftnavigation">
                                                   
                                    <li><div id="apfixed"><p>This is an absolutely positioned box.</p></div>
                                    <a href="#" >This is definitely navigation item 1</a></li>
                                    <li><a href="#" >Item 2</a></li>
                                    <li><a href="#" >Item 3</a></li>
                                    </ul>

                                     

                                    Add position: relative; to your .leftnavigation css class (see below) which can be found in the linked css stylesheet.

                                     

                                    .leftnavigation {
                                         position: relative;
                                        }

                                     

                                    Add a new css selector into the css stylesheet for the AP <div>:


                                        #apfixed {
                                         position: absolute;
                                         top: 8em;
                                         left: 8px;
                                         width: 190px;
                                         border: 1px solid #000;
                                        }

                                     

                                    It would have been more helpful to the novice to have constructed the template with a view to them being able to easily alter or add content BUT most people who work for Adobe are clueless, and a complete waste of space.

                                    • 15. Re: AP Div Problem ?
                                      siddichan Level 1

                                      The people I made the site for wanted it uploaded regardless of the bits and pieces I have yet to fix. The site is at http://knrtranslation.com if you want to take a look and see.

                                       

                                      The reason being I tried your method osgood_ and I had to adjust it so that the <div id="apfixed"> was actually placed right under the last of the navigation items. If I tried it the way you told me, it pushed EVERYTHING in the center content div to the left, messed up the navigation among other things.  Now--after I switched it up, I changed the #apfixed to this --

                                            #apfixed {
                                           position: absolute;
                                           top: 450px;
                                           left: 25px;
                                           width: 190px;
                                           border: 1px solid #000;
                                          }

                                       

                                       

                                      Now this looks just right. I hit Live View or Preview and suddenly---same problem as before. The Div is not under the navigation bar, but way over to the left side, and the Left 25px is now in relation to the size of the window I'm previewing in and not going with the divs of the template....

                                       

                                      When I do it your way, it pushes the final navigation item to the top and directly right of the first menu item.  Almost like the  <div class="contentArea"> that this template calls for is constraining the properties of the navigation div... except... I can't find contentArea anywhere on the css file.

                                       

                                       

                                       

                                      The reason I want to add something under the Nav bars is because there's a pane of empty space and I'd like to use it to move the Paypal and Twitter logos you see on the right above the SpryAccordion over that way and enlarge the certification logos for the associations the site owner belongs to.

                                      • 16. Re: AP Div Problem ?
                                        osgood_ Level 8

                                        siddichan wrote:

                                         

                                        The people I made the site for wanted it uploaded regardless of the bits and pieces I have yet to fix. The site is at http://knrtranslation.com if you want to take a look and see.

                                         

                                        The reason being I tried your method osgood_ and I had to adjust it so that the <div id="apfixed"> was actually placed right under the last of the navigation items. If I tried it the way you told me, it pushed EVERYTHING in the center content div to the left, messed up the navigation among other things.  Now--after I switched it up, I changed the #apfixed to this --

                                              #apfixed {
                                             position: absolute;
                                             top: 450px;
                                             left: 25px;
                                             width: 190px;
                                             border: 1px solid #000;
                                            }

                                         

                                         

                                        Now this looks just right. I hit Live View or Preview and suddenly---same problem as before. The Div is not under the navigation bar, but way over to the left side, and the Left 25px is now in relation to the size of the window I'm previewing in and not going with the divs of the template....

                                         

                                        When I do it your way, it pushes the final navigation item to the top and directly right of the first menu item.  Almost like the  <div class="contentArea"> that this template calls for is constraining the properties of the navigation div... except... I can't find contentArea anywhere on the css file.

                                         

                                         

                                         

                                        The reason I want to add something under the Nav bars is because there's a pane of empty space and I'd like to use it to move the Paypal and Twitter logos you see on the right above the SpryAccordion over that way and enlarge the certification logos for the associations the site owner belongs to.

                                         

                                        Now I've got the link to your page I'll take a look tomorrow and see if I can figure out what it is that you need to do to get a <div> under the left nav bar.

                                        • 17. Re: AP Div Problem ?
                                          osgood_ Level 8

                                          It works for me. I've tested it using your page code so you must have missed out an instruction I gave you. Use the below css. YOU MUST set .leftnavigation to have a position of relative as shown. I didn't see that in your css. Also use the the measurement 24em for the top position as shown. This positions the AP <div> clear of the menu links and also allows the AP div to move down if the end user enlarges the text in the browser. If you use px the AP div will not move down but the menu items will if the browser text is enlarges.

                                           

                                          <style type="text/css">
                                          <!--
                                          .leftnavigation {
                                               position: relative;
                                              }
                                          #apDiv1 {
                                              position:absolute;
                                              left: 10px;
                                              top: 24em;
                                              width:190px;
                                          color: #fff;
                                          }
                                          -->
                                          </style>

                                           

                                          Then insert your apDiv1 in the last <li></li> tag in the list as shown below:

                                           

                                          <li><div id="apDiv1"><p>This is an absolutely positioned box.</p></div>
                                                         
                                                          <a href="http://blog.knrtranslation.com" target="_blank">Blog</a></li>
                                                          </ul>