Dreamweaver - Layers positioning problem

Author

Layers positioning problem

sebastien brault

2004-02-12, 10:29 pm

Hi
I've been using Layers for a while now but always with absolute positioning.
Now I'm trying to understand relative positioning.
Basically what I don't understand, is exactly relative to what this relative
positioning is.
I am trying to place 3 layers on top of each other (they will hide and show
alternately according to some mouse-over links).
I placed my layers in a table, and have been trying to precisely align them
to the same position, without success, plus, their respective position is
slightly different from one browser to another...
Here's my css:

#Layer1 {
position: relative;
visibility: hidden;
z-index: 1;
top: 0px;
height: 100px;
left: 0px;
}
#Layer2 {
position: relative;
visibility: hidden;
z-index: 1;
top: -100px;
height: 100px;
left: 15px;
}
#Layer3 {
position: relative;
visibility: hidden;
z-index: 1;
right: 0px;
top: -189px;
height: 100px;
left: 30px;

What seems to be a pain, is that even though I define the height of each
layer, aligning them precisely on top of each other seems to be a guess
game, nothing mathematical. (logically the third layer should have a
top: -200px;
Position, but that is nowhere at the right place.

What am I missing?

Murray *TMM*

2004-02-13, 11:31 am

sebastien:

It's all explained for you here -

http://www.w3.org/TR/REC-CSS2/visuren.html#normal-flow

Relative positioning is always determined based on the NORMAL FLOW of the
elements, and the location of the element's container.

Regarding your specific example, make sure that you have properly terminated
the declaration for #Layer3 (you are missing the closing brace).

If you insert your code onto a new page, each layer will be positioned
according to the 0,0 coordinates of the page. This means that two of the
layers will be OFFSCREEN. To see more clearly what is happening, wrap all
three of your div tags with a wrapper div, e.g., -

<div id="divWrapper">
<div id="Layer1">Content for id "Layer1" Goes Here</div>
<div id="Layer2">Content for id "Layer2" Goes Here</div>
<div id="Layer3">Content for id "Layer3" Goes Here</div>
</div>

and use this CSS -

<style type="text/css">

</style>

By doing this, and then previewing the page, you will see that the layers
are precisely positioned EXACTLY as specified. In other words, they are
offset horizontally by 15 pixels. But it's the vertical positioning that is
tricky. If there were NO vertical positioning (as you could see by removing
the top specification from my styles), the three layers would be shown
SEQUENTIALLY on the page, i.e., subject to normal flow, and since they are
sequentially listed in the code, they will be sequentially shown on the
page. But the offsets superimpose them (except that Layer3 is not quite
there, only being offset -189px).

To really get a feel for this, rearrange the code so that it looks like
this -

<div id="Layer3">Content for id "Layer3" Goes Here</div>
<div id="Layer2">Content for id "Layer2" Goes Here</div>
<div id="Layer1">Content for id "Layer1" Goes Here</div>

And you will now see something completely different! It's the normal flow
prerequisite that is causing this.

Does that make sense?

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
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
==================

"sebastien brault" <sebnewyork@earthlink.net> wrote in message
news:BC519BE4.1D5A%sebnewyork@earthlink.net...
> Hi
> I've been using Layers for a while now but always with absolute
positioning.
> Now I'm trying to understand relative positioning.
> Basically what I don't understand, is exactly relative to what this
relative
> positioning is.
> I am trying to place 3 layers on top of each other (they will hide and
show
> alternately according to some mouse-over links).
> I placed my layers in a table, and have been trying to precisely align
them
> to the same position, without success, plus, their respective position is
> slightly different from one browser to another...
> Here's my css:
>
> #Layer1 {
> position: relative;
> visibility: hidden;
> z-index: 1;
> top: 0px;
> height: 100px;
> left: 0px;
> }
> #Layer2 {
> position: relative;
> visibility: hidden;
> z-index: 1;
> top: -100px;
> height: 100px;
> left: 15px;
> }
> #Layer3 {
> position: relative;
> visibility: hidden;
> z-index: 1;
> right: 0px;
> top: -189px;
> height: 100px;
> left: 30px;
>
> What seems to be a pain, is that even though I define the height of each
> layer, aligning them precisely on top of each other seems to be a guess
> game, nothing mathematical. (logically the third layer should have a
> top: -200px;
> Position, but that is nowhere at the right place.
>
> What am I missing?
>

sebastien brault

2004-02-13, 6:28 pm

Thanks a lot Murray
I'm going to try your code example and hopefully I'll figure it all out.
Your suggestion of placing the relative layers within an absolute layer
seems good, I just hope I'll still be able to keep the whole page layout
including the 3 layers flexible both vertically and horizontally according
to the user resizing the browser window (right now all the elements of my
page are flexible and move both vertically and horizontally if the browser
window is resized, and I'd like to keep it that way).

On 2/13/04 10:10 AM, in article c0ipgi$sh0$1@forums.macromedia.com, "Murray
*TMM*" <forums@HAHAgreat-web-sights.com> wrote:

> sebastien:
>
> It's all explained for you here -
>
> http://www.w3.org/TR/REC-CSS2/visuren.html#normal-flow
>
> Relative positioning is always determined based on the NORMAL FLOW of the
> elements, and the location of the element's container.
>
> Regarding your specific example, make sure that you have properly terminated
> the declaration for #Layer3 (you are missing the closing brace).
>
> If you insert your code onto a new page, each layer will be positioned
> according to the 0,0 coordinates of the page. This means that two of the
> layers will be OFFSCREEN. To see more clearly what is happening, wrap all
> three of your div tags with a wrapper div, e.g., -
>
> <div id="divWrapper">
> <div id="Layer1">Content for id "Layer1" Goes Here</div>
> <div id="Layer2">Content for id "Layer2" Goes Here</div>
> <div id="Layer3">Content for id "Layer3" Goes Here</div>
> </div>
>
> and use this CSS -
>
> <style type="text/css">
> 
> </style>
>
> By doing this, and then previewing the page, you will see that the layers
> are precisely positioned EXACTLY as specified. In other words, they are
> offset horizontally by 15 pixels. But it's the vertical positioning that is
> tricky. If there were NO vertical positioning (as you could see by removing
> the top specification from my styles), the three layers would be shown
> SEQUENTIALLY on the page, i.e., subject to normal flow, and since they are
> sequentially listed in the code, they will be sequentially shown on the
> page. But the offsets superimpose them (except that Layer3 is not quite
> there, only being offset -189px).
>
> To really get a feel for this, rearrange the code so that it looks like
> this -
>
> <div id="Layer3">Content for id "Layer3" Goes Here</div>
> <div id="Layer2">Content for id "Layer2" Goes Here</div>
> <div id="Layer1">Content for id "Layer1" Goes Here</div>
>
> And you will now see something completely different! It's the normal flow
> prerequisite that is causing this.
>
> Does that make sense?

Murray *TMM*

2004-02-13, 6:28 pm

sebastien:

> Your suggestion of placing the relative layers within an absolute layer
> seems good

That's not my suggestion, actually. In fact, if you want the orientation of
the relative layers to always be the same, then you'd do it the other way
around - make the outer layer relative, and the three inner layers absolute
(although you could make them relative too, but then code order becomes
important).

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
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
==================

"sebastien brault" <sebnewyork@earthlink.net> wrote in message
news:BC52B1DA.1F86%sebnewyork@earthlink.net...
> Thanks a lot Murray
> I'm going to try your code example and hopefully I'll figure it all out.
> Your suggestion of placing the relative layers within an absolute layer
> seems good, I just hope I'll still be able to keep the whole page layout
> including the 3 layers flexible both vertically and horizontally according
> to the user resizing the browser window (right now all the elements of my
> page are flexible and move both vertically and horizontally if the browser
> window is resized, and I'd like to keep it that way).
>
>
>