Taking Position

Taking Position

Web pages have been around for some time now.  Buttons, banners, text, audio, video or animated gifs etc are elements that make up the pages.  Presenting these elements in attractive and accessible manner is the intent behind every web page design.  While the end result looks attractive and simple, the reality is that the placement of elements is very complex.   It is an art that has exercised the minds of countless web designers for ages. The Cascading style sheets, the scripting languages and the experimentation with visual formatting models are all outcomes of the efforts of these designers to find solutions to the vexing problem of positioning elements on a web page!   Let us look at a web page and the positioning of elements in some detail…. 

Elements in a Web Page 

The type of web page being designed, determines the elements that will be placed on it. The content owners are the domain experts and they have a role to play in the layout of pages and the elements that are set on the pages. 

Every web site begins with a definition of a goal. This is followed by a task analysis that will define the primary goal and functionality of the site. These functional goals have to be met by the layout and design of the page. Buttons, tabs, text boxes, graphics, navigation bars and other elements should clearly indicate what the purpose of the site is and how the user can access the various elements on the website by clicking on the buttons or using the navigation elements on the page. Web conventions should be followed and taken advantage of.  New elements should clearly indicate the purpose for their existence.  Cluttered websites with flashy banners and multitude of elements tend to confuse the visitor and you may find that he has clicked his way out the moment he has entered the site! A well-structured web page that clearly informs the visitor what he can do will hold the attention of even a casual visitor.  So it is very important to understand your purpose and position your elements appropriately on your web page! 

Conceptualizing Positioning

The W3C published its first working draft on style sheet specifications for positioning HTML elements on the page in three-dimensional space in 1997.  Web designers found that they could use these specifications for greater control over objects on a web page and for designing tight static page layouts or for tracking DHTML motion effects. . Netscape and Microsoft championed the specifications and provided support for some of the positioning properties in their 4.0 version browsers.   CSS level 2 improved upon the specifications in 1998.

Positioning defines the placement of elements on a page. The size and position of the element depends on the type of element, the content of the element and the display context or purpose of the element. By default elements flow one after another linearly, in the order defined in the HTML source.  This default flow does not give the web designer much control over the design of the page. Most web designer resort to the use of CSS or scripting languages to define the attributes of their elements, position them or manipulate them.

The Box Model

At the top level the web page is a canvas—a container for other elements that have to be placed in it.  It can be seen as a box, which has a specific dimension—x and y coordinate and a z-axis that flows away from the viewer into 3D space.  Each element that is placed into the canvas occupies space in the x and y dimensions. These elements can be text, graphics, audio, video or buttons and navigation elements. HTML code generates this box and it is called the element box. 

The visual formatting model of CSS2 views the page as the initial ‘containing block’ or root block.  The position and sizes are to be calculated with reference to the edges of this block.  The width and the height attributes for the root element are specified using the width and height property or defined as auto (in which case the user agent or browser supplies the height and width). This forms the veiwport for the user.  The initial containing block cannot be floated or positioned in any manner.  

Generated boxes are blocks placed within this containing block and can also act as containing blocks for descendent blocks or nested blocks.  Each block is then defined with reference to the containing block.  These block level elements are formatted visually as blocks.  These blocks can be positioned and floated. Any additional boxes generated outside the principal block by the contained blocks are placed in relationship with the principal block.  

Anonymous block boxes are boxes which have another block box inside it(such as those generated by a DIV tag), and it is forced to have only block boxes in it by a process of wrapping any inline boxes into it.  The properties of the anonymous box are inherited from enclosed non-anonymous boxes. 

Inline level elements are content distributed in line.  They participate in a inline formatting context or a compact inline box may occupy a position in the margin of the block box.  Anonymous inline boxes do not contain an inline level element. A run in box is used for run in headers and is a block box.  It becomes an inline box when another block box follows the run in box. 

In CSS 2 the box can be laid out in three positioning schemes.  The normal flow allows block formatting of block boxes and inline formatting of inline boxes.  It permits relative positioning of block or inline boxes and positioning of compact or run-in boxes.   Floats are boxes, which are placed according to normal flow and then shifted to the left or right of the flow, and its content flows along with it. Absolute positioning removes the box from normal flow completely and assigns it a position with reference to the containing block. 

The positioning scheme selected determines the kind of positioning algorithm that needs to be used.  

Understanding and determining Positions

Many web designers are confused about the different positioning schemes that are available.  An understanding of positioning schemes must begin with the concept of normal flow.  This is the default behavior of the web browser.  Each block level element is stacked one after another with inline elements flowing into the available space on the page.

