The Absolutely-Positioned DIV
in Dreamweaver:
"The Ten Layer Laws"
By Murray R. Summers
The term "layer" is generally accepted
to be Dreamweaver-speak for an absolutely positioned <div> tag.
Most of the world of HTML developers may not use this definition,
particularly if they are not using DW. In a more general sense,
though, DW regards ANY absolutely positioned page element as a
'layer', not just <div> tags.
You can insert a layer on your page (using DW) in two ways: a)
using INSERT | Layout Objects > Layer, or b) using the Layer
icon on the Layout toolbar, and 'dragging' the layer on the page.
One advantage of the latter method is that it is never possible
to inadvertantly nest this new layer into some other unintended
page content (which can cause problems).
Code for a layer can come in two distinct 'flavors'. The first
would be how
DW versions prior to DW8 normally writes it - where all the positioning
information is included *within the <div> tag itself. This
is called an inline layer, and it looks something like this:
<div id="Layer1" style="position:absolute;
left:224px; top:97px;
width:254px; z-index:1">Blah</div>
The second would be a fully qualified CSS layer - where all the
positioning
information has been moved from the <div> tag to a linked
or embedded stylesheet (which is how DW8 does it), and it looks
something like this (when you look in the page's code between <body> and </body>):
<div id="Layer1">Blah</div>
and in the asscociated stylesheet, you will see this:
#Layer1 { position:absolute; left:224px; top:97px; width:254px;
z-index:1; }
In the discussion that follows, you will see references to 'inline'
and 'fully qualified' layers, and this will help you understand
that distinction.
Just a note here - you can convert inline layers to CSS qualified
layers and
vice versa quite easily using Jaro von Flocken's excellent Layer2Style
extension (http://www.yaromat.com). Unfortunately, this extension
does not yet work properly on Macintosh platforms with DW.
The Laws:
- Nested, inline layers (i.e., two or more inline layers that
are 'nested' - where one layer's <div> tag appears inside
that of another layer) can be big trouble in Netscape4x (NN4x).
If you want to support this browser, check your page often with
previews. The solution would be to make the inner layers into
fully qualified CSS layers. Other browsers may also have problems
with such 'nests' so preview frequently.
- If you want to support NN4x, it is often helpful to put text
into a table in the layer. The table should be absolutely sized
(in pixels and not %) and no larger than the layer, but nested
tables within the main table can be set to a relative % size.
This will prevent Netscape4x from 'reflowing' the text unexpectedly
after a resize event. Other browsers may also experience problems
with percent width tables in layers.
- Never put layers (or any absolutely positioned elements) directly
into tables. Netscape 4x, and Macintosh browsers will not properly
render layers in tables. If you are having positioning problems
with layers but only in certain browsers, this is the first thing
to look for. The solution would be to move the layer(s)'s code
out of the table, and re-insert it immediately above the end </body> tag
(that's the beauty of an absolutely positioned page element -
its position on the page is not dependent on its position in
the code).
- Do not expect absolutely positioned layers to remain aligned
with either centered tables or centered page content as the browser
window resizes or the resolution changes. The centered content
will move away from the absolutely positioned content, causing
many to think that their layers are moving. This is not the case.
The 'relative' positioning of your page's elements can be easily
controlled with CSS, but that method is not described here.
- If you are having trouble with "Show/Hide"ing layers,
it is often the case that a layer has inadvertantly been given
the same name as some other page element, e.g., an image, or
even some other layer. No two elements on your page should ever
have the same names.
- Applying behaviors directly to the <div> tag of layers
*is* possible, but only if you are willing to sacrifice support
for v4 browsers. If you are not willing to do
this, apply the behaviors to content in the layer (links or images)
rather than to the layer itself.
- Make sure that the layer's width is at least as large as its
contents, otherwise, Mac/IE5 browsers can leave curious 'stuff'
on the screen as you manipulate these undersized layers.
- Don't assign a height to a layer if you are putting text in
it. Let the browser determine the height.
- DO NOT USE LAYERS AS AN EXCLUSIVE PAGE LAYOUT METHOD. If you
do this, you will likely have a badly broken page when someone
resizes the text - to see an example, go to this page:
http://www.great-web-sights.com/g_layer-overlap.asp
- For amplification on these and other suggestions, check this
site -
http://www.projectseven.com/go/13
- Murray Summers
Historical note: Way
back in the day, in the fall of 2000, Murray Summers used to reply
to newsgroup posts with what he called the Four Layer Laws. I posted
them on this web site where I collected useful information about
Dreamweaver for myself and others. In the three years since, laws
have gradually been added and removed, to reach the current count,
and Murray has become a celebrity.
|
