background
|
|
Linux
Linux Support
A small area on the internet for Linux Support.
More icon

Tombstone
Tombstone Tuning
Home of tuning, projects and fast cars and boats.
More icon
|
|
Up Image
Navigation
Search this Site
Enter your search terms

Site Breadcrumb - You are here
|
Taylor's Dynamic HTML Tutorial
Lesson 2

by Taylor

Page 1 — Lay Out Your Page with CSS-P

As Nadav describes in his introduction to dynamic HTML, dHTML Web pages are laid out with cascading stylesheets using JavaScript to control their elements over time. That's it - nothing really complex or paradigm-bending. It's only when we get everything styled and moving and have to make it work on both Microsoft and Netscape browsers that things get a bit hairy.

Today we'll be doing some layout of pages using CSS-P. This is the first step in learning dynamic HTML - knowing how to position boxes full of stuff on the computer screen. Once you are comfortable with positioning elements, we'll move on to scripting them dynamically.

Traditionally, most programs or file formats used for design and page layout would let you create little boxes. These have had changeable widths and heights that you could move around in two dimensions. They also have given you control over which objects lay on top of other objects. CSS-P works in much the same manner; you define a container with HTML (for cross-platform compatibility, it's best to use a <DIV> or <SPAN> tag), give it a horizontal and vertical position, and then tell it which objects are on top of other objects.

It's really quite simple, and it works the way most people (especially the ones who use tables to do layout) always wished HTML would work. You just have to think about page design a bit differently. But once you do, it's hard to go back. This lesson will focus on doing some basic layouts to get you comfortable with CSS positioning. Then tomorrow we'll use JavaScript to control it.

Let's do some layout.