10 Replies Latest reply on Mar 3, 2010 5:36 AM by Tystforfan

    "lock" AP Div

    Tystforfan

      Take a look at this: http://kustradion.eu/test123/fotboll.php

       

      The orange area is an AP Div (draw) and i want that to lock next to the gray area. Also when i resize the window i wnat the orange area to resize with the rest of the site. Been reading around internet but i really dont understand how to do it. Only thing i understand is to not use posotion: fixed and so on as it looks bad in IE 6 and below...

        • 1. Re: "lock" AP Div
          osgood_ Level 8

          Tystforfan wrote:

           

          Take a look at this: http://kustradion.eu/test123/fotboll.php

           

          The orange area is an AP Div (draw) and i want that to lock next to the gray area. Also when i resize the window i wnat the orange area to resize with the rest of the site. Been reading around internet but i really dont understand how to do it. Only thing i understand is to not use posotion: fixed and so on as it looks bad in IE 6 and below...

          Weird..humm why do you want the orange area so far left?

           

          Anyway add this to your css:

           

          #content-2-2-1 {
          position: relative;
          }

           

          Amend the apDiv1 css to:


          #apDiv1 {
              position:absolute;
              left: 200px;
              top: 0px;
              width:313px;
              height:884px;
              background-color: #CC6600;
          }

           

          Move the apDiv1 into the position in the code as shown below: (directly after the content-2-2-1 opening <div> tag.

           

          <div id="content-2-2">
              <div class="content-padder" id="content-2-2-1">


              <div id="apDiv1">hello</div>


                  <h2>Meny</h2>
                  <p> </p>
                  <p> </p>
                <a href="zlatan.php">ZLATAN</a> <br /><br />

          <a href="malaga.php">MÁLAGA CF</a> <br /><br />
                <a href="fotbollsklubbar.php">KLUBBAR</a> <br /><br />
                <a href="fotbollslankar.php">LÄNKAR</a></div>
              </div>
              <div id="content-2-bottom"> </div>
                </div>

           

           

          Get rid of the 'fixed' css associated with apDiv1 in your main stylesheet

          • 2. Re: "lock" AP Div
            Tystforfan Level 1

            What do you mean far way to the left?

             

            I want it to be like this:

             

             

             

            Skärmavbild 2010-03-02 kl. 17.49.50.png

            • 3. Re: "lock" AP Div
              osgood_ Level 8

              Tystforfan wrote:

               

              What do you mean far way to the left?

               

              I want it to be like this:

               

               

               

              Skärmavbild 2010-03-02 kl. 17.49.50.png

               

               

              Sorry, I couldn't see the orange area at all when I first viewed in the browser as it was far far RIGHT NOT LEFT. I forgot your positioning was all wonky and I was altering it

               

              It will look as above it you follow my instructions.

              • 4. Re: "lock" AP Div
                Tystforfan Level 1

                Ah okey, no worries mate!

                 

                I will have a look into your code and get back to you if it works or if i can't get it to work. Thanks for your help so far!

                • 5. Re: "lock" AP Div
                  Tystforfan Level 1

                  Hello again,

                   

                  If you take a look at the page: http://kustradion.eu/test123/fotboll.php

                   

                  I did the changes that you wrote, the thing is that the box is to much to the right. And it does not resize with the rest of the page if i change the window size of the browser...

                  • 6. Re: "lock" AP Div
                    John Waller Adobe Community Professional & MVP
                    function(){return A.apply(null,[this].concat($A(arguments)))}

                    I did the changes that you wrote, the thing is that the box is to much to the right. And it does not resize with the rest of the page if i change the window size of the browser...


                    You did half the changes. You changed the HTML but not the CSS.

                     

                    Osgood's CSS (two rules)

                     

                    #content-2-2-1 {
                    position: relative;
                    }

                     

                    #apDiv1 {
                        position:absolute;
                        left: 200px;
                        top: 0px;
                        width:313px;
                        height:884px;
                        background-color: #CC6600;
                    }

                     

                    Yours (only one different rule-compare left and top)

                     

                    #apDiv1 {
                    position:absolute;
                    left:1254px;
                    top:586px;
                    width:313px;
                    height:884px;
                    z-index:0;
                    background-color: #CC6600;
                    }

                    Change your CSS to match Osgood's in full.

                    • 7. Re: "lock" AP Div
                      Tystforfan Level 1

                      Ahhhh, missed that one (sorry). Thank you for your help and thank you Osgood also!

                      • 8. Re: "lock" AP Div
                        Tystforfan Level 1

                        Oh, one more thing. If you take a look on the page now: http://kustradion.eu/test123/fotboll.php

                         

                        At the top of the orange box the box is falling down...i want it to be the same height and margin, padding whatever same as the grey box/field. Tried to change it to -5 and so on instead of 0 top, but that does not work.

                        • 9. Re: "lock" AP Div
                          osgood_ Level 8

                          Tystforfan wrote:

                           

                          Oh, one more thing. If you take a look on the page now: http://kustradion.eu/test123/fotboll.php

                           

                          At the top of the orange box the box is falling down...i want it to be the same height and margin, padding whatever same as the grey box/field. Tried to change it to -5 and so on instead of 0 top, but that does not work.

                          try top: -10px; as shown below. It should be sitting top: 0; but something else in the cs is stopping it so this is a 'sticking plaster' fix.

                           

                          #apDiv1 {
                              position:absolute;
                              left:200px;
                              top: -10px;
                              width:250px;
                              height:780px;
                              background-color: #FFFFFF;
                          }

                           

                          Also get rid of the css in your main linked style sheet which related to the apDiv1 as well otherwise this can cause conflicts OR replace the css in your main style sheet with the new rules for apDiv1 above.

                          • 10. Re: "lock" AP Div
                            Tystforfan Level 1

                            Thanks osgood, looks like it works now!