InformIT: Sams Teach Yourself HTML 4 in 24 Hours > Dividing a Web Page into Layers

Dividing a Web Page into Layers

Shortly, you'll learn how to detect whether a page is being viewed with a DHTML- compatible Web browser. First you need to know an essential secret of all Dynamic HTML: how to define layers of text and graphics so you can move them around.

Wait—you already know how to do that! Remember way back in Hour 5, "Text Alignment and Lists," when you learned to use <div align="center"> to center a bunch of text and graphics on the page? The whole purpose of the <div> and </div> tags is to define a region of the page (also called a division or layer ) so you can then do something with that whole region at once.

As you found out in Hour 16, "Using Style Sheets," centering the contents of a <div> region is only one of many possibilities for playing with it. You could also turn all the text in the region red with <div style="color: red"> , or put a red background behind the region with <div style="background-color: red"> , or even pick up the whole region and move it to the top-left corner of the browser window with <div style="position: absolute; left: 0px; top: 0px"> .

Now you're about to learn how to do all these things dynamically, in response to user-initiated events such as mouse movements or link clicks. Of course, you'll need a name for each <div> region you want to order around. In some older versions of JavaScript, you would use the familiar name attribute for this purpose, but for reasons beyond my ken, a new attribute called id is now used instead.

For example, the following code from Figure 20.3 defines a layer named "intro":

<div id="intro" style="text-align: center; z-index: 0;
 position: absolute; left: -260px; top: 88px; width: 260px">
<h1>The XYZ Files</h1>
<h2><i>The Truth Is<br />In There.</i></h2>
If you click on the tabs,<br />you might find it.<br />
Then again, you might not.</div>

The style attribute positions this layer 88 pixels down from the top edge of the browser window, and negative 260 pixels from the left edge. Negative means to the left, so in other words you won't actually be able to see this layer (until you move it) because it's completely outside the viewing window, off to the left side. The style attribute also specifies the width of the layer as 260 pixels and indicates that the text should be centered in that 260-pixel–wide region.

Each of the last three <div> tags in Figure 20.3 contains a single <img /> tag, placing a 300x330-pixel image of a file folder on the page. If you look carefully at the style attributes for these <div> tags, you'll notice that each layer is positioned 250 pixels outside the left edge of the browser window, so that only the rightmost 50 pixels of the image are visible in Figures 20.1 and 20.2. The rest is hidden beyond the edge of the viewing window and will not be revealed until later this hour when I show you how to interactively animate the file folder images.

You'll also notice that all three of these <div> layers are placed in exactly the same spot, right on top of one another. The only reason you can see the bottom two folder tabs is that the images covering them are partially transparent GIFs, allowing parts of the image and background beneath to show through.

With all these semi-transparent layers piled on top of one another, you need some way to determine which layer appears in front, which one is in the back, and the stacking order of those layers in between. You can do this by including z-index: followed by a number in the style attribute of each layer. Higher numbered layers appear in front of lower numbered layers. In Figure 20.3, the "intro" layer gets a z-index of 0 (the very bottom layer), and the X, Y, and Z file tabs get z-indexes of 1, 2, and 3, respectively. Figure 20.1 clearly shows the result of this stacking order. (If you gave the "intro" layer a z-index of 4 or higher, the text would appear in front of the file tabs instead of behind them.)

Offering Alternate Content in Plain HTML | Next Section

Previous Section