An Introduction to Dynamic HTML (DHTML)

By Aaron Weiss

Hitting the Spot

Typically, a block of content is contained within <DIV> tags. Imagine, then, that you would like to create a small block of content -- an image plus a mailto hyperlink:

To position this block, however, you must tell the <DIV> block to use a style sheet. A style sheet, as you may know, defines display characteristics. Style sheets can either be pre-defined, and applied to tags as style sheet classes, or defined on-the-fly. Typically, when using CSS Positioning, you define the block's style on-the-fly. We do this by using the STYLE attribute for the <DIV> tag. The STYLE attribute contains a string which lists each desired style property and its value. For example:

In the above example, we've first added the ID attribute to assign an identifier to this content block. This may become useful later when manipulating this block using JavaScript. Next, the STYLE attribute contains a list of property parameters and values. Notice that a colon separates the parameter (left) from the value (right) and a semicolon separates each parameter/value pair from the next. In this case, we've specified that mailblock should be absolutely positioned on the page (meaning that it is not fixed relative to the position of any other page elements), with automatic width and height, 400 pixels right from the left edge of the browser's content window and 50 pixels down from the top edge of the browser's content window.

Simple enough -- except for one bit of trouble: we don't know the size of the user's screen or browser window! Thus, we don't really know where 400 pixels to the right will land this block relative to the rest of the page. This could result in an ugly layout. The solution to precise, but adaptable, layouts is to use relative positioning. Imagine, for example, that we want mailblock to appear slightly indented leftwards from the upper-right corner of the page. To achieve this position, we will create a two-level <DIV> block -- a parent and a child:

In this example, the parent <DIV> block contains, as a child <DIV> block, the content for the mailto link and image. The parent block is aligned to the right edge of the page. The child block, which contains the actual content, is dynamically positioned relative to the parent, 10 pixels to the left of the parent's left edge.

Properties of STYLE

Clearly, positioning your block of content depends upon the specified STYLE properties. We seemed to pull our example properties out of a hat -- position, width, left? Where did we get these from? Well, several documents on Web contain references to the positioning properties available for style sheets -- two worth reviewing are Microsoft's CSS Attributes Reference (under "Positioning Properties") and Netscape's Defining Positioned Blocks of HTML Content.

Below we've included a handy chart summarizing the common STYLE properties which you may want to use when using the CSS syntax to position blocks of content.

position Specifies how the block should be positioned on the page with respect to other page elements. Possible values:

"position:absolute;" Block is positioned absolutely within the browser window, relative to <BODY> block.
"position:relative;" Block is positioned relative to its parent block, if any, or else normal flow of page.
"position:static;" Block is positioned according to standard HTML layout rules -- follows flow of document. (MSIE 4+ only; Netscape 5)

width Specifies the width at which the block's contents should wrap. You may specify width in measured units (50px), as a percentage of the parent block's width (50%), or auto which wraps the block according to its parent's width.

Examples: "width:50px;" or "width:50%;"

height Specifies the height of the block, measured in units (50px), percentage of the parent block's height (50%), or auto. Note that the height of the block will be forced to the minimum necessary to display its contents; however, you can make the block taller than necessary.

Examples: "height:50px;" or "height:50%;"

left Specifies the offset of the left edge of the block in accordance with the position attribute. Positive measures (5px) are offset towards the right while negative measures (-5px) are offset towards the left.

Examples: "left:5px;" or "left:-5px;"

top Specified the offset from the top edge of the block in accordance with the position attribute. Positive measures (5px) are offset towards the bottom of the page while negative measures (-5px) are offset towards the top of the page.

Examples: "top:10px;" or "top:-10px;"

clip Specifies a rectangular portion of the block which is visible. Typically, you use the clip property if you want to show only a portion of the block, therefore hiding a portion. Syntax:

MSIE: clip:rect(top right bottom left)
Example: "clip:rect(0px 30px 50px 0px);"

Netscape: clip:rect(left,top,right,bottom)
Example: "clip:rect(0,0,30,50);"

Notice that the syntaxes vary between browsers, both in the need to specify measurement units (MSIE) and the order of the parameters.

visibility Specifies whether a block should be visibile. If not visible, the block will not appear on the page, although you can make it visible later using JavaScript. The possible values for this property again vary between browsers.

MSIE:
"visbility:inherit;" Block inherits the visibility property of its parent.
"visibility:visible;" Block is visible.
"visibility:hidden;" Block is invisible.

Netscape:
"visbility:inherit;" Block inherits the visibility property of its parent.
"visibility:show;" Block is visible.
"visibility:hide;" Block is invisible.

z-index Specifies the "stacking order" of blocks, should they happen to overlap other positioned blocks. A block is assigned a z-index, which is any integer. When blocks overlap, that which has the greater positive z-index appears above a block with a lower z-index. Blocks with an equal z-index value are stacked according to the order in which they appear in the source code (bottom-to-top: first block defined appears on bottom, last block defined appears on top).

Example: "z-index:3;"

background-color Specifies the background color for the block.

Examples: "background-color:green;" or "background-color:FF8F00;"

background-image Specifies a background image for the block.

Example: "background-image:url('images/tilewood.jpg');"

Employing the various STYLE properties gives you powerful control over the position and look of the blocks of content on your page. Conceptually, then, when we think in DHTML we think of a page as made up of one or more blocks. Of course, this is not immediately evident to the viewer, who essentially sees a flat Web page, without realizing that several smaller blocks of content are positioned here and there to create the overall effect.

Still, the question begs: how is this dynamic? Precise, yes, but dynamic?

Consider the fact that, now that the blocks have been put into place, you can -- at any time -- change their properties. Position, background, clipping region, z-index -- it's all plastic, with the help of JavaScript, and that is the reason to be excited!

Putting the D in DHTML>

< Standards, Curriculum, & Dynamic Positioning