|
|
| Introduction to Dynamic HTML 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.
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.
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!
Common STYLE Properties
| 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 visible. 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:
"visibility:inherit;" Block inherits the visibility property of its parent.
"visibility:visible;" Block is visible.
"visibility:hidden;" Block is invisible.
Netscape:
"visibility: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');" | |
| Return to Listing |
|
Website Designers R us is based in Canada with branch office in Los Angeles, California. We are website developer & designer and have already created many ecommerce website design for USA, UK, and European countries. Our website development & creation is based on proper tools and techniques considering search engine optimization of the website.
|
|
|