Implementing ZoneZ Part 1 - A Baby Step

Our quiet revolution stripped the privileged ones (i.e. the html and body elements) from their Browser given privileges and pacified them totally. This resulted in handing over the total control of the screen to a common div, #zpad. www.web-zonez.com/revolution/viva.html

Now, can go one step further and add plurality to the above scenario, simply by dividing the screen by utilizing multiple div's, using proportional units in dimensioning (namely %). These div's can be arranged by using different techniques, including float, relative and/or absolute positioning.

A very simple illustration would a two column page lay-out, with a left frame which 25% in width and 100% in height, and a right frame which is 75% in width and 100% in height:

Using frames, we would achieve this by specifying:

Now, we can mimic this by using two div's:

#left
{width: 25%, height; 100%; float: left; overflow: auto;}
#right
{width: 75%, height; 100%; float: left; overflow: auto;}

Please note that the above two-div layout is just a simple illustration. Theoretically, there is no limit as to the number of div's used, as long as the overall total of all heights and widths equal 100%.

However, this is still a very crude model and just a very rudimentary substitute for frames, as far as screen layout function is concerned. Furthermore, it is subject to all the fundamental limitation of using proportional units (%) in page layout. Each div will shrink and expand individually and collectively, with the variations in the overall size of the Peep-Hole (aka Screen).

Why do I say this? Let me try to explain by going back to frames again. If you remember, we could specify the same two-column design by something like:

This would fix the width of the left column at 200px, regardless of the size of the Peep-Hole (aka Screen). However, the variations in the width of the Peep-Hole will be accommodated by the variations in the width of the right column.

Even with this crude model, it is obvious that we are not there yet, but we are definitely on the right path.

What is Next?

However, in order to be able to formulate such a flexible system of screen control, we will need new innovative (and, perhaps, imaginative) concepts and/or techniques, starting with Z Boxes, in Part 2 of this article. Be forewarned that you may find it a rather dry and boring process. www.web-zonez.com/revolution/zonez/zonez2.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,

Implementing ZoneZ Part 1 - A Baby Step

What is Next?

Imagination + Vision creates KNOWLEDGE!