Layers and Positioning of Elements

Layers and Positioning of Elements

A layer is a type of container.  It can hold text, images, tables and other layers. While layers are extremely difficult to hardcode and a number of browsers do not support layers, they can be used to an advantage for obtaining text and image effects and for the creation of web sites that are creative.  The web designer can also have immense versatility in the positioning of elements on a page.  A number of software, like Dreamweaver have provided designers with tools for creation of layers with ease. 

Using Layers to Position Elements.

Coordinates and positioning are two important attributes of the layer that have to be considered the moment the web designer works on his composition.   The coordinate system x/y begins with the top right corner of the page.  Layers can be stacked or overlapped in the order supplied by the third coordinate called the z-index, which is used by the web browser to determine the topmost layer of the stack.  Positioning of elements on a layer is similar to positioning of elements on the web page—static, relative and absolute. Static positions, as we have already stated, treat the image or text like a block in the normal flow.  Relative positioning places the element with reference to the top left corner of the document.  Absolute positioning takes the layer and the elements on it away from the normal flow and places them in coordinates of their own.  They are not affected by the contents of the page.

Attributes and Positions

An HTML attribute or a style property is called a parameter in web design parlance.  For instance, the ID parameter means either an ID attribute that can used with the <LAYER> tag or the ID Style property.  However, property means Style property. 

The <LAYER> tag takes on pixels as the unit of measurement for attributes that specify the distance.  Style properties are generally numerical values.

The Position property only applies to layers that have been defined as styles and its value can be absolute or relative.

ID is an identity for the layer and must begin with an alphabet.  The ID can be used to refer to the layer in the code.  This is an optional attribute.

The Left and Top parameters are used to specify the horizontal and vertical positions of the top-left corner of the containing layer or page.  The value has to be an integer.

PageX and PageY properties are sometimes used to specify the horizontal and vertical positions in pixels of the top left corner of the layer relative to the enclosing document if there is no equivalent style property specified with the <layer> tag. 

The SRC and Source –include style attribute are used to specify the HTML document that needs to be displayed in a specific layer.  This source file can include JavaScript code and all layers in the source file will be treated as child layers.  This technique is useful if the content has to be dynamically changed constantly.

The chef doesn't have to rewrite the entire page just to update the information about the special of the day.

The Width parameter is used when the layer’s contents have to warp to fit within the layer. An integer value is normally used but percentages can also be ascribed. However if the layer contain images which cannot be warped the layer will ignore the width property and expand automatically to accommodate the width of the image.  By default it will warp at the right boundary of the containing layer.

The height parameter defines the initial height of the clipping region of the layer.  This is expressed as an integer value or a percentage of the height of the containing layer. Like the width property, the height will also expand to accommodate elements which cannot be warped. By default the height is the minimum height for all the contents of the layer.

The Clip property defines the clipping rectangle—that is the visible boundaries of the layer. It takes the top, left, right and bottom values as pixels.  The left and right values are pixels with reference to the left edge of the rectangle and the top and bottom are defined with reference to the top edge of the layer itself.  If the right and bottom values are specified the other two values will default to zero. If no value is specified, the values of the width and height will be determined by the contents of the layer.

Z-Index, above and below are three attributes used by the <LAYER> tag for defining the stacking order of the layers.  Values specified in these attributes will override default values.  The topmost layer will have the highest z-index value. The Above attribute refers to the layer above the referenced layer and the below attribute refers to the layer immediately below the referenced layer.  All nested layers are stacked above the parent layer. 

The visibility attribute will determine the visibility or invisibility of the layer. Pop up menus are examples of setting visibility attributes to layers.  All submenus are created as invisible layers and they pop up on mouse-over events. HIDE hides the layer and INHERIT causes the layer to have the same visibility as the parent layer. This is also the default value. A layer with a visibility set to show may not be visible if there are other layers with the visibility set to show above it. 

By default layers are transparent. The BG-Color and Background-color can be specified to define the color of the layer.   The Background color will be applied to the rectangular region occupied by the layer. If a border is defined in the Style the region will be enclosed with a border in the color specified for the border.  

The Background and Background-image style properties assign a tiled image across the background of the layer. The value specified is the URL of the image.  

OnMouseOver and OnMouseOut, OnFocus, OnLoad, event handlers are functions or inline JavaScript code that can be invoked to make visible or invisible layers. 

Finally the NoLayer tag displays the content as if was not positioned at all.  If layers functionality is required, it will generate JavaScript errors. 

Layers can contain applets and plugins which are special windowed elements that float on top of all layers—even when the containing layer is not visible.  If these elements are moved to the edge of the containing layer they will disappear completely or partially(as in the case of form elements). 

Examples of Layer Positions

Relative Positioning and Layers:

