Example

CSS-P (Cascading Style Sheets Positioning) An Overview by Michael Masumoto date: 04/25/1999 email: michael@michaelmasumoto.com phone: 707-869-1205 This precis assumes that you are already familiar with basic CSS syntax and structure. CSS-P allows the web programmer to position HTML-formatted resources anywhere they like on a web page. These resources may be positioned either absolutely or relatively. Absolute positioning places a resource on a page using an (x,y) coordinate relative to the browser window as a whole, or relative to some parent object, without regard to the location of that resource in the HTML code (relative positioning, then, places a resource relative to its position in the flow of the HTML code). CSS-P also allows the web programmer to place resources in a flattened three-dimensional space, with objects located in front or behind one another, as you would see in a standard graphics or page layout program. In addition, CSS-P provides for the creation of layers, which can be used as a means of creating application-like screens to be hidden and displayed. We'll discuss all this in greater detail a little later. CSS-P positioned "layers" are the building blocks of any Dynamic HTML presentation, in combination with a lot of JavaScript code. CSS-P may also be used simply as a page layout tool, but remember that CSS-P is not compatible with any web browser predating Netscape 4.04 or IE 4.0. For a comprehensive look at CSS-P and Dynamic HTML, please refer to Danny Goodman's work, "Dynamic HTML: The Definitive Reference", from O'Reilly & Associates, publishers; this book will be referred to hereinafter as "our textbook." The following material is not comprehensive, but it does cover the CSS and CSS-P properties essential to creating successful cross-browser positionable layers. The

Tag At this time, the only HTML element which can be successfully positioned in both Netscape and IE is the DIV tag. Internet Explorer allows for any tag to be treated as a positionable element, but Netscape has only made an allowance for the DIV tag. This will change in Netscape 5, when (I believe) both browsers will allow for positioning using any tag. Nevertheless, I suspect that the use of the DIV tag as the primary positioning HTML unit will continue into the future, both due to habit and because of its inherent backward compatability. The DIV tag requires one attribute in order to allow it to be positioned: ID. ID is the HTML attribute which calls on an ID definition in a CSS embedded or linked style sheet. Look at the following code sample to see the skeleton of CSS and HTML necessary for CSS-P: Example

Some HTML-invoked Resource

There are three CSS properties which are required for defining positioned elements: position, left, and top. 1. position values: relative, absolute Example: position: absolute Description: The power of CSS-P lies in absolute positioning. Although relative positioning is possible, it is thoroughly described in our textbook and is irrelevant for most CSS-P purposes. Absolute positioning means one of two things. Either you are placing a resource at a position relative to the upper-left corner of the browser window in question, or you are placing a resource at a position relative to the upper-left corner of some parent object (we will discuss this parent-child positioning a little later). The position property must be defined in anything using CSS-P; without this property, no other CSS-P properties will operate correctly. 2. left values: integer values referred to in pixels. Example: left: 25px or left: -100px Description: When positioning any HTML element using CSS-P, you need to know how many pixels in from the left side that element is to be positioned. The left property is the same as x in (x,y). 3. top values: integer values referred to in pixels. Example: top: 25px or top: -10px Description: When positioning any HTML element using CSS-P, you need to know how many pixels down from the top that element is to be positioned. The top property is the same as y in (x,y). Example of an HTML IMG that is to be positioned at (100,100): Example GIF Positioning

Now, say that you had a paragraph of text which you wished to position. A paragraph does not, by itself, have any width information associated with it, which means that your paragraph will simply become the width of the browser window unless you do something about it. Using the width property can solve this problem. 4. width values: integer values referred to in pixels (positive values only) Example: width: 250px Description: This property allows the CSS programmer to set the width of a given DIV tag using a style sheet. Example of a paragraph that is to be positioned at (50,50) and is to be 200 pixels wide: Example GIF Positioning

Here is a paragraph of fabulous text. This text is simply without parallel. You could not find a better paragraph of text anywhere on the open market. A paragraph of text this fantabulous just doesn't come around every ding dong day, you know.