The root element is the html element and the first block in the document.  Other elements can be placed with this root block using any one of the four CSS positioning schemes.  The schemes are Static, absolute, Relative and fixed.  All these positioning schemes have a relationship with the normal flow. 

Normal flow versus Static Positioning

This is a process of placing a box in the normal flow.  It is really a box that is not positioned and is the default position. No declaration with the position property is required for this type of positioning. However, the declaration position: static places the element within the normal flow of the document.  The top and left properties need not be specified in this context and performs the same function as position: relative with no top and left defined.

This seems slightly redundant but if the W3C specs are to be strictly adhered to, it is important to know the different types of position properties that have been created.

Absolute Positioning

Absolute positioning takes its position from the top left hand corner of the browser pane with the x and y coordinates at 0.  This positioning gives the designer tremendous control over the elements so positioned.  The code for an absolutely positioned element can be placed anywhere in the code and still the element will display at the coordinates specified.

Absolute positioning positions the box within the containing block and not the browser itself.  The top, right and bottom properties are specified in different combinations to position the box within the container.

Absolutely positioned boxes are not part of the normal flow and they have no effect on sibling boxes that are positioned using other positioning schemes on the page.

If the width of an absolutely positioned box is not specified, it will move dynamically when the browser is resized.  However, it will retain its positioning.  If you do not want the box to move widths will have to be specified.

Relative Positioning

A relatively positioned element on a web page is not positioned with reference to the containing block but with reference to the normal flow.  Therefore the element disregards its containing block and relates to the browser.  The relative tag helps the designer place the elements with reference to the positioning of other elements on the page.

Fixed Positioning

This type of positioning is similar to the absolute positioning attribute in that it is calculated with reference to its containing blocks and it is pulled out of the normal flow.  However, the reference is in the context of the browser viewport.  The viewport is a fixed block that remains fixed however much the other elements move around it.  When the browser is resized the fixed block will not be resized or moved in any manner.

Fixed positioning was not supported by Internet Explorer 6 and below and could be used only if the web page was being designed for other browsers. Internet Explorer 7 supports fixed positioning.

Positioning Considerations

So what are the things we should take into consideration when we decide to position the elements on our web page?  The layout of the content and the purpose of the document are important.  Do we want the content to use the default flow and reflow when the window is resized?  Then we should be using Relative positioning.   If we want content to reflow when it is resized but to remain fixed otherwise, we should obviously use fixed positioning.  If we want to be sure that the user, whatever he may do, does not disturb our positioning of element, then your choice has to be absolute positioning!  So positioning considerations are determined by the layout of the content and the purpose of the document! 

However, if you wish to take advantage of the properties of Relative positioning and absolute positioning, you could place an absolutely positioned element into a relatively positioned element.  The element will be then centered in a rectangle.  This obviates the necessity of using tables and content can be worked into larger layouts and scripting can be added to each element such that these elements fall into place outside the document when the user loads the page. 

A method often used is to define an outer div and an inner div.  The outer div flows with the contents of the document and the inner dive holds the absolute position when the page is loaded.  The outer div is then modified with a scripting function “doPosition”.  The offsetWidth and offsetHeight properties are manipulated to calculate the new absolute position for the element.    The posLeft or pixelLeft properties can also be used to center the images as they give alternate access to the Left property and lets the user position the element using a floating point number. 

Combining Dynamic Positioning Techniques

The environment of the web is evolving.  Web designers are no longer satisfied with the positioning attributes offered by CSS.  Experimentation with various positioning techniques has led to the development of “Dynamic HTML”.  This is an umbrella term for a large number of techniques that are used to make the web page dynamic. 

The first efforts to change the contents of the page were based on CGI..  This required the server to reconfigure the contents of the page and reserve it to the client.  This was extremely slow and clogged the network traffic and irritated the user.  Dynamic HTML on the other hand performs on the client side.  Changes to the page are instantaneous. Everything can be changed—text, images, tables, content and forms!

The basic technique that is used is that each element of the page is divided into manipulative units and these are exposed to a scripting language such as Javascript.  This made the documents live applications and enabled web designers interact with the elements dynamically and also attribute behaviors to them. 

A problem that most web designers faced was that the scripts were proprietary and would not work uniformly in all browsers.  Efforts to get round this problem, resulted in the emergence of the “Object Model”.  This framework helped organize behavior references and the interaction of elements with each other including the process of referencing elements of a document, the application of styles to elements and the effect of scripts on style changes and so on. 

This experimentation also led to the development of XML –a simplified versions of the Standard Generalized Markup Language(SGML)—and brought about various changes in standards and other proprietary object models for documents based on SGML, XML and DOM.

