11 Replies Latest reply on Aug 6, 2008 12:21 PM by Newsgroup_User

    Positioning an AP div semi-relatively... how?

    Level 7
      If I want an AP div (z-indexed to be above the rest of the layout) to be
      positioned 10 pixels higher than the insertion point, what's the best method
      to achieve this?

      The layout is liquid so the distances from the viewport borders are
      unpredictable. That's why I need it very specifically 10px up from the
      insertion point.

      Are we talking AP div within a relative div? Or is there a trick with
      negative margins I don't know about?

      Thanks.


        • 1. Re: Positioning an AP div semi-relatively... how?
          Level 7
          > If I want an AP div (z-indexed to be above the rest of the layout) to be
          > positioned 10 pixels higher than the insertion point, what's the best
          > method to achieve this?

          Nest it within a relatively positioned <div> at the insertion point. This
          will make the context of the AP element correspond to the insertion point's
          location.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "mjs" <no@thanks.com> wrote in message
          news:g7cf2p$pa3$1@forums.macromedia.com...
          > If I want an AP div (z-indexed to be above the rest of the layout) to be
          > positioned 10 pixels higher than the insertion point, what's the best
          > method to achieve this?
          >
          > The layout is liquid so the distances from the viewport borders are
          > unpredictable. That's why I need it very specifically 10px up from the
          > insertion point.
          >
          > Are we talking AP div within a relative div? Or is there a trick with
          > negative margins I don't know about?
          >
          > Thanks.
          >

          • 2. Re: Positioning an AP div semi-relatively... how?
            Level 7
            "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
            news:g7cf5v$pe1$1@forums.macromedia.com...
            >> If I want an AP div (z-indexed to be above the rest of the layout) to be
            >> positioned 10 pixels higher than the insertion point, what's the best
            >> method to achieve this?
            >
            > Nest it within a relatively positioned <div> at the insertion point. This
            > will make the context of the AP element correspond to the insertion
            > point's location.

            What advantage would that method have over the one I accidentally just
            stumbled upon?

            #footCorners {
            position:absolute;
            width:538px;
            height:7px;
            margin:-7px 0px 0px 130px;
            z-index:1;
            }

            Note the negative top margin.


            • 3. Re: Positioning an AP div semi-relatively... how?
              Level 7
              The margin's reference point is calculated from the location of the nearset
              positioned ancestor. Thus, the AP element will be placed 7px higher on the
              page, and 130px to the right of the location of that nearest positioned
              ancestor. To answer your question, I'd need to know where that nearest
              positioned ancestor is in the normal flow.

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "mjs" <no@thanks.com> wrote in message
              news:g7cg73$qh7$1@forums.macromedia.com...
              > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
              > news:g7cf5v$pe1$1@forums.macromedia.com...
              >>> If I want an AP div (z-indexed to be above the rest of the layout) to be
              >>> positioned 10 pixels higher than the insertion point, what's the best
              >>> method to achieve this?
              >>
              >> Nest it within a relatively positioned <div> at the insertion point.
              >> This will make the context of the AP element correspond to the insertion
              >> point's location.
              >
              > What advantage would that method have over the one I accidentally just
              > stumbled upon?
              >
              > #footCorners {
              > position:absolute;
              > width:538px;
              > height:7px;
              > margin:-7px 0px 0px 130px;
              > z-index:1;
              > }
              >
              > Note the negative top margin.
              >

              • 4. Re: Positioning an AP div semi-relatively... how?
                Level 7
                On Wed, 6 Aug 2008 11:52:46 -0400, "Murray *ACE*"
                <forums@HAHAgreat-web-sights.com> wrote:

                >The margin's reference point is calculated from the location of the nearset
                >positioned ancestor. Thus, the AP element will be placed 7px higher on the
                >page, and 130px to the right of the location of that nearest positioned
                >ancestor. To answer your question, I'd need to know where that nearest
                >positioned ancestor is in the normal flow.

                When a object is positioned absolutely, margin does nothing.

                Gary
                • 5. Re: Positioning an AP div semi-relatively... how?
                  Level 7
                  Sorry - typo on my part. I intended to say the element's reference point.
                  Of course, you are correct.

                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  ==================


                  "Gary White" <reply@newsgroup.please> wrote in message
                  news:ocrj945llfhn4mph2pb95ne72a5q7bfkf8@4ax.com...
                  > On Wed, 6 Aug 2008 11:52:46 -0400, "Murray *ACE*"
                  > <forums@HAHAgreat-web-sights.com> wrote:
                  >
                  >>The margin's reference point is calculated from the location of the
                  >>nearset
                  >>positioned ancestor. Thus, the AP element will be placed 7px higher on
                  >>the
                  >>page, and 130px to the right of the location of that nearest positioned
                  >>ancestor. To answer your question, I'd need to know where that nearest
                  >>positioned ancestor is in the normal flow.
                  >
                  > When a object is positioned absolutely, margin does nothing.
                  >
                  > Gary

                  • 6. Re: Positioning an AP div semi-relatively... how?
                    Level 7
                    "Gary White" <reply@newsgroup.please> wrote in message
                    news:ocrj945llfhn4mph2pb95ne72a5q7bfkf8@4ax.com...
                    > On Wed, 6 Aug 2008 11:52:46 -0400, "Murray *ACE*"
                    > <forums@HAHAgreat-web-sights.com> wrote:
                    >
                    >>The margin's reference point is calculated from the location of the
                    >>nearset
                    >>positioned ancestor. Thus, the AP element will be placed 7px higher on
                    >>the
                    >>page, and 130px to the right of the location of that nearest positioned
                    >>ancestor. To answer your question, I'd need to know where that nearest
                    >>positioned ancestor is in the normal flow.
                    >
                    > When a object is positioned absolutely, margin does nothing.

                    On both IE7 and FF2, a negative margin applied to an absolutely positioned
                    DIV will move that DIV by the length of the margin in relation to the
                    insertion point (and not the 0,0 point).

                    Works rather well, especially to add a design element to the footer of a
                    liquid layout when contents are top-justified.

                    Example :

                    <div>Hello</div>
                    <div style="position:absolute; top-margin:-20px>Hi</div>

                    "Hi" will be positioned 20 px above the 1st pixel under "Hello", regardless
                    of how far up, down, left or right "Hello" happens to be positioned on the
                    page, or in relation to the 0,0 mark.


                    • 7. Re: Positioning an AP div semi-relatively... how?
                      Level 7
                      Ack. I retract my reply to Gary. Of course we are not talking here about
                      margins on an absolutely positioned thing affecting anything else on the
                      page.

                      Anyhow, I despise negative margins, and will not use them. So, I don't
                      regard this as a good method.

                      --
                      Murray --- ICQ 71997575
                      Adobe Community Expert
                      (If you *MUST* email me, don't LAUGH when you do so!)
                      ==================
                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                      ==================


                      "mjs" <no@thanks.com> wrote in message
                      news:g7cr23$95a$1@forums.macromedia.com...
                      > "Gary White" <reply@newsgroup.please> wrote in message
                      > news:ocrj945llfhn4mph2pb95ne72a5q7bfkf8@4ax.com...
                      >> On Wed, 6 Aug 2008 11:52:46 -0400, "Murray *ACE*"
                      >> <forums@HAHAgreat-web-sights.com> wrote:
                      >>
                      >>>The margin's reference point is calculated from the location of the
                      >>>nearset
                      >>>positioned ancestor. Thus, the AP element will be placed 7px higher on
                      >>>the
                      >>>page, and 130px to the right of the location of that nearest positioned
                      >>>ancestor. To answer your question, I'd need to know where that nearest
                      >>>positioned ancestor is in the normal flow.
                      >>
                      >> When a object is positioned absolutely, margin does nothing.
                      >
                      > On both IE7 and FF2, a negative margin applied to an absolutely positioned
                      > DIV will move that DIV by the length of the margin in relation to the
                      > insertion point (and not the 0,0 point).
                      >
                      > Works rather well, especially to add a design element to the footer of a
                      > liquid layout when contents are top-justified.
                      >
                      > Example :
                      >
                      > <div>Hello</div>
                      > <div style="position:absolute; top-margin:-20px>Hi</div>
                      >
                      > "Hi" will be positioned 20 px above the 1st pixel under "Hello",
                      > regardless of how far up, down, left or right "Hello" happens to be
                      > positioned on the page, or in relation to the 0,0 mark.
                      >

                      • 8. Re: Positioning an AP div semi-relatively... how?
                        Level 7
                        "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                        news:g7crc1$9jg$1@forums.macromedia.com...
                        > Ack. I retract my reply to Gary. Of course we are not talking here about
                        > margins on an absolutely positioned thing affecting anything else on the
                        > page.

                        Not sure what any of this means, since I thought an absolutely-positioned
                        div, by definition, did not affect anything else on the page. All's I know
                        is that you can use negative margings to position an absolutely-positioned
                        div in a relative manner.

                        I just wasn't sure if it was a bug or not when I stumbled upon the behavior.
                        Since you didn't say "invalid code", I'm assuming it actually validates. Not
                        that it would stop me if it didn't.

                        It's a wonderfully useful tool to have in very specialized instances, and
                        one I wish I'd known of before.

                        > Anyhow, I despise negative margins, and will not use them. So, I don't
                        > regard this as a good method.

                        Egads. Did a negative margin once steal your lunch or something? :-)


                        • 9. Re: Positioning an AP div semi-relatively... how?
                          Level 7
                          > Not sure what any of this means, since I thought an absolutely-positioned
                          > div, by definition, did not affect anything else on the page.

                          That is correct.

                          > All's I know is that you can use negative margings to position an
                          > absolutely-positioned div in a relative manner.

                          As I said earlier (before correcting myself) the negative margin would apply
                          based on the location of the closest positioned ancestor. This would not
                          give you the 'relative' effect you are looking for UNLESS the positioned
                          ancestor happened to be an immediately 'parental' container.

                          > I just wasn't sure if it was a bug or not when I stumbled upon the
                          > behavior. Since you didn't say "invalid code", I'm assuming it actually
                          > validates.

                          It is valid.

                          > Not that it would stop me if it didn't.

                          We already know about your disdain for this very useful technique.

                          > It's a wonderfully useful tool to have in very specialized instances, and
                          > one I wish I'd known of before.

                          It'll bite you in the *** when you least expect it. Long after you've
                          forgotten you used it....

                          --
                          Murray --- ICQ 71997575
                          Adobe Community Expert
                          (If you *MUST* email me, don't LAUGH when you do so!)
                          ==================
                          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                          ==================


                          "mjs" <no@thanks.com> wrote in message
                          news:g7crqo$a0u$1@forums.macromedia.com...
                          > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                          > news:g7crc1$9jg$1@forums.macromedia.com...
                          >> Ack. I retract my reply to Gary. Of course we are not talking here
                          >> about margins on an absolutely positioned thing affecting anything else
                          >> on the page.
                          >
                          > Not sure what any of this means, since I thought an absolutely-positioned
                          > div, by definition, did not affect anything else on the page. All's I know
                          > is that you can use negative margings to position an absolutely-positioned
                          > div in a relative manner.
                          >
                          > I just wasn't sure if it was a bug or not when I stumbled upon the
                          > behavior. Since you didn't say "invalid code", I'm assuming it actually
                          > validates. Not that it would stop me if it didn't.
                          >
                          > It's a wonderfully useful tool to have in very specialized instances, and
                          > one I wish I'd known of before.
                          >
                          >> Anyhow, I despise negative margins, and will not use them. So, I don't
                          >> regard this as a good method.
                          >
                          > Egads. Did a negative margin once steal your lunch or something? :-)
                          >

                          • 10. Re: Positioning an AP div semi-relatively... how?
                            Level 7
                            "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                            news:g7csg3$aqq$1@forums.macromedia.com...
                            >>
                            >> I'm assuming it actually validates.
                            >
                            > It is valid.
                            >
                            >> It's a wonderfully useful tool to have in very specialized instances, and
                            >> one I wish I'd known of before.
                            >
                            > It'll bite you in the *** when you least expect it. Long after you've
                            > forgotten you used it....

                            What? Valid code that'll bite me in the *** when I least expect it?

                            Hmm. Why should I use valid code again? ;-)

                            (I'm teasing, no response required.)


                            • 11. Re: Positioning an AP div semi-relatively... how?
                              Level 7
                              > (I'm teasing, no response required.)

                              That's a relief. 8)

                              --
                              Murray --- ICQ 71997575
                              Adobe Community Expert
                              (If you *MUST* email me, don't LAUGH when you do so!)
                              ==================
                              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                              ==================


                              "mjs" <no@thanks.com> wrote in message
                              news:g7ct88$blm$1@forums.macromedia.com...
                              > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                              > news:g7csg3$aqq$1@forums.macromedia.com...
                              >>>
                              >>> I'm assuming it actually validates.
                              >>
                              >> It is valid.
                              >>
                              >>> It's a wonderfully useful tool to have in very specialized instances,
                              >>> and one I wish I'd known of before.
                              >>
                              >> It'll bite you in the *** when you least expect it. Long after you've
                              >> forgotten you used it....
                              >
                              > What? Valid code that'll bite me in the *** when I least expect it?
                              >
                              > Hmm. Why should I use valid code again? ;-)
                              >
                              > (I'm teasing, no response required.)
                              >