Datasheet

}
div.planet-copy {
color: white;
padding: 10px;
margin-left: 520px;
background: #000 url(‘images/backgrounds/star_darker_still.png’) no-repeat
fixed;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
div.planet-copy h1 {
border-bottom: 1px solid #000;
margin: 0 -10px;
padding: 0 10px;
}
div.planet-copy ul {
list-style: none;
}
4. Save the preceding CSS in the same folder where you saved index.html, as solar_system.css.
5. Enter the following CSS in a new document in your text editor:
div.planet {
height: expression(document.getElementById(‘solar-system’).offsetHeight - 25);
}
div.planet-copy {
height: expression(document.getElementById(‘solar-system’).offsetHeight - 45);
}
6. Save the preceding document in the same folder as index.html and solar_system.css, as
solar_system.ie.css. The preceding source code results in the image in Figure 1-5, when
loaded into Safari on Mac OS X.
To see how
index.html looks in other browsers, you can load it up by going to the File menu
of the browser you’d like to view it in, and then select Open or Open File, and then locate
index.html on your hard disk.
How It Works
Example 1-1 is an introduction to a little of what CSS is capable of. This example is designed to get your
hands dirty up front with CSS, as a preview of what you can expect throughout the rest of the book.
With each new chapter, I introduce and explain each of the nuts and bolts that come together to make
examples like the preceding one. In Figure 1-5, you can see that CSS can be used to specify background
images, and other aesthetic aspects of an XHTML document. I continue to revisit and explain the CSS
that resulted in Figure 1-5 throughout the book.
20
Part I: The Basics
05_096970 ch01.qxp 4/20/07 11:27 PM Page 20