Skip to main content

By clicking Submit, you agree to the developerWorks terms of use.

The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

  • Close [x]

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

  • Close [x]

Understanding dynamic positioning

Nicholas Chase, Author, Web-Site Developer
Nicholas Chase has been involved in Web site development for companies including Lucent Technologies, Sun Microsystems, Oracle Corporation, and the Tampa Bay Buccaneers. Nick has been a high school physics teacher, a low-level radioactive waste facility manager, an online science fiction magazine editor, a multimedia engineer, and an Oracle instructor. More recently, he was the Chief Technology Officer of Site Dynamics Interactive Communications in Clearwater, Florida. He is the author of three books on Web development, including Java and XML From Scratch (Que). He loves to hear from readers and can be reached at nicholas@nicholaschase.com.

Summary:  In the early days of HTML, Web authors had little or no control over where items were rendered on the page, but with the advent of dynamic positioning, content can be placed anywhere with complete precision.

Date:  13 Nov 2001
Level:  Introductory PDF:  A4 and Letter (1052 KB | 52 pages)Get Adobe® Reader®

Activity:  5473 views
Comments:  

Before you start

About this tutorial

This tutorial is designed to assist Web developers who need tight control over the placement of content on their pages, but who understand the need to separate content from presentation in order to improve compliance with standards and ease of maintenance.

Dynamic positioning using DHTML provides complete flexibility in the placement of content on a page. However, using it can be like using a professional-grade camera -- to get the most out of it, you need to understand its nuances. Building pages using dynamic positioning requires an understanding of the normal page flow and the properties that can alter that flow or even remove items from it altogether. It also requires an understanding of the internal workings of individual items and the interdependencies of various properties.

This tutorial takes you through an introduction to the normal flow of a page, and explains how it can be altered to suit your purposes. It also shows you the details behind the process of laying out a DHTML page using dynamic positioning, including the different types of elements and how to use them to create a page that behaves just as you planned. Finally, this tutorial takes a brief look at scripting CSS properties related to positioning to give you the foundation you need to build your own scripts.

Prerequisite knowledge

The tutorial assumes that you are already comfortable using HTML and Cascading Style Sheets (CSS). Basic knowledge of JavaScript is helpful, but not required, for understanding the scripting examples. You can gain a thorough understanding of the topic without trying out the scripting examples. (See Resources for tutorials that can get you up to speed on JavaScript and CSS.)

System requirements

This tutorial helps you understand the topic even if you only read through the examples without trying them out. If you want to try the examples as you go through the tutorial, make sure you have the following tools installed and working properly:

  • A text editor: DHTML files are simply text. To create and read them, a text editor is all you need.
  • Microsoft Internet Explorer 5.5, or other CSS2-capable browser: Not all browsers are able to exploit all of the capabilities of dynamic positioning. The examples in this tutorial use IE 5.5, but other alternatives are available such as Netscape and Opera.

1 of 10 | Next

Comments



Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=136427
TutorialTitle=Understanding dynamic positioning
publish-date=11132001
author1-email=
author1-email-cc=

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).

My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Try IBM PureSystems. No charge.