The concept of layers was evolved and functionalities were defined.  The document was seen as an ordered collection of elements, all the content of the web page and any set of attributes that were defined for each element.   The concept of assigning Ids to elements was conceived along with concepts of parent and child elements.  Child objects were seen to inherit attributes from the parents and could also contain attributes that were unique to them by a process called “overriding”.  Object hierarchies were defined and object oriented methods of handling elements of the web page emerged as a future standard.
 

DOM was seen to provide web designers with a number of advantages.  You can now structure your documents into headings, paragraphs, hypertext links and other component parts and this makes for easy access to them individually.  DOM also provides a language and implementation-neutral interface and can be used in a wide variety of environments and applications.  It is therefore, interoperable and provides HTML and XML support.  The dJava and ECMAScript support offers a consistent programming interface.  The Style sheet support enables the manipulation and changing of Cascading Style Sheets.

The DOM structure resembles a tree with a parent and child node layout and can contain more than one tree.  However, there is no compulsion that the tree structure must be followed.  Any logical hierarchical model can be followed. Navigation between the different nodes or hierarchies can be achieved using the NodeList object from anywhere in the website or page.

The W3C working group has completed the level 1 of DOM in October 1998 and the Level 2 recommendations are underway.  A style sheet object model is included in the level 2 working.

Controlling Content Visibility

Positioning of elements also brings into focus another need of web design—the visibility of the element.  Does the web designer want the element to be visible, partially visible or invisible?   The content of the positioned elements can be restricted in a number of ways. Setting values to the display and visibility attributes of the element can do this. The clip and overflow attributes can be used to define how much of the content will be visible. Overlapping elements can also be used to control the visibility of elements. The z-index ordering technique can be used for this purpose.

Clipping Regions and Overflow

Using the clip attribute sets the clipping region for a positioned element. The rectangle within which the element is displayed is defined by the attribute and any portion that extends beyond the rectangle is clipped. The clipping region has to be carefully defined in a parametric order—top, right, bottom and left). The clipping region can be changed dynamically by referencing the clipping property and resetting its values.

document.all.MyDiv.style.clip = "rect(0 50 75 0)"; 

Overflow happens when the content of the positioned element does not fit into the defined area and overlaps other elements in the page.   The overflow attribute helps hide the overflow or makes visible scrollbars that can be used to access the content that is not visible. The overflow attribute an be reset dynamically by changing the values of the overflow attribute.
 

if (document.all.xDiv.style.overflow != "scroll")

    document.all.xDiv.style.overflow = "scroll";

Z-Index Ordering

When two or more elements occupy the same area some kind of ordering is called for. The Z-Index ordering attribute helps the designer set the order in which the elements should be drawn on the screen.  This attribute is especially useful when there are relatively or absolutely set elements on the page and they overlap other elements.  A positive value in the Z-index causes the element to be stacked on top of other elements and a negative value causes it to be stacked at the bottom.  The element that has been given the highest z-index value is stacked on the top and the one with the lowest is stacked at the bottom.  If two or more elements have the same z index value, the source order is used to determine their position in the stack.

Significantly the elements which are placed below the top positioned element in the stack are not accessible to input devices. However, if the parent is a scrolling container or the parent has been manually positioned, the elements lower down in the stack become accessible to input devices.  The z-index property can be changed dynamically by accessing the z-index attribute of the elements.

 MyImg.style.zIndex = 2;

It must be noted at this point that all elements, which are windowless, participate in the z-order overlapping. Windowed objects like ActiveX controls and iframe do not overlap with other objects and do not participate in the z order.  The select element too is a windowed object in IE 6 and below.  However, in IE 7 the z index property is supported for the select element.

Element Visibility

Your web page may have a number of elements, which have to be hidden unless a specific trigger is fired or an action is performed.  For instance if you have to display a clock on the page at a particular time of the day, the clock will have to remain hidden until the time trigger happens.  Element visibility attribute is also used when carrying out transition effects or making a div element visible or invisible.

<p>A paragraph above the DIV element</p> 

<div id=xDiv style="position:absolute;top:50px;left:50px;height:100px;

    width:100px;visibility:hidden"></div>

<p>A paragraph below the DIV element</p>

Note that accessing the visibility property can help set the visibility of the element. An invisible element can be made visible by adding the following code.

xDiv.style.visibility = "visible";  

Invisible elements continue to impact on the document layout in the background. The invisible element, unlike the display element reserves the place for the element. What has been written so far in this chapter is only the tip of the iceberg. It is intended to inspire you to greater creativity and to convey to you the idea that positioning of elements and the evolution of tools for positioning elements is only limited by your imagination. While a lot of work has already been done in this area and web design has come a long way from simple HTML, it is still evolving and as a web designer you are part of this evolution and perhaps the catalyst of it.