9 Replies Latest reply on Jun 7, 2006 2:54 PM by Newsgroup_User

    curser jumping

    DennyA


      I have two absolutely positioned divs (layers). When I try to position the curser in between them in design view, I can't.

      The html is below:

      <div id="logoheader">
      <p class="logo">Connoisseur Slate &amp; Tile </p>
      <blockquote>
      <p class="slogan">Chicagoland's slate and tile specialists </p>
      </blockquote>
      </div>


      <div id="topnavbar">
      <p><a href="index.html"><img src="images/m1.gif" alt="" border="0" align="middle" /></a><a href="service.html"><img src="images/m2.gif" alt="" border="0" align="middle" style="margin-left:34px " /></a><a href="gallery.html"><img src="images/m3.gif" alt="" border="0" align="middle" style="margin-left:28px " /></a><a href="faqs.html"><img src="images/m4.gif" alt="" border="0" align="middle" style="margin-left:29px " /></a><a href="contact_us.html"><img src="images/m5.gif" alt="" border="0" align="middle" style="margin-left:29px " /></a> </p>
      </div>

      Here's the style sheet section:

      #logoheader {
      position: absolute;
      height: 126px;
      width: 854px;
      left: 0px;
      top: 0px;
      background-image: url(images/bg1.gif);
      border: medium solid #000000;
      }


      #topnavbar {
      position: absolute;
      height: 38px;
      width: 750px;
      top: 340px;
      left: 0px;
      background-image: url(images/bg6.gif);
      padding-top: 10px;
      border: thick double #000000;
      }

      Any one have any idea why this is happening?

      Thanks,

      Denny
        • 1. Re: curser jumping
          Level 7
          There is no *in between* with absolutely positioned elements since they
          aren't really ON the page - they are above the page. When you click between
          them, you are clicking on the page, not in the metaspace containing the
          layers.

          What are you trying to do?

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "DennyA" <webforumsuser@macromedia.com> wrote in message
          news:e66u7g$o7e$1@forums.macromedia.com...
          >
          >
          > I have two absolutely positioned divs (layers). When I try to position the
          > curser in between them in design view, I can't.
          >
          > The html is below:
          >
          > <div id="logoheader">
          > <p class="logo">Connoisseur Slate &amp; Tile </p>
          > <blockquote>
          > <p class="slogan">Chicagoland's slate and tile specialists </p>
          > </blockquote>
          > </div>
          >
          >
          > <div id="topnavbar">
          > <p><a href="index.html"><img src="images/m1.gif" alt="" border="0"
          > align="middle" /></a><a href="service.html"><img src="images/m2.gif"
          > alt=""
          > border="0" align="middle" style="margin-left:34px " /></a><a
          > href="gallery.html"><img src="images/m3.gif" alt="" border="0"
          > align="middle"
          > style="margin-left:28px " /></a><a href="faqs.html"><img
          > src="images/m4.gif"
          > alt="" border="0" align="middle" style="margin-left:29px " /></a><a
          > href="contact_us.html"><img src="images/m5.gif" alt="" border="0"
          > align="middle" style="margin-left:29px " /></a> </p>
          > </div>
          >
          > Here's the style sheet section:
          >
          > #logoheader {
          > position: absolute;
          > height: 126px;
          > width: 854px;
          > left: 0px;
          > top: 0px;
          > background-image: url(images/bg1.gif);
          > border: medium solid #000000;
          > }
          >
          >
          > #topnavbar {
          > position: absolute;
          > height: 38px;
          > width: 750px;
          > top: 340px;
          > left: 0px;
          > background-image: url(images/bg6.gif);
          > padding-top: 10px;
          > border: thick double #000000;
          > }
          >
          > Any one have any idea why this is happening?
          >
          > Thanks,
          >
          > Denny
          >
          >


          • 2. Re: curser jumping
            DennyA Level 1
            I had a placed a logo banner (layer) at the top. I had then placed a nav bar (layer) below it. After placing the nav bar layer, I realized that I had wanted to place a row of pictures between them.

            I grabbed the handle of the lower layer and moved it down. I thought I would be able to insert text in the "space" I created in between the two layers. I couldn't.

            I could insert another div, so I could get around it, but I wanted to understand the reasons for the behavior.

            Aha! That's why when I have three layers in a vertical row and change the bottom one from absolute to static it jumps to the top of the page!

            Also, when I tried to get around it by typing text in between the layers in code view, that's why the text jumped to the top of the page behind the top layer.

            Thank you, thank you. I can't memorize worth a damn, so if I'm going to learn this stuff, I have to know the reasons why things happen.

            Denny





            Actually


            Thank you!

            Denny

            • 3. Re: curser jumping
              Level 7
              > Aha! That's why when I have three layers in a vertical row and change the
              > bottom one from absolute to static it jumps to the top of the page!

              Yes. By making it static (the default for any page element), you place it
              back on the page.

              > Also, when I tried to get around it by typing text in between the layers
              > in
              > code view, that's why the text jumped to the top of the page behind the
              > top
              > layer.

              Right again.

              > Thank you, thank you. I can't memorize worth a damn, so if I'm going to
              > learn
              > this stuff, I have to know the reasons why things happen.

              This may help you understand positioning a bit -

              There are 4 different types of positioning:
              Absolute
              Relative
              Fixed
              Static

              Here is a brief explanation of each kind of positioning (with regard to
              placement of elements on the page only)....

              Position:absolute (or A/P elements)
              -----------------------
              This does several things -
              1. It 'removes' the element from the flow of the code on the� page so that
              it can no longer influence the size or position of any other pa�ge element
              (except for those contained within it, of course).

              2. The absolutely positioned element takes its position from the position of
              its closest PA�RENT *positioned* element - in the absence of any explicitly
              positioned parent, this will default to the <body> tag, which is always
              positioned
              �at 0,0 in the browser viewport.

              This means that it doesn't matter where in the HTML code the laye�r's code
              appears (between <body> and </body> , its location on the screen will not
              change (this assumes that you have not positioned the A/P element within
              a table or another A/P element, of course). Furthe�rmore, the space in
              which
              this element would have appeared were it not positi�oned is not preserved
              on the screen. In other words, absolutely positioned elements don't take
              up any space on the page. In fact, they FLOAT over the page.

              Position:relative (or R/P elements)
              ----------------------
              In contrast to absolute positioning, a relatively positioned page element is
              *not* removed from t�he flow of the code on the page, so it will use the
              spot
              where it would have� appeared based on its position in the code as its
              zero point reference. If� you then supply top, right, bottom, or left
              positions
              to the style for this �element, those values will be used as offsets from
              its
              zero point.

              This means that it DOES matter where in the code the relativ�ely positioned
              element appears (, as it will be positioned in that location (�factoring in
              the offsets) on the screen (this is true for any placement in the code).
              Furthermore, the space where this e�lement would have appeared is
              preserved in the display, and can therefore� affect the placement of
              succeeding elements. This means that the taller a relatively
              positioned element is, the more space it forces on the page.

              Position:static
              -------------------
              As with relative position, static positions also "go with �the flow". An
              element with a static position cannot have values for offset�s (top, right,
              left, bottom) or if it has them, they will be ignored. Unless explicitly
              positioned, all div elements default to static positioning.

              Position:fixed
              ------------------
              A page element with this style will not scroll as the page c�ontent scrolls.
              Support for this in elements other than page backgrounds is �quirky

              There are several other things you need to know:

              1. ANY page element can be positioned - paragraphs, tables, images, lists,
              etc.
              2. The <div> tag is a BLOCK level tag. This means that if it is not
              positioned or explicitly styled otherwise, a) it will always begin on a new
              line on the screen, and b) it will always force content to a new line below
              it, and c) it will always take up the entire width of its container (i.e.,
              width:100%).
              3. The placement of A/P elements *can* affect the BEHAVIOR of other
              elements
              on the page. For example, a 'layer' placed over a hyperlink will mask that
              hyperlink.

              You can see a good example of the essential difference between absolute and
              relative positioning here -

              http://www.great-web-sights.com/g_layersdemo.asp

              You can see a good demonstration of why using layers for a page layout tool
              is dangerous here -

              http://www.great-web-sights.com/g_layer-overlap.asp

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.dreamweavermx-templates.com - Template Triage!
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
              ==================


              "DennyA" <webforumsuser@macromedia.com> wrote in message
              news:e671rd$sut$1@forums.macromedia.com...
              >I had a placed a logo banner (layer) at the top. I had then placed a nav
              >bar
              > (layer) below it. After placing the nav bar layer, I realized that I had
              > wanted
              > to place a row of pictures between them.
              >
              > I grabbed the handle of the lower layer and moved it down. I thought I
              > would
              > be able to insert text in the "space" I created in between the two layers.
              > I
              > couldn't.
              >
              > I could insert another div, so I could get around it, but I wanted to
              > understand the reasons for the behavior.
              >
              > Aha! That's why when I have three layers in a vertical row and change the
              > bottom one from absolute to static it jumps to the top of the page!
              >
              > Also, when I tried to get around it by typing text in between the layers
              > in
              > code view, that's why the text jumped to the top of the page behind the
              > top
              > layer.
              >
              > Thank you, thank you. I can't memorize worth a damn, so if I'm going to
              > learn
              > this stuff, I have to know the reasons why things happen.
              >
              > Denny
              >
              >
              >
              >
              >
              > Actually
              >
              >
              > Thank you!
              >
              > Denny
              >
              >
              >


              • 4. Re: curser jumping
                DennyA Level 1
                Thanks again. I've read several explanations of positioning, but it is just now starting to sink in. Layers look so easy, but....

                Now for another question:

                Since I have three elements at the top:
                Logo header
                Horizontal nav bar
                Row of pictures

                I figured out that they could all be static divs.

                Below the above elements, I want a narrow nav bar on the left and content on the right. Can I do that with static divs?

                I read somewhere that it's possible by using wide margins and floats, but I can't find it now. Or I think that's what it said.

                Denny
                • 5. Re: curser jumping
                  Level 7
                  Yes - you can do all of that and more with static divs. Here are some good
                  links for you -

                  http://www.projectseven.com/tutorials/css/qdmacfly/index.htm
                  http://www.macromedia.com/devnet/mx/dreamweaver/css.html
                  http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
                  http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html


                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.dreamweavermx-templates.com - Template Triage!
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                  ==================


                  "DennyA" <webforumsuser@macromedia.com> wrote in message
                  news:e67488$2l5$1@forums.macromedia.com...
                  > Thanks again. I've read several explanations of positioning, but it is
                  > just now
                  > starting to sink in. Layers look so easy, but....
                  >
                  > Now for another question:
                  >
                  > Since I have three elements at the top:
                  > Logo header
                  > Horizontal nav bar
                  > Row of pictures
                  >
                  > I figured out that they could all be static divs.
                  >
                  > Below the above elements, I want a narrow nav bar on the left and content
                  > on
                  > the right. Can I do that with static divs?
                  >
                  > I read somewhere that it's possible by using wide margins and floats, but
                  > I
                  > can't find it now. Or I think that's what it said.
                  >
                  > Denny
                  >


                  • 6. Re: curser jumping
                    DennyA Level 1
                    Aha!
                    I found another article before you replied.
                    http://www.maxdesign.com.au/presentation/butterfly/index17.htm

                    It had exactly what I was looking for.

                    Let me see if I've got this straight. Absolutely positioned divs are ego maniacs. They go where ever they want to and don't care what other elements they mess with.

                    A floating element is not quite so egotistical. They can force themselves to one side (not higher or lower) from where they would normally be. They even let other elements sit beside them unless they get really selfish (clear).

                    I gave the side nav bar a width of 160px and floated it left. I then gave the content div a margin of 200 px. The margin made it so the content would flow under the nav bar.

                    OK. Why doesn't the 200px margin keep the content area that far away from the side nav bar? Or is that just part of the definition of a floated element?

                    Thanks again,

                    Denny
                    • 7. Re: curser jumping
                      DennyA Level 1
                      Oops. Correction. The margin made it so the content would NOT flow under the nav bar.

                      Denny
                      • 8. Re: curser jumping
                        Level 7
                        Show us the page, please.

                        --
                        Murray --- ICQ 71997575
                        Adobe Community Expert
                        (If you *MUST* email me, don't LAUGH when you do so!)
                        ==================
                        http://www.dreamweavermx-templates.com - Template Triage!
                        http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                        http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                        http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                        ==================


                        "DennyA" <webforumsuser@macromedia.com> wrote in message
                        news:e67ho8$j7i$1@forums.macromedia.com...
                        > Oops. Correction. The margin made it so the content would NOT flow under
                        > the nav bar.
                        >
                        > Denny


                        • 9. Re: curser jumping
                          Level 7
                          Looks like you have that mostly right.

                          --
                          Murray --- ICQ 71997575
                          Adobe Community Expert
                          (If you *MUST* email me, don't LAUGH when you do so!)
                          ==================
                          http://www.dreamweavermx-templates.com - Template Triage!
                          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                          ==================


                          "DennyA" <webforumsuser@macromedia.com> wrote in message
                          news:e67hl5$j07$1@forums.macromedia.com...
                          > Aha!
                          > I found another article before you replied.
                          > <a target=_blank class=ftalternatingbarlinklarge
                          > href=" http://www.maxdesign.com.au/presentation/butterfly/index17.htm
                          >
                          > It"> http://www.maxdesign.com.au/presentation/butterfly/index17.htm
                          >
                          > It</a> had exactly what I was looking for.
                          >
                          > Let me see if I've got this straight. Absolutely positioned divs are ego
                          > maniacs. They go where ever they want to and don't care what other
                          > elements
                          > they mess with.
                          >
                          > A floating element is not quite so egotistical. They can force themselves
                          > to
                          > one side (not higher or lower) from where they would normally be. They
                          > even let
                          > other elements sit beside them unless they get really selfish (clear).
                          >
                          > I gave the side nav bar a width of 160px and floated it left. I then gave
                          > the
                          > content div a margin of 200 px. The margin made it so the content would
                          > flow
                          > under the nav bar.
                          >
                          > OK. Why doesn't the 200px margin keep the content area that far away from
                          > the
                          > side nav bar? Or is that just part of the definition of a floated element?
                          >
                          > Thanks again,
                          >
                          > Denny
                          >
                          >