Member Avatar for eeisent

Hi,
Kind of new to the whole dreamweaver thing. I'm creating a website for work and am having issues with everything moving when I view it on a smaller screen in work.
I have everything in a table which I have set to 100% height & width but I've put layers on it with images and text and it's these that move off the page when viewed on a smaller screen.
I tried converting layers to tables but that option is greyed out (I think this is becasue I have both a table and layers on the one page. ) So I tried creating it with just layers but it won't convert them to a table becuase "the file cannot be made compatible with 3.0 browsers because it contains nested layers"
Sorry about the long winded email but if anyone knows a way around this I would very much appreciate it
Thanks
Sue

  • 2 Contributors
  • 1 Reply
  • 198 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by peter_budo

Dani AI

Generated

Mixing Dreamweaver “layers” (which become absolutely positioned DIVs) with a percentage‑wide table is the root cause here. Absolute positioning takes elements out of the normal flow, so they stay at fixed coordinates and won’t reflow when the viewport gets smaller. ’s observation about positioning is correct; that behavior is why elements move off-screen even though the table is 100% wide.

Practical options and tradeoffs:

  • Migrate the layout to normal flow (recommended). Remove absolute positioning from structural elements and rebuild using CSS (floats, or modern flex/grid). Put images and text into cells/columns that use percentages so they resize naturally.
  • Keep a table-based layout but eliminate layered overlays. Move content into table cells and use percentage cell widths; make images scale with the cell.
  • Keep absolute overlays only for decorative elements, not for primary content. If overlays are required, wrap them in a relatively positioned container and use percent widths/positions so they scale with that container (this is less flexible than flow-based layouts).

Helpful CSS examples (keeps images and columns fluid):

.wrapper { width:100%; max-width:980px; margin:0 auto; box-sizing:border-box; }
.col { float:left; width:50%; box-sizing:border-box; }
img { max-width:100%; height:auto; display:block; }

Dreamweaver tips: the “convert” option is often disabled when nested layers or complex absolute positioning exists — inspect Code view for nested <div style="position:absolute"> blocks and flatten or remove those before trying conversion. Replace inline position styles with classes in a stylesheet so changes apply site‑wide and are easier to test. Test at multiple widths (desktop and narrow/mobile) to confirm elements reflow rather than overlap.

Overall: avoid using layers for primary layout. Use them only for small overlays; rebuild structure with flowing CSS or table cells for predictable resizing.

Member Avatar for peter_budo

Hi,
I have everything in a table which I have set to 100% height & width but I've put layers on it with images and text and it's these that move off the page when viewed on a smaller screen.

Hi Sue
I do not have to much experience with dreamweaver but to my knowledge( what I was told) layer are basicly use of position in CSS. Where you give them exact possition on the screen. Ussual problem with this is screen ofset. Like you sed on small screen somethinkg moved from view.
You have only two options in my opinion:
1. To put everything in table with coloms preformated if image to be use, and leave it for browser automaticali to adjust it.
Bigger screen more text next to image or smaller screen less text next to image and page longer
2. Create all layers on smaller screen and have your site displayed like my uni
Everything nicely lay out and adjusted to left top corner

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.