CSS-P Tutorial 07 -- Making a DIV Box

Michael Masumoto's Cosmic CSS-P Tutorial

Making a Colored DIV Box

You can turn a positioned DIV tag into a colored box. This feature is particularly useful when creating application "screens" for DHTML purposes. It can also be used, to a much lesser extent, as a means of creating low-weight design elements without GIFs.

There is only one real way to create these colored boxes which are supported by ALL of the browsers properly. First, you must create a DIV tag on your page and position it, as usual. In this case, however, the DIV tag will be empty (although it doesn't have to be, as we'll see in later sections).

Example (in context using an embedded style sheet):

<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
#fred {
    position:absolute;
    left:100px;
    top:30px;
}
//-->
</style>
</head>
<body>
<div id="fred">

</div>
</body>
</html>

Now, obviously, this isn't complete. To create the box, you must define BOTH the width and height properties in your CSS declaration using pixel values; this will give dimension to your box.

Property: width
Values: any positive integer-based pixel value (100px, 250px, etc).
Description: defines the width of a positioned element.

Property: height
Values: any positive integer-based pixel value (100px, 250px, etc).
Description: defines the height of a positioned element.

Example (abbreviated):

#fred {
    position:absolute;
    left:100px;
    top:30px;
    width:100px;
    height:100px;
}

In addition to width and height, you must ALSO set background-color and layer-background-color properties, to give color to the box; both of these properties should be set to the SAME hex code color value. The background-color property is supported by Internet Explorer 4/5 and Netscape 6; the layer-background-color property is supported by Netscape 4.x.

Property: background-color
Values: any hex code color value (#CC66CC, #FFCCCC, etc)
Description: defines background color for a positioned element in IE4/5 and Netscape6.

Property: layer-background-color
Values: any hex code color value (#CC66CC, #FFCCCC, etc)
Description: defines background color for a positioned DIV element in Netscape 4.x.

Example (abbreviated):

#fred {
    position:absolute;
    left:100px;
    top:30px;
    width:100px;
    height:100px;
    background-color:#CC99CC;
    layer-background-color:#CC99CC;
}

Last, but not least, you MUST set the border property for the positioned element. The border property ensures that the box will be solid and opaque on all browsers. Without the border property, the box will not be cross-browser compatible.

The border MUST be solid, 1px wide, and the SAME color as the background color; we'll talk more about this in a moment.

Property: border
Values: border type (solid), width of border (1px), hex code for color of border (same as background color); each of these values MUST be separated by one space, no commas!
Example: border:solid 1px #CC99CC;

Example (abbreviated):

#fred {
    position:absolute;
    left:100px;
    top:30px;
    width:100px;
    height:100px;
    background-color:#996699;
    layer-background-color:#996699;
    border:solid 1px #996699;
}

Example (in context using an embedded style sheet):

<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
#fred {
    position:absolute;
    left:100px;
    top:30px;
    width:100px;
    height:100px;
    background-color:#996699;
    layer-background-color:#996699;
    border:solid 1px #996699;
}
//-->
</style>
</head>
<body>
<div id="fred">

</div>
</body>
</html>

Here is the above example displayed.

The border MUST be the same color as the background color; this is due to flaws in CSS implementation in Netscape 4.x. Here is a graphic which depicts what happens when you use a border which is DIFFERENT in color from the background color, as seen in Internet Explorer 5 vs. Netscape4.x:

IE5 vs N4 Border Problem

In Netscape 4.x, the border wraps itself around the content of the DIV tag, not the DIV box itself; this problem has been corrected in Netscape 6.

Just as with regular CSS-P positioned elements, you may use the z-index property to indicate which DIV box goes in front. In the following example, I have positioned fred in front of martha.

Example (in context using an embedded style sheet):

<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
#fred {
    position:absolute;
    left:100px;
    top:30px;
    z-index:20;
    width:100px;
    height:100px;
    background-color:#996699;
    layer-background-color:#996699;
    border:solid 1px #996699;
}

#martha {
    position:absolute;
    left:150px;
    top:100px;
    z-index:10;
    width:100px;
    height:50px;
    background-color:#336699;
    layer-background-color:#336699;
    border:solid 1px #336699;
}
//-->
</style>
</head>
<body>
<div id="fred">

</div>

<div id="martha">

</div>
</body>
</html>

Here is the above example displayed.

Again, the procedure that I have outlined above is the one and only way you can make boxes out of DIV tags which will be respected on all browsers on all platforms. These sorts of boxes are used frequently in DHTML.

Main Menu