| Previous: Mouseovers: Changing Things Without Clicks | Next: Dynamic Positioning and Layers |
The most cross-compatible DHTML technology is CSS Positioning, which is an extension of the CSS style script standard that enables you to be very specific about the position of elements on your page. As long as everything is stable, your pages will look very similar in IE, Netscape 4, and Netscape 6.
When you decide to move an element or change its position, however, you find yourself in a different situation. Each browser has a slightly different DOM implementation, meaning you need to access the CSSP elements slightly differently. Adding more confusion is Netscape 4, where it's easier to dynamically alter items on the page if they're formatted using two elements that Netscape created, the <layer> and <ilayer> elements. These elements enable you to place content on top of other content, set the visibility of the layers, and hide and show content dynamically.
Unfortunately, the <layer> elements also aren't standard—the W3C never incorporated them, and Netscape has moved away from them. We'll look at them briefly in this section, but I recommend you stick to CSSP for your positioning. As you'll see at the end of this section, you can create a page based on CSSP that works in all three browser versions.
Ultimately, the point of CSS Positioning is that the content and appearance of a Web page should be separated and separable. With regular CSS style sheets, you've seen how that's true—the style sheets make the page look good, but without them, a browser could still access the information on that page.
CSSP takes that same theory a little bit further. Although CSSP enables you to precisely position elements on the page—even more precisely than with table elements—it does so without interfering with the regular markup. You can create pages that look completely different in CSS-compatible browsers, and yet those same pages could be viewed in a non-graphical or incompatible browser.
CSSP really isn't all that odd if you've gotten used to regular CSS properties—it's just more of the same. In most cases, you'll create a new class to specify a particular position for an element. Then you can either add the class attribute to a particular element or use the <span> or <div> elements to assign that position class to a number of elements. First, though, you need to know the CSS properties that are useful for positioning. They're shown in Table 1.
|
Property |
Possible Values |
Example |
|
position |
absolute, relative, static |
position:absolute |
|
left |
number and units |
left:100px |
|
top |
number and units |
top:50px |
|
width |
number and units |
width:250px |
|
height |
number+unitsclip |
height:5in |
|
clip |
rect (top, right, bottom, left) |
rect (100px,50px,50px,100px) |
These properties enable you to work with an individual element, division, or span as a single box. You can define that box at a particular size and have it begin at a particular spot on the page, either relative where it would have appeared on the page without the styling (the relative position), or relative to the top-left corner of the page itself (the absolute position) .
NOTE
If you use the position: static property, the item acts as if it were a regular XHTML element without any particular CSSP markup.
If any of these properties is a bit odd, it's the clip property, which is used to make only portions of a particular division visible. It works a little like cropping an image in an image-editing application, by hiding any part of the element that's not enclosed in the rectangle that's created by the property. An example might be
.story_text {
position: absolute;
left: 25px;
top: 80px;
width: 210px;
clip: rect(10px, 200px, 500px, 10px);
}
TIP
When you type in and test Listing 4, try substituting the preceding class definition to see how clipping can change things. The result is shown in Figure 3.
Figure 3 The clipped story looks almost as if it were cropped in a photo application.
To see some of these items in action, let's begin with a simple example that uses positioning to place a headline and a story on the page in a newsletter style. Listing 4 shows this page.
){kind=link}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSSP Basic Example</title>
</head>
<style type="text/css">
.headline1 {
position: absolute;
left: 25px;
top: 20px;
width: 200px;
height: 50px;
}
.story_text {
position: absolute;
left: 25px;
top: 80px;
width: 210px;
}
</style>
<body>
<h1 class="headline1">Man Bites Cat</h1>
<div class="story_text">
<p><strong>Orwitz, Nevada</strong> -- In a bizarre story that has local officials
scratching their heads, an Orwitz man has been questioned in an alleged biting attack
on a feline. Rich Cutter, 42, a noted local physician, apparently scrambled up a tree
in his backyard in pursuit of the cat, which lives with a neighbor. It was in that tree
that the alleged biting incident took place.</p>
<p>The cat is known to prowl Cutter's neighborhood, often singing, say some residents
of the calm suburban division, into the early morning hours.</p>
<p>"It's a sweet cat," said Muffy Einstein, a local school teacher. "It's just crazy what
that man did."</p>
<p>Others, like former professional athlete Hugh Ballhandler, call the cat's
vocalizations "screeching" and "loud meowing."</p>
<p>"That cat got what it deserved," said Ballhandler. "No jury in their right mind
would convict. That noise had to stop!"</p>
<p>The cat was available for comment, but seemed too agitated to make much sense.</p>
</div>
</body>
</html>
As you can see from Figure 4, the CSSP properties give you some interesting control over the page. The measurements used in Listing 4 use pixels, which is probably the most convenient way to parcel up the browser window and figure out how to position things. Note also that the appearance of the fonts in the browser could affect the ultimate layout, too. You might want to couple the CSSP properties with the standard CSS properties to keep things as uniform as possible.
Figure 4 Here's a nice CSSP layout thanks to Listing 4.
CSSP gives you the tools to lay out boxes and elements on your page with exacting specifications. That includes overlapping those elements, if desired. In fact, something as simple as changing Listing 4 so that the story_text class begins a bit higher causes the two elements to overlap:
){kind=link}
.story_text {
position: absolute;
left: 25px;
top: 25px;
width: 210px;
}
Figure 5 shows what that overlap looks like.
Figure 5 Using CSSP to cause items to overlap on the page.
That might not seem terribly useful. However—aside from visual collage—there are a few instances where overlapping elements could be useful. For instance, you might want to place text on top of an image, which could be done with CSSP. Listing 5 is an example.
){kind=link}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Overlap Text and Images</title>
</head>
<style type="text/css">
.image {
position: absolute;
left: 25px;
top: 20px;
width: 300px;
height: 225px;
z-index: 0;
}
.cutline {
position: absolute;
left: 125px;
top: 200px;
width: 210px;
z-index: 1;
font-face: courier;
font-weight: bold;
color: white;
}
</style>
<body>
<img src="house.jpg" class="image" />
<p class="cutline">12:04 P.M: Grandma's House</p>
</body>
</html>
In this example, the text is positioned over the image, making it appear as if it is part of the image (or at least that you did this on purpose). Figure 6 shows this example.
Figure 6 The text has been placed on top of the image.
Want to specify which element appears on top of which other elements? By default, later elements are piled on top of earlier elements, so text that appears in the Web document after an image will appear on top of that image. By using another CSSP property, z-index, you can change that order by giving each element or class a number. The higher the number, the closer to the top of the pile that element will be. (Note that z-index is recognized in Netscape 6 and IE, but not in Netscape 4, which uses the <layer> element for this sort of thing.)
With some minor adjustments to the style definition for the previous example, you can change the z-index order so that the image appears on top of the text. (You'll also change the size and color of the text so that you can see it back there.)
){kind=link}
<style type="text/css">
.image {
position: absolute;
left: 25px;
top: 20px;
width: 300px;
height: 225px;
z-index: 1;
}
.cutline {
position: absolute;
left: 200px;
top: 100px;
width: 400px;
z-index: 0;
font-face: courier;
font-size: 36pt;
color: blue;
}
</style>
Figure 7 shows what this looks like in a browser.
Figure 7 Changing the z-index changes the stacking order of the elements.
So far we've dealt strictly with elements and boxes that are completely discrete—one ends before the next begins. But what happens if you nest a positioned element within another one? If you use absolute positioning (position: absolute, as in the last few listings), all elements are positioned relative to their parent elements. In all the examples thus far, the parent has been the <body> element.
If you nest one element within another, however, the nested element becomes a child of the element within which it is nested. That means suddenly the child's coordinate system is based upon the parent element's, so the top and left properties, in particular, will be relative to the parent.
Let's see what happens with the basic positioning example you saw in Listing 4 if you change it around and make one of the elements the child of another. That's shown in Listing 6. (For the sake of space, I've cut the text of the example article, which was shown in Listing 4. )
){kind=link}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nesting Example</title>
</head>
<style type="text/css">
.headline1 {
position: absolute;
left: 25px;
top: 20px;
width: 200px;
height: 50px;
}
.story_text {
position: absolute;
left: 25px;
top: 80px;
width: 210px;
}
</style>
<body>
<div class="headline1">
<h1>Man Bites Cat</h1>
<div class="story_text">
<p>Body of article.</p>
</div>
</div>
</body>
</html>
The classes have been assigned to two different <div> containers, with the first one containing the second one. The result is a slightly different layout, as shown in Figure 8.
Figure 8 Because the second <div> is nested in the first, the coordinate system for the second <div> has moved down and to the right.
So far we've worked with absolute positing, but sometimes relative positioning (with position: relative) can be a useful property to set as well. Generally, you do that when you want a particular box to flow with the rest of the document for some reason, but you'd like to specify some of the box's position parameters, such as the width or the z-index.
For instance, building on Listing 6, you could change the second style class definition to
){kind=link}
.story_text {
position: relative;
top: 5px;
}
Because it's a child of the first <div> element (remember, that's what was introduced in Listing 6), the story text is still bound to the coordinates specified by <div class="headline1">. So, its definition can be much simpler—all it needs to do is position itself 5 pixels below where it normally would be (below a <h1> element) to make it look good in the layout.
NOTE
It can take a while to get used to the differences between absolute and relative positioning. I recommend that you play with them in these examples, changing values and so on to see what the result is. Also, in my experience, relative positioning can vary a bit from browser to browser, even among the 6.0-level browsers.
| Previous: Mouseovers: Changing Things Without Clicks | Next: Dynamic Positioning and Layers |