Member Avatar for maurellis

When I design a page with Layers it looks fine, however, once it gets onto the server the layers wander all over the place. They are never in the same place twice. How can I stop them from wandering.
maurellis

  • 2 Contributors
  • 4 Replies
  • 110 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by maurellis

Dani AI

Generated

Quick diagnosis and a reliable way forward (building on 's observations):

The wandering is almost always about what each positioned element is anchored to and how the rest of the page is allowed to flow. Absolute-positioned elements take their reference from the nearest ancestor that itself has a position other than static; if that ancestor changes size (percentage table, different DOCTYPE/quirks mode, missing markup), the positioned pieces will end up somewhere else. Dreamweaver's "layers" often generate inline absolute positioning, which is fragile when mixed with fluid tables.

Practical checklist to stop the wandering and make the layout predictable:

  • Validate the HTML/CSS with the W3C validator to catch unclosed tags that break layout: https://validator.w3.org/
  • Anchor positioned elements to an explicit container. Make a fixed-width wrapper (or a controlled responsive container), give it position: relative, and place the layer elements inside so their coordinates stay tied to that container.
  • Inspect the live page with browser DevTools (Elements / Computed) to see the element's containing block and computed position. That shows exactly what the browser is using as the reference.
  • Force a fresh stylesheet load (disable cache or append a query string) to ensure the server copy matches your local copy.
  • Consider replacing layout layers with modern, robust CSS layout (flexbox/grid) or move small floating blocks into table cells if you must keep table-based layout.

Example pattern (anchor + children):

.wrapper {
  position: relative;
  width: 960px; /* choose a stable width that matches your design */
  margin: 0 auto;
}

.layer {
  position: absolute;
  top: 40px;  /* coordinates are relative to .wrapper now */
  right: 20px;
}

For background reading on how position and containing blocks work, see the MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/position and https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block.

Recommended Answers

All 4 Replies

Member Avatar for mellamokb

Please explain in more detail:

When I design a page with Layers it looks fine,

You are creating an HTML web-page using div's. Correct?

however, once it gets onto the server

How does it "get onto the server"? When you copy and paste the page from your workstation to the server? When you "publish" the file to a remote server by FTP? When you view the page in a browser?

the layers wander all over the place.

How do they "wander all over the place"? Give examples. Show pictures. Explain their movement, with words like "left" and "right", or "shifts above" or "shifts below."

They are never in the same place twice. How can I stop them from wandering.

Please provide an example, either some HTML, or a link to a webpage that shows what you have and what you wanted (perhaps as a printscreen since the page obviously isn't doing what you want it to). If you specify in the style the location and size of a div, the div should be wandering anywhere.

~ mellamokb

Member Avatar for maurellis

If you have a look at www.chordmusic.net/layers.htm you will see what I mean. The layers have moved themselves from below the keyboard to above it and they are not now spaced equally on both sides. I don't know what you mean by Div's. I am using DWMX2004 to upload the pages and it seems to work fine for all other uploads.
maurellis

Member Avatar for mellamokb

Gotcha. Thanks for the site link.

When I say "div," I'm referring to the actual HTML that makes up the so-called "Layers," because I didn't know if you were familiar with HTML or what program you were using. Your Layers seemed to be positioned "absolutely", meaning that their location is determined by their coordinates with respect to the top-left corner of the screen.

I'm not sure how to do this in Dreamweaver, but you want to have your Layers positioned "relatively," and they should be located a percentage of the distance across with respect to the width of the table cell they are in. The problem with the Layers as they are, if I resize my browser, the layers don't move, but the rest of the page scales to the size I resize, and then your two Layer's are really far from where they should be, because the table is sized with a percentage (100%). You can accomplish this by directly setting their properties as follows:

Layer 1:
margin-left: -50% (yes, that's a negative sign)
left: 20%;
top: 550px;

Layer 2:
margin-left: -50%
left: 80%;
top: 550px;

However, as you resize the page, the layers stay the same size and will eventually come over the top of the content at the same level when the browser is resized small enough. I would recommend making your main table to actually have its width specified, say 1000px, for a size that most people will see fully in their browser and you don't have to worry about scaling issues. For this case, you would want the following properties set directly on your Layers:

Layer 1:
margin-left: 0
left: 100px;
top: 550px;

Layer 2:
margin-left: 0
left: 700px;
top: 550px;

Another approach would be to split your table into three columns, and then for all the rows, merge the three columns together into a single column, except for where you have the silver pdf download. Then put your information that you want to appear on the left side of the pdf link in the first column, and the information that you want to appear on the right side of the pdf link in the second column. But this would only work for that specific situation, and as you try to setup your page layout more complicated, it may not work just to position everything in the table.

~ mellamokb

Member Avatar for maurellis

Thanks for all that info. I will study it carefully and see if I can maske sense of it. I stopped using layers a long time ago because of this propblem and stuck to tables. I discovered that there is no point in having layers inside tables as this kind of defeated the object of the exercise.I probably will have to read more docs about dreamweaver. The problem is that authors usually onlly write for themselves and other techy people. Still, I'll give it a go.
Thanks,
maurice

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.