Cascading Style Sheets Positioning

Cascading Style Sheets (CSS) are the basis for Dynamic HTML in both Netscape Navigator 4.0 and Internet Explorer 4.0. CSS allows a way to create a set of "styles" that define how the elements on your page are rendered. Cascading Style Sheets Positioning (CSS-P) is an extension to CSS that gives a developer pixel-level control over the location of anything on the screen. Due to the fact there are already good CSS and CSS-P documentation and tutorials I won't be duplicating them - rather I'll be building on top of them.

Here are 2 documents/tutorials that explain the syntax of CSS and CSS-P:

Those sites will give a complete overview of CSS and how to implement it. But I'll just quickly re-iterate the parts of CSS that will be used throughout this tutorial.

Using DIV Tags:

When using CSS-Positioning, these properties are usually applied to the DIV (division) tag - an empty, non-formatting tag, that is best suited for CSS. When you put HTML/text into a DIV tag it is commonly referred to as one of: "DIV block", "DIV element", "CSS-layer", or as I say, just a "layer". When you read about Dynamic HTML on websites or in newsgroups, if someone is talking about any of these terms they're all talking about the same thing - some piece of HTML that is inside a positioned "DIV" tag.

To markup an empty DIV tag is no different than any other tag:

<DIV>
This is a DIV tag
</DIV>

Using DIV tag by itself has the same results as using <P></P>

But by applying CSS to DIV tags we can define where on the screen this piece of HTML will be displayed, draw squares or lines, or how to display the text that's inside it. You do this by first giving the DIV an ID (sort of like a name):

<DIV ID="truck">
This is a truck
</DIV>

What you use for your ID is up to you. It can be any set of characters (a-z,A-Z,0-9, and underscore), but starting with letter.

Then you apply your CSS in one of 2 ways:

Inline CSS:

Inline is the way most commonly used. And it is the way I will begin showing how to write DHTML and JavaScript.

<DIV ID="truck" STYLE="styles go here">
This is a truck
</DIV>

External STYLE tag:

Using the external method will work as well, however there are a few issues involved with writing CSS like this, so I suggest you wait until you get to the Nesting Layers lesson before trying it on your own. For right now just take a look to see how it is done...

<STYLE TYPE="text/css">
<!--
#truck {styles go here}
-->
</STYLE>

<DIV ID="truck">
This is a truck
</DIV>

Notice how the ID is used in the STYLE tag to assign the CSS styles.

Cross-Browser CSS Properties:

Because the goal of this site is to produce DHTML that works in both Netscape and Internet Explorer, we are somewhat limited to which CSS styles/properties we can use. Generally, the following properties are the ones that work (fairly closely) to the standards as defined by the W3C.

position
Defines how the DIV tag will be positioned - "relative" means that the DIV tag will flow like any other HTML tag, whereas "absolute" means the DIV will be positioned at specific coordinates. Absolute positioning will be the topic of most of this tutorial.
left
Left location (the number of pixels from the left edge of the browser window).
top
Top location (the number of pixels from the top edge of the browser window).
width
Width of the DIV tag. Any text/html that is inserted into the DIV will wrap according to what this value is. If width is not defined it will all be on one line.

Important:
When using layers for animation you should always define the width. This is because in IE the default is the entire width of the screen. If you move the layer around the screen a scrollbar will appear at the bottom, which is annoying and causes the animation to slow down.

height
Height of the DIV tag. This property is rarely needed unless you also you want to clip the layer
clip
Defines the clipping (crop) rectangle for the layer. Makes the DIV into a precisely defined square. You define the size of the rectangle with the values of the four edges:
clip:rect(top,right,bottom,left);
visibility
Determines whether the DIV will be "visible", "hidden", or "inherit" (default).
z-index
The stacking order of DIV tags.
background-color
Background color of the DIV. In Netscape this property only applies to the background color of the text. When you want to draw squares with CSS you must also define the layer-background-color property to the same value.
layer-background-color
Background color of the DIV for Netscape.
background-image
Background image for Internet Explorer. In Netscape this property only applies to the background-image for the text.
layer-background-image
Background image of the DIV for Netscape.

The syntax for CSS differs from HTML, you use colons to separate the property and it's value, and semi-colons to separate the different properties:

position: absolute;
left: 50px;
top: 100px;
width: 200px;
height: 100px;
clip: rect(0px 200px 100px 0px);
visiblity: visible;
z-index: 1;
background-color:#FF0000;
layer-background-color:#FF0000;
background-image:URL(filename.gif);
layer-background-image:URL(filename.gif);

You have a bit of flexibility when assigning CSS properties. You do not have to define all of them. White space is ingored so you can either have them all on the same line, or on separate lines, tabs between values etc. As well, the default unit value is pixels, so you do not necessarily have to have the "px" after the left, top, width and height values, although it is recommended to do so.

position:absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); background-color:#FF0000; layer-background-color:#FF0000;

Inline Example:

<DIV ID="divname" STYLE="position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;">
</DIV>

External Example:

<STYLE TYPE="text/css">
<!--
#divname {position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;}
-->
</STYLE>

<DIV ID="divname">
</DIV>

A demo is worth a thousand words:

Home Next Lesson: Cross-Browser JavaScript
copyright 1998 Dan Steinman


Casa de Bender