12 Replies Latest reply on May 5, 2011 1:25 PM by Kevin E.

    Help: AP Div Shifts All Over The Place

    Kevin E. Level 1

      I created a form inside of an AP Div. I place the Div on the page on top of the background graphic without a problem. But when I preview it in IE, the div and its contents shifts over off the page. When I preview it in Firefox, it shifts in the other direction off the page. What gives?

        • 1. Re: Help: AP Div Shifts All Over The Place
          John Waller Adobe Community Professional & MVP

          1. To get any useful help, you need to upload your page and post a link here so we can see what you're talking about.

           

          2. AP Divs don't move. They're Absolutely Positioned at set coordinates on the page. Something else in your page is causing the apparent shift. Again we need to see the site to comment further.

          • 3. Re: Help: AP Div Shifts All Over The Place
            John Waller Adobe Community Professional & MVP

            Tip: Don't try and do web design as you would do graphic design or desktop publishing with lots of drag and drop elements. The web doesn't work like that.

             

            As tempting as AP Divs are, they're not intended for page layout like this.

             

            If you resize your browser window by grabbing the bottom RH corner and moving your mouse around, you'll see that the AP Div remains stationary and everything else behind it moves as the browser resizes.

             

            The page actually looks and behaves the same in FF and IE for me.

             

            This page does not need AP Divs at all.

             

            Remove the CSS from the apDiv4 and make the contact.jpg image into a background image in the centered div.

             

            Then use top-margin to move the form down so it looks right on the page.

            • 4. Re: Help: AP Div Shifts All Over The Place
              Kevin E. Level 1

              Okay, I think I understand. However, how do I center the background graphic?

              • 5. Re: Help: AP Div Shifts All Over The Place
                Nancy OShea Adobe Community Professional & MVP

                Centering Pages, Images and other elements with CSS
                http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html

                 

                Background positioning with CSS:

                http://w3schools.com/css/css_background.asp

                 

                 

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

                • 6. Re: Help: AP Div Shifts All Over The Place
                  Kevin E. Level 1

                  I've changed the graphic to a background image and was able to center it. However, I'm still a little lost about the ap Div. It still moves when you resize the window. How to I overcome that? The new page is at http://www.itspattiecakes.com/contact2.html

                  • 7. Re: Help: AP Div Shifts All Over The Place
                    John Waller Adobe Community Professional & MVP

                    Per my previous post, remove the absolute positioning. It's not necessary.

                    • 8. Re: Help: AP Div Shifts All Over The Place
                      Kevin E. Level 1

                      Okay, I removed the AP Div and put in the table. It remains centered vertically, but horizontally it still shifts (or the background shifts) when the window is sized.

                       

                      Also now, one other problem has popped up. I can't make a hotspot any longer for my links since the graphic is in the background. How can I overcome that?

                      • 9. Re: Help: AP Div Shifts All Over The Place
                        John Waller Adobe Community Professional & MVP

                        Also now, one other problem has popped up. I can't make a hotspot any longer for my links since the graphic is in the background. How can I overcome that?


                        The best way of solving this is to go back to the wrapper div and the absolutely positioned div.

                         

                        Except, you must make the wrapper div relatively positioned (and put the image inside it as page content - not a background image) then put the AP Div inside the relatively positioned div.

                         

                        Then your form will move correctly in relation to the image on any screen and you can put hotspots on your image.

                        1 person found this helpful
                        • 10. Re: Help: AP Div Shifts All Over The Place
                          Kevin E. Level 1

                          I created a wrapper div and put the background graphic inside of it. Upon preview, it acts as it should. But I am having a problem figuring out how to get the AP Div centered inside of it where I can put my form. I've tried in design view and in code view...no luck.

                          • 11. Re: Help: AP Div Shifts All Over The Place
                            John Waller Adobe Community Professional & MVP

                            Try this (changes in bold) - and apDiv4 will move relative to the wrapper div.

                             

                             

                             

                            <!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>Contact Me</title>
                            <style type="text/css">
                            body {
                            background-color: #6D2812;
                            }
                            #wrapper {

                              position: relative;

                              width: 640px;

                              margin: 0 auto;

                            }

                            .maintext {
                            font-family: "Courier New", Courier, monospace;
                            font-size: 12px;
                            }
                            .pattietip {
                            font-family: Georgia, "Times New Roman", Times, serif;
                            font-size: 14px;
                            font-weight: bold;
                            font-style: italic;
                            color: #000;
                            }
                            #apDiv4 {
                            position:absolute;
                            width:492px;
                            height:181px;
                            z-index:1;
                            left: 239px; /* adjust to suit */
                            top: 208px; /* adjust to suit */
                            }
                            </style>
                            </head>

                            <body>
                            <div id="wrapper">
                              <div id="apDiv4">
                                <table width="463" height="190" border="0" cellpadding="2">
                                  <tr>
                                    <td width="79" class="pattietip">Name:</td>
                                    <td width="266"><form id="form1" name="form1" method="post" action="">
                                      <input name="Name" type="text" class="maintext" id="Name" size="30" />
                                    </form></td>
                                    <td width="98"> </td>
                                  </tr>
                                  <tr>
                                    <td class="pattietip">Phone:</td>
                                    <td><form id="form4" name="form4" method="post" action="">
                                      <input name="Phone" type="text" class="maintext" id="Phone" size="30" />
                                    </form></td>
                                    <td> </td>
                                  </tr>
                                  <tr>
                                    <td class="pattietip">Email:</td>
                                    <td><form id="form5" name="form5" method="post" action="">
                                      <input name="Email" type="text" class="maintext" id="Email" size="30" />
                                    </form></td>
                                    <td> </td>
                                  </tr>
                                  <tr>
                                    <td class="pattietip">Occasion</td>
                                    <td><form id="form2" name="form2" method="post" action="">
                                      <select name="Occasion" class="maintext" id="Occasion">
                                        <option selected="selected">Pick one</option>
                                        <option>Birthday</option>
                                        <option>Anniversary</option>
                                        <option>Graduation</option>
                                        <option>Holiday</option>
                                        <option>Other (please enter below)</option>
                                      </select>
                                    </form></td>
                                    <td> </td>
                                  </tr>
                                  <tr>
                                    <td> </td>
                                    <td><form id="form3" name="form3" method="post" action="">
                                      <textarea name="Info" cols="45" rows="5" class="maintext" id="Info"></textarea>
                                    </form></td>
                                    <td><form id="form6" name="form6" method="post" action="">
                                      <input type="submit" name="Submit" id="Submit" value="Submit" />
                                    </form></td>
                                  </tr>
                                </table>
                              </div>
                              <img src="contact.jpg" width="640" height="480" border="0" usemap="#Map" />
                              <map name="Map" id="Map">
                                <area shape="rect" coords="132,410,203,433" href="occasions.html" />
                                <area shape="rect" coords="223,408,340,431" href="flavors.html" />
                                <area shape="rect" coords="362,408,447,432" href="album.html" />
                                <area shape="rect" coords="6,10,369,64" href="index.html" />
                              </map>
                            </div>
                            </body>
                            </html>

                            • 12. Re: Help: AP Div Shifts All Over The Place
                              Kevin E. Level 1

                              That did it! Thank you so much for your help.

                              If you want to see the completed page, it is at http://www.itspattiecakes.com/contact.html