5 Replies Latest reply on Jun 8, 2008 10:02 AM by Newsgroup_User

    Layers in Tables

    brywilson88 Level 1
      I want to stack layers in a table cell. However, I can't seem to find a way to stack them properly. I've tried absolute positioning in CSS but the layers do not auto size with my browser. I have also tried the relative positioning, but instead of stacking the layers, it just puts one below the other. Can anyone help me stack layers in a table cell so that they also auto size with the browser - i.e. an absolute position inside a table cell? Is this possible?

      Thanks
        • 1. Re: Layers in Tables
          Level 7
          brywilson88 wrote:
          > I want to stack layers in a table cell. However, I can't seem to find a way to
          > stack them properly. I've tried absolute positioning in CSS but the layers do
          > not auto size with my browser. I have also tried the relative positioning, but
          > instead of stacking the layers, it just puts one below the other. Can anyone
          > help me stack layers in a table cell so that they also auto size with the
          > browser - i.e. an absolute position inside a table cell? Is this possible?
          >
          > Thanks
          >

          why do you need to stack layers in a table cell?...

          --
          seb (@webtrans1.com)

          high-end web design: http://webtrans1.com

          Sign-up for a free beta test of SiteLander, an ingenious website-builder:
          http://webtrans1.com/sitelander/

          music: http://myspace.com/popmodelberlin
          • 2. Re: Layers in Tables
            brywilson88 Level 1
            The table is how I layout my page. I want to stack layers in a cell so that when a visitor toggles a radio button, the layers will appear or disappear based on what is toggled. I've tried to set a blank layer in the cell as a parent layer and nest the other layers inside of that layer. But, when I set the positioning of these children layers, they resort back to the body as the parent layer. I just don't know what to do.
            • 3. Re: Layers in Tables
              Level 7
              You do not need to use layers to do this. And you never should put
              absolutely positioned elements directly into table cells!

              Investigate the use of DW's SetText behavior. It allows you to change the
              text content of any non-anonymous element on the page in response to an
              event. For example, your selection of a radio button could call this
              behavior to change the text displayed in any other cell on the page,
              provided that cell has been given an ID value, e.g.,

              <td id="special">This cell has an ID</td>

              > But, when I set
              > the positioning of these children layers, they resort back to the body as
              > the
              > parent layer

              Before using 'layers' or any absolutely positioned element, it's a good
              thing to take the time to understand positioning -

              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 page element
              (except for those contained within it, of course).

              2. The absolutely positioned element takes its position from the position of
              its closest PARENT *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 layer'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). Furthermore, the space in
              which
              this element would have appeared were it not positioned 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 the 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 relatively 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 element 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 offsets (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 content 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.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "brywilson88" <webforumsuser@macromedia.com> wrote in message
              news:g2givq$2ah$1@forums.macromedia.com...
              > The table is how I layout my page. I want to stack layers in a cell so
              > that
              > when a visitor toggles a radio button, the layers will appear or disappear
              > based on what is toggled. I've tried to set a blank layer in the cell as
              > a
              > parent layer and nest the other layers inside of that layer. But, when I
              > set
              > the positioning of these children layers, they resort back to the body as
              > the
              > parent layer. I just don't know what to do.
              >

              • 4. Re: Layers in Tables
                brywilson88 Level 1
                Thanks,

                I was able to make this work using only layers - no tables - but, that created other problems. Thanks for everyone's help.
                • 5. Re: Layers in Tables
                  Level 7
                  Hello,

                  Likely, using only layers has created problems you haven't even noticed yet.

                  In addition to what Murray wrote about layers and positioning,
                  PLEASE read this link (specifically the "Problems with Layers" paragraph)
                  It will save you from a great deal of frustration.
                  If not, you'll soon be asking why your page breaks apart, why things move
                  and why text overlaps in other browsers and on other people's computers.

                  http://apptools.com/examples/pagelayout101.php

                  Tak care,
                  Tim


                  "brywilson88" <webforumsuser@macromedia.com> wrote in message
                  news:g2gre0$arb$1@forums.macromedia.com...
                  > Thanks,
                  >
                  > I was able to make this work using only layers - no tables - but, that
                  > created other problems. Thanks for everyone's help.