Implementing ZoneZ Part 2 - Z Boxes

This part of the article is going to be dry and boring, as I mentioned earlier, but it is essential to establishing some new concepts in web design. Having said that, we might as well begin:

Position & Size

The position and size of a positioned element, has been traditionally defined by specifying by the coordinates of one corner and length in either x-axis or y-axis. An example of this method would be using "left-width" and "top-height" pairs.

However, it is also possible to define the position and size by specifying the coordinates of its four corners in conjunction with absolute positioning. An example of this alternate method would be using left-right and/or top-bottom pairs.

This method of defining a positioned box is not only possible, but also totally permissible by W3C in CSS 2.1, under:

9.3.1 Position Property
absolute
The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties.
» Reference Date: December 30, 2006 www.w3.org/TR/CSS21/visufx.html#choose-position

I have a sneaking suspicion that the main reason the latter method has not been used is the fact that Internet Explorer up to, and including, Version 6, did not support this, even though all the other browsers did. Or perhaps, it was just simply overlooked, due to the inevitable interference from the Default Scrollbars of the Browers. However, Internet Explorer 7.0 began to support it. Therefore, we can not see any reason why we can not start utilizing this method.

However, perhaps this is the right time to introduce and define a few new concepts and terms....

Dimesioning Methods

Plastic (Direct) Dimensioning:

Specifying the coordinates of one of the pertinent ends - in absolute units (px), in conjunction with the associated length. In this case, one end is fixed in position and the coordinates of the other end is determined by the specified length. An example would be: {position: absolute; left: 200px, width: 400px;} This creates a dimension that will remain fixed - both in position and length, regardless of the variations in the size of the Peep-Hole (aka Screen).

Elastic (Indirect) Dimensioning:

Specifying the coordinates of the two pertinent ends - in absolute units (px). In this case, both ends are fixed in position and the length is calculated based on the specified coordinates of the two ends. An example would be: {position: absolute; left: 200px, right: 250px;} This creates a dimension that will remain the fixed in position, regardless of the size of the Peep-Hole (aka Screen), However, the length will change (i.e. self-adjust), with variations in the size of the Peep-Hole (aka Screen).

Please also note that the same considerations apply to dimensioning in either the x-axis or the y-axis.

Z Boxes

Now, we can go a step further, and expand this concept to a set of two dimensional model, using boxes:

Elastic Box:

A box whose position and size are defined by Elastic (indirect) Dimensioning in both the x-axis and the y-axis. In other words, the coordinates of all four corners have been specified. An example would be: {position: absolute; left: 200px, right: 250px; top:80px; bottom:40px;} This creates a box that will remain the fixed in position, regardless of the size of the Peep-Hole. However, the height and width are elastic, changing with variations in the size of the Peep-Hole.

Elasti-Plastic Box:

A box whose position and size are defined by Elastic (indirect) Dimensioning in one axis only, in conjunction with Plastic (direct) Dimensioning in the other axis. In other words, the coordinates of the pertinent corners have been specified in one axis, and the coordinate of one corner together with its length, in the other axis. An example would be: {position: absolute; left: 200px, right: 250px; top:80px; height:300px;} This creates a box that will remain the fixed in position, regardless of the size of the Peep-Hole. However, it will be plastic in one axis (x) and elastic in the other (y).

Plastic Box:

A box whose position and size are defined by Plastic (direct) Dimensioning in both the x-axis and the y-axis. In other words, the coordinates of only two corners have been specified, together with its height and width. An example would be: {position: absolute; left: 200px, width: 250px; top:80px; height:300px;} This creates a box that will remain the fixed in both position and size, regardless of the size of the Peep-Hole.

Absolute vs Proportional Units

It should be noted that the concepts discussed have been based on the use of absolute units both in positioning and specifying length(s), which is an essential component of formulation of these concepts.

It is very obvious that the Elastic versus Plastic Dimensioning concept will have no relevance and they will collapse, if proportional units (%) are used. For example: {left: 20%; right: 25%} or {left:20%; width: 55%} would give the same results.

Thus, the Elastic and Plastic Dimensioning become one, and the same, if proportional units (%) are used.

Side Comment

As you may see, the concepts behind, and used in, the formulation of the Z Boxes were not just a hypothetical exercise, but were based on a real necessity.

Long standing concept that the only way for a web page lay-out to self-adjust to variations in the size of the Peep-Hole, is by the use of proportional units (%). The only way to freedom from the very constricting confines of this concept, was to step outside the boundaries of conventional wisdom, in search of a creative alternative solution for improved web page layout design techniques.

It took a long time, a lot of hitting my head against the brick walls, and lot of frustration - to say the least. And finally succeeded in formulating the concepts presented here, which represent a far superior alternative to the conventionally preached wisdom (at least in my opinion), The reason I make this statement is rather very simple:

These three box models formulated, abandon the dependence on the proportional units altogether. But still, these three box models can be utilized in different combinations, to create an overall web page layout design that will self-adjust to variations in the size of the Peep-Hole.

What is Next?

If I have not put you to sleep yet, let's start to have some fun and excitement! Please come and enter the new era of web design using the ZoneZ concept, in Part 3 of this article. www.web-zonez.com/revolution/zonez3.html

Feed-back & Comments:: Please send any comments, opinions, and even contributions on this subject, using the Feed-Back Form.
Further Reading:: You can review the list of Related Articles, with brief descriptions and links on the Auxiliary Panel,