This tutorial assumes that you are already thoroughly familiar with basic CSS syntax and structure. If you are not, review my basic CSS tutorial, "CSS -- Module 10".
CSS-P (or Cascading Style Sheets Positioning, a part of the unevenly implemented CSS2 standards) allows the web programmer to position HTML-formatted resources anywhere they like on a web page. Here is an example of an HTML page which consists entirely of CSS-P positioned elements.
As you can see, CSS-P provides a Quark-like or PageMaker-like paradigm for laying out HTML content, replacing tables as the primary means for page layout in HTML.
Unfortunately, due to some serious bugs and uneven implementation of the standards in both Netscape and Internet Explorer browsers, the day when web programmers can replace tables-based layout with CSS-P-based layout is still some years away. In the meantime, CSS-P provides programmers with a means for creating application-like screens from positioned "layers" which, in combination with JavaScript, can be used to create simple "dynamic" HTML content (or DHTML). Here is an example of a very simple DHTML contextual help system with hiding/showing layers using HTML, CSS-P, and JavaScript.
Sometimes Netscape and Internet Explorer browsers fail to generate scrollbars on an entirely CSS-P-based HTML page which scrolls beyond the bounds of the browser window. Therefore, you must use CSS-P very sparingly in your websites, and only within the "splash" region of your HTML page (within the first 300-400 pixels in height, and 500-700 pixels in width) so that the user won't have to scroll to see the CSS-P-based content. Due to difficulties in combining positioned and non-positioned elements reliably, you should probably also use CSS-P only by itself, not in combination with regular HTML on a page. These are not hard-and-fast rules, of course, but merely suggestions for avoiding technical difficulties.
In the following sections, I will show you how to use CSS-P effectively. I will not be explaining the entirety of the standards, only those portions which work reliably cross-browser and cross-platform. For more information on CSS-P as it is currently implemented, you may wish to read pertinent sections of "Dynamic HTML: The Definitive Reference" by Danny Goodman.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.