Member Avatar for blackbelt27

Whats the best way to layer a web page... details would be nice... and i have dreamweaver cs4 so diredtions within that would be nice...

  • 3 Contributors
  • 2 Replies
  • 113 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

For : layering is a tool, not a layout strategy. Use layers for overlays, modals, tooltips and visual accents — keep the main page in normal flow (semantic HTML + CSS). That avoids brittle layouts and improves responsiveness and accessibility. is right that layering is situational; is right that you should not force everything into stacked elements.

Example pattern (common, robust):

<div class="card">
  <img src="photo.jpg" alt="...">
  <div class="overlay">Caption or controls</div>
</div>

.card { position: relative; }
.card .overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10;
  background: rgba(0,0,0,0.4);
}

Use a positioned parent (position: relative) and absolutely positioned children for overlays. For full-screen modals use a fixed-position backdrop plus a centered dialog. Avoid arbitrarily high z-index values — create local stacking contexts when needed.

Read the browser behavior basics before you pile on z-index. z-index only affects positioned elements (and Flex/Grid items in modern layouts); stacking contexts can be created by transforms, opacity, etc., which changes how layers interact. See MDN for accurate details: z-index and Understanding z-index and stacking contexts.

Dreamweaver CS4 notes: the AP Div tool is useful for quick visual placement but tends to generate inline styles. Use it for prototyping only. Move rules into an external stylesheet and give elements classes/IDs you control via the CSS Styles or Code view. Finally, test layering for keyboard focus, screen readers (use ARIA roles and manage focus for modals), and across viewports; debug stacking with browser DevTools and keep a small, documented z-index scheme to avoid surprises.

Recommended Answers

All 2 Replies

Member Avatar for almostbob

This is a difficult question
the value/effect of layers depend entirely on what you want of your web page, and what you have to display
so you decide the best way
the is a start
layers work only of fixed objects
its one way of fitting more than a screen full of information without scrolling.
a top layer of 1pxtransparent.gif makes it harder to right click copy your images, they can copy but they get the upper layer
layers of images can be used to highlight important sections onclick or onmouseover.
with transparency, show/hide, move to front, send to
back.
its a tool
Flash-like effects without the overhead

I know not much use on the nuts n bolts of it
:{

Member Avatar for MidiMagic

The best solution is to NOT layer. Browsers are really designed for items to be contained within other items, not on top of each other.

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.