Relatively positioned layers form part of the normal flow of the web page.  These are also known as Inflow layers.  These layers occupy space in the document flow and share line space with other elements of the web page.   The left and top attributes or properties can be set to specify the offset of the layer’s top-left corner from the current position of the document. The <ILAYER></ILAYER> tag is used while specifying an inflow layer.

<ILAYER ID=layer2>
 <P>Sample content for relatively positioned layer</P>
</ILAYER>
<STYLE type="text/css">
<!--
#layer2 {position:relative; }
-->
</STYLE>

In the following code relative position has been used to determine the positioning of layers:
<html>
<body>

Sample ON TOP:

<div style="position:relative; font-size:50px; z-index:2;">Sample</div>

<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">Sampleagain</div>
Sampleagain ON TOP:<div style="position:relative; font-size:50px; z-index:3;">Sample </div>

<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4">Sampleagain</div>

</body>

</html>

The web page will look as under:

Absolute Positioning and Layers: 

Absolutely positioned layers can be defined with reference to its coordinates within its containing layer. The top, left corner of the layer can be set using the left and top attributes or properties. However, if these attributes are not set they will default to the top and left of the containing layer automatically.

The absolutely positioned layer will not occupy space in the normal flow and will have no impact on the other elements on the page within the normal flow.  The other elements on the page too will not make space for the absolutely positioned element in the normal flow.

An absolutely positioned layer is created using the <LAYER> </LAYER> tag. If the layer has been defined as a style the layer will have to be created as under:

<LAYER ID=layer1 TOP=200 LEFT=260>
 <P>Sample layer content</P>
</LAYER>
<STYLE type="text/css">
<!--
#layer1 {position:absolute; top:200px; left:260px;}
-->
</STYLE>

If the position is defined as Absolute in the example given for relative positioning, the web page will appear as under:

Note that the top layer has been defined using the z-index attribute in both instances cited above.
 
Layers can be positioned relatively absolute or absolutely relative. In other words the position of the layer can be calculated with reference to the upper left corner (the absolute) or from the position of the layer within which the layer has been placed(relative). 

Negative and positive values are acceptable while positioning layers. The positions can also be changed dynamically using JavaScript.  This opens up immense possibilities.  Whole games can be designed using layers with coordinates and positions defined. Or layers of pages can be created in a stack and clicking on a link can move the specified layer to the top.  

Layer problems

The most irritating problem about absolutely positioned layers is overlapping text. The moment a user resizes his text, all the beautiful layering done by the web designer takes a toss!  The text begins to overlap. While Gecko browsers will allow the text to overflow, IE will expand the layers and overlap the borders of the layers too! The second layer will not move down to accommodate the first one as both are absolutely positioned and are not affected by the changes in the position of other elements! 

Another common problem with layers is that they will not stay put where the designer intended them to stay!  If the layer is designed to be 800 pixel wide and the user has a screen that is 1024 pixel wide the layer will appear to jump a little to the left. While the actual layer has not moved a single pixel, it appears to move because it is absolutely positioned!  In reality it is the table that has moved to the right to remain perfectly centered on the page. Since we do not have control over the user’s resolutions, it may be a good idea not to use absolute positioning? Maybe static positioning would server your ends better? Or maybe you could try setting margin and padding properties to resolve the issue?  

In a sense setting the Margin and padding would solve the problem.  Well ….Almost. The <div> containing the first layer will expand to accommodate the text if the font size is changed and the second layer will move to accommodate the changes in the first layer—rendering the layers correctly. The padding will take care of the space around the border and ensure that the text does not stick to the borders.  A wrapper <div> can be used to enable the text to retain its positions relative to each other and the wrapper can be centered while the text remains at a specified position from the left of the browser viewport. 

Once all the above has been taken care of the designer will still have to deal with Browser bugs.  Width is part of the content area. Any margin and padding added is included in the width in the determination of the area occupied by the element.  Old Browsers do not recognize the box model which describes the width.  Internet Explorer will calculate the width property and subtract the padding and borders before rendering the page. Well, you can imagine what will happen to all the positioning you have done when IE renders the page!

To accommodate this bug in IE it has been suggested that web designers should ensure that the browser renders the page in Standards mode rather than in the quirks mode by including a Doctype in the page.  The designer will also have to take care of the problems of IE 5x.  A number of CSS hacks exist that can filter styles. These can be used or you could use a specific type of code that is called conditional comment.  A code like the one under will be offered to IE 5x.

   <!--[if IE 5]>
   <style type="text/css">
   #smpl1, #smpl2{width: 200px;}
   </style>
   <![endif]-->

This code can be placed in <head> of the document after other styles or link to an external style sheet.  While IE 5x will act on it, other Browsers will ignore it.

Stacking layers