Paul's Web Design Pages issue 135 (January 98)

Dynamic HTML Part 2

More on DHTML for Internet Explorer 4.0 - this month, absolute and relative positioning.


This month in my Publish and Be... Web authoring series, I've continued looking at Microsoft's version of Dynamic HTML, which lets you treat all the elements on a Web page (images, text etc) as programmable objects.

One of DHTML's most important features is its ability to place objects (such as pictures and text blocks) at precise on-screen positions , and I've looked closely at the various options. These include 3D layering, which lets you stack objects on top of each other, as you would in a drawing program or DTP package. In true Microsoft fashion it can all get a bit mind-bending at times, but I hope the article and these example pages help to make it clearer!

Below are are links to this month's example Web pages. These pages will only work properly with Internet Explorer 4.0, although I haven't put a version-checking routine in to stop other browsers opening them (that comes in next month's Publish and Be...!). Note how the various effects, such as successive text 'pages' and pop-up graphics, happen without your browser going back to the server to reload the page. After viewing each page, use your browser's Back button to return to this menu.

Relative positioning what it means when you position an object in 'relative mode'

Absolute positioning what's the difference from relative positioning? Do I need it?

Get Moving! Moving an object around the page.

Graphic backrounds using absolute and 3D positioning to put text on a DTP-style tinted panel - plus a warning about using WYSIWYG authoring tools with your DHTML files.

Best of both worlds using a mixture of relative and absolute positioning to give a floating image a pop-up caption.

.left, .posLeft or pixelLeft? - that positioning minefield explained!

The turn of the page - how to create CDROM-style turnable text 'pages'.

An absolute riot - turnable pages, pop-up descriptions and a layered transparent GIF, all linked together.

Next month - animation, version checking and more! Until then, happy authoring!