Dynamic HTML: positioning

There are two uses for DHTML positioning: absolute and relative. Relative positioning is the same as the current HTML3 layout and is best reserved for situations where you want to be sure that the content will revert to this default inside a document that also uses absolute positioning. The appeal of DHTML centers around absolute positioning, either using fixed pixel positions (but remember that visitors may not use the same screen resolution as you) or fixed percentages of the available area (similar to tables but much easier to code as each div is separate)

The following is taken from files within an old version of the CodeHelp.co.uk site.

<div id="active"
style="position:absolute;top:-400;left:10;visibility:visible">

Text inside this div would be displayed 400 pixels ABOVE the top of the screen. Why? Because this allows a Javascript function to be called during onLoad() - part of the <BODY> tag - that dynamically reduces the top attribute making the content appear to fall from the sky. Note that quotation marks " are not required around the values, everything after the = sign for each attribute in the tag is treated as one quoted element.

Most content on this site uses predefined positions - using the external style sheets. Looking at the HTML, only the class or id are required. The matching class or id definition is then drawn from the linked stylesheet. Modifications to the style can be made by either using a new <style> tag in the head section or by adding the modified or new attribute to the div, span or other tag as needed. Note that by changing the preset style in this way, you could get unexpected changes in this page when you later modify the external stylesheet to match the needs of other pages. Keep it simple and keep it all in the external unless the style is unique to one document



This is part of www.codehelp.co.uk Copyright © 1998-2004 Neil Williams
See the file about.html for copying conditions.