How do I lock a layer in place?

I am trying to get a top layer to stay in position above the layer below it. When I resize the window in the browser it floats all around. How do I get it to stay in the same place relative to the rest of the design? Here it is:
<http://www.martyrobertsproductions.com/scf/index.html>

Thank you for any help - this is driving me crazy!

The main part of the design is centred on the page, so it will move when you resize the page. That rogue element is positioned to hug the right-hand edge, so it won't. You need some kind of container or wrapper around the entire design if you want it to all shift together.

This will work to keep your layers in tow -

Change this -

</head>

to this -

<style type="text/css">
#wrapper { width:760px; margin:0 auto;position:relative; }
/* 760px will display on an 800px screen maximized browser window without */
/* horizontal scrollbars. */
</style>
</head>

change this -

<body ...>
(the ellipsis represents any other attributes that might be mentioned in the
body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!)

to this -

<body ...>
<div id="wrapper">

and this -

</body>

to this -


</div>
</body>

and see if that helps.

--
Murray

Thanks Murray,
I tried that but now that box is in the wrong place - even though it looks like it is in the right place in GoLive - can you tell me how to get it back to the right position - to the right end of the banner?
Marty

Never mind - I played with the layer positioning and I think I got it - Thanks! Is it possible to explain in general terms what you did so I can do it again? Is there a GoLive course of actino so I don't need to code it?
Thanks!
Marty

I *think* the problem is with using Golive's proprietary 'layer'. The css for that always, always gets written into the page. I *think* it overrides your css positioning, such that a 'layer' is always absolutely positioned relative to the top left of the page. That's the only instance you have of a 'layer' on your page.

Did you use a 'floating box'? I've always steered clear of them. I've got a nice little empty div in my toolbox, can't remember where I got it, much more useful and less wayward.

I used a layer with the layer tool - is that different from a floating box? I think I need to go to Lynda.com and watch the movies on layers.
Thanks for the help, I am set for now!
Marty

Here's the deal. This is in HTML-speak, not GoLive-speak. It's good to
understand the non-filtered meaning of these things.

"Layer" is just a nick-name for an absolutely positioned container that
happens to be a <div> tag. In fact, anything on your page *can* be
absolutely positioned - it doesn't have to be a <div> tag, and it doesn't
even have to be a container (for example, an image or even a horizontal
rule - <hr> - can be absolutely positioned).

When something is absolutely positioned, several things happen to it:

1. It is removed from the normal flow. This means that the page suddenly
forgets that the absolutely positioned element is even there, and is
rendered as if that element were not even in the code. This prevents an
absolutely positioned element from interacting with anything else on the
page, meaning that it cannot push something else out of the way.

2. Then, after all that happens, the absolutely positioned element is
located on the page based on its top/right/bottom/left coordinate values.
You would think that if the left coordinate for an absolutely positioned
element were 100px, that this would refer to the left margin of the page and
in some cases it does, but not in all cases. The reality of positioning is
much more complex than this. The offsets given to an absolutely positioned
element are calculated from the location of that element's nearest
positioned ancestor. You can see what I mean by following this.

Create a blank page. On it, place two layers. Make them both 100px tall
and wide, and 100px left. Make one 100px top, and the other 200px top.
You will now see two boxes on the page one immediately above the other. Now
grab the bottom layer, and drag and drop it WITHIN the top layer (you will
have to do this in the code). Where do you now see the second layer?

It's now 200px below the top margin and 100px to the right of the left
margin of the PARENT LAYER (if you did things correctly). But the CSS that
locates this second layer has not changed. It's still 100px left, and 200px
top. What has changed for this second layer is its zero coordinate
reference point. It's now being placed in the rendered page based on the
location of its closest (in the code) positioned ancestor (the first layer).

That's the concept. So how come, when there is NO closest positioned
ancestor, the top/right/bottom/left locations are calculated from the
browser's margins? That's the way it works - when there is no positioned
ancestor, the <body> tag becomes the zero reference, i.e., the upper,
left-hand corner of the browser viewport.

You are half way there. The next concept we need to explore is another kind
of positioning - relative positioning. In a curiously redundant way, a
relatively positioned element has these properties -

1. It is NOT removed from the normal flow. In other words, the page
doesn't forget about it, and it can push other things around, or be pushed
around by other things.
2. It can be offset (using those same top/right/bottom/left values) from
its base location.
3. BUT when offset, the page still thinks it's where it started, not where
it winds up.

Now these last two things sound pretty goofy, and they are. To understand
the centering thing, though, you don't need to worry about them. The
important thing is that a relatively positioned element is not removed from
the normal flow.

The final concept you need is much simpler. Any block tag can be centered
within its container by giving it an explicit width, and then setting
left/right margins to 'auto'. Thus -

1. The browser know the element's width.
2. The browser knows the width of the element's container (whether it be
the whole page, or a table cell).
3. With auto left/right margins, the browser subtracts the element's width
from the container's width, and places half of the remainder on the left and
the right. Bada bing - it's centered.

Now for the big finish.

Since a relatively positioned element is not removed from the flow, it can
be centered. Since it's relatively positioned, any internal absolutely
positioned elements will use its location on the screen as a zero point
reference. Thus as this 'nearest positioned ancestor' to those interior
absolutely positioned elements moves to its center point, the absolutely
positioned elements are dragged along for the ride.

Get it?

--
Murray

Yes, thank you, although it always helps to re-read your lucid explanations.

But, Golive has some weird entity, which I thought was called a floating box, maybe a 'layer', which will not remain in an external css. It *always* gets rewritten into every page where it's used and try as people might to have it take its reference point from a containing element, it somehow jumps back to referring to the top left of the page.

I haven't used this odd beast, but I've seen many, many references to it in these forums and I thought it was in the OP's page before the reference to an external css.

We need Nate

He knows as much as you *plus* understanding GL's quirks inside out.

(Saving your screed for further perusal though, thanks again).

Oh, and doesn't IE get auto-margins wrong, that's why you also have to use text-centering for it? I always use both auto margins and text-centering on a wrapper, then set the text back to left within it, for that reason.

How do I lock a layer in place? - Adobe Tools

How do I lock a layer in place?

LinkBack

Thread Tools

How do I lock a layer in place?

Re: How do I lock a layer in place?

Re: How do I lock a layer in place?

Re: How do I lock a layer in place?

Re: How do I lock a layer in place?

Re: How do I lock a layer in place?

Re: How do I lock a layer in place?

Re: How do I lock a layer in place?

Re: How do I lock a layer in place?

Re: How do I lock a layer in place?