Try to use common sense when setting width in your style sheet. If you have a GIF which is 200 pixels wide and you're trying to put it into a DIV tag which you want to set at 100 pixels wide, your GIF's dimensions are going to override the dimensions of your DIV tag. In fact, you may get very unpredictable results. Either make a version of your GIF which is 100 pixels wide, or redesign your DIV so that it is 200 pixels wide. You may also set the height of an HTML element in your style sheet. Unfortunately, Netscape 4 doesn't always honor this value. 5. height values: integer values referred to in pixels (positive values only) Example: height: 200px Description: This property allows the CSS programmer to set the height of a given DIV tag using a style sheet. One other property which must be explained at this time is z-index. Just as the left property can be seen as the x value in a coordinate plain, and the top property can be seen as the y value in a coordinate plain, so also may we have a z value which describes the relations of a series of objects from front to back. Smaller numbers would be further to the back, while larger numbers would be further to the front. A z-index of 0 would be the furthest back, while a z-index of 10000 would be very much in the front. If you place two GIFs in locations where they overlap one another, you must define the z-index for each GIF so that the browser may know which GIF is supposed to be in front. If you do not define the z-index, the browser will place the first GIF in the HTML code in back, and the second GIF in the HTML code in front. 6. z-index values: integers Example: z-index: 3 Description: This property allows the CSS programmer to set the position of a given DIV tag using a style sheet in a flattened, three-dimensional plane, from back to front, smaller numbers being further to the rear, larger numbers being further to the front. Example of two gifs which overlap, utilizing z-index: Example z-index positioning

In the above example, Capital.B.GIF would lie behind Capital.A.GIF (even though it follows Capital.A.GIF in the code) because Capital.B.GIF's z-index is smaller. As can be implied from the preceeding information, a DIV tag can be seen as a box, with width, height, z-index, and x,y positioning information. If you want that box to have a background color and appear like a box on the screen, you need to use a few more CSS properties. Additional properties required: background, border, backgroundColor To make your DIV tag appear on the screen like a little box, you must set the background color for that DIV, as well as give the DIV a border value. Internet Explorer requires the use of the backgroundColor property to make it's DIV boxes opaque and screen/box like. Netscape, on the other hand, requires the layer-background-color and border properties. To make cross-browser acceptable code, you must use all three properties. 7. layer-background-color (Netscape only), background-color (IE only) values: named color values or hex codes Example: layer-background-color: #FFFFFF or background-color: #333333 8. border (Netscape and IE) values: border width in pixels, and border color in hex code Example: border: 1px #000000 Because of Netscape 4's inadequate implementation of border, you MUST create the border for your DIV tag in the same color as your background, essentially making an invisible border. If you don't, you'll see a border ringing just the HTML content of your DIV tag in Netscape, with the rest of the box remaining borderless, while in IE, you'll see a border ringing the entire DIV box. Example of two DIV layers, overlapping, the second layer placed above the first layer: Example z-index positioning with DIV boxes

There is one last property which must be described: visibility. The visibility property has three states: visible, hidden, or inherit. If a DIV is visible, you can see it; if it is hidden, you can't see it. If a DIV is set to have a visibility of inherit, that means that it takes its visibility cue from whatever element acts as its particular "parent". If a DIV element is just positioned in the BODY of a document, then its "parent" would be the BODY. If a DIV tag is nested within another DIV tag, then that encompassing DIV tag would be the "parent". 9. visibility values: hidden, visible, inherit Example: visibility: visible Generally, you won't be using the visibility property unless you are scripting the page for use with Dynamic HTML. Remember, earlier, we talked about positioning of DIVs relative to either the main browser window, or a parent DIV tag? Let's talk about that now. If you position a DIV tag as a child of another DIV tag, you would do so in this manner, by nesting the child DIV within the confines of the parent DIV: Example: Example parent/child positioning

In the above example, the positioning of "childDIV" is entirely in relation to the positioning of "parentDIV". With parentDIV set to an x,y coordinate of 50,50 in the browser window, childDIV would be displayed at 75,75 in the browser window at large, which is at 25,25 of the parentDIV's display space. Beware of making childDIV layers which are larger than their parentDIV counterpart; Internet Explorer and Netscape do not treat clipping of child layers in the same manner. Always make childDIV layers SMALLER than their parentDIV. The good thing about this sort of parent/child positioning stuff is that you can create a mobile screen out of one parentDIV layer and a bunch of childDIV layers. This combination screen could be reused at many different positions in the browser window without having to rewrite the positioning of each of the child layers; because the child layers are all in relation to the parent layer, you would just have to change the style information of the parent. There are two more important CSS-P properties: clip and overflow. These properties are described quite adequately in our textbook, and I will not be dwelling on them here. One last thing: padding Padding is the space between some element and the edge of the border. If you have created a DIV box which holds some text content, you may have noticed that the content scrunches right up to the edge of the DIV box. If you set the padding for that DIV layer, you can ease the content away from the edge of the box. 10. padding values: integers referenced in pixels Example: padding: 10px (This example would create 10 pixels of padding on all four sides of the element: top, left, right, and bottom). Example of content with padding in a positioned DIV: Example padding