bottom: 0px; right; 0px;No more tables! The W3C would like us to be doing layout using CSS positioning (sometimes referred to as CSS-P). We'll explore what all you can do with CSS layer positioning using this "fish stories" example file.
We previously saw how to create layers in DreamWeaver. The layer itself, in the <body> might look like this:
<div id="theFish" >
<img src="fishl.gif" alt="fish cartoon" width="188" height="126"/>
</div>
The style rules for an absolutely positioned layer look like this:
#theFish {
position:absolute;
left:176px; top:29px;
width: 200px; height: 150px;
z-index:1;
}
position
position: absolute indicates that the position of
this box will
be specified as an offset from the browser window. Where the div occurs in your
HTML source code no longer matters (much).
left,top,bottom,right
Use a pair of these to specify offsets from whichever corner of the browser window
you wish. Examples:
bottom: 0px; right; 0px;
top:
0px; right; 20px;
top:
40px; left; 20px;
z-index
Determines the "stacking order" of layers. A layer with a high z-index
stacks above a lower-numbered layer. Negative values are not allowed.
width, height
DreamWeaver will try to give your layers both a height and
a width. This is a
fine thing for graphics, or anything with a fixed size in pixels. But users can
select the size of text, and this can cause the text to 'escape' from your fixed-size
layers.
Just
don't set a height, and the browser will figure out the height that your box
has to be to accomodate the content of your layer.
overflow
The only problem with not setting the height, is if the layer might grow to be
high enough to run into something else (say another layer) that you don't want
it to.
One possible solution is to return to using fixed height and
width, but using the overflow: auto rule which tells the browser
to display a scrollbar if the contents of a layer would take up more area than
you've allocated to it. That is,
with style rules like...
width: 200px; height: 150px; overflow: auto;
Of course, the biggest win when using DW for absolute layout is that ability to use the mouse to quickly drag the layers around and re-size the layers.
It's also useful to be able to align, say, the tops of two different layers to be at the same height. You, could simply edit the top offset for both layers to be the same. But DW makes it easier by letting you: