Tuesday 16th of September 2014 06:52:20 AM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: Z

z-axis: 9.5. Stacking Positioned Elements
z-index property: 9.5. Stacking Positioned Elements


Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z


Library Navigation Links

<P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut <SPAN CLASS="change">***</SPAN> laoreet dolore magna aliquam erat volutpat.</P>

Figure 9-22

Figure 9-22. Another approach to defining a "change bar"

Remember when we mentioned static-position much earlier in the chapter? Here's one example of how it works and how it can be very useful.

Another important point is that when an element is positioned, it establishes a containing block for its descendant Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

I've left out a background color in order to keep the ruleshort, but remember to include a background color any time you have abackground image. And, of course, the effect shown in Figure 6-28 would have been the same if we'd leftout the background-repeat property altogether,since repeat is its default value.

Let's assume, though, that we just want images down the leftside of the document. Instead of having to create a special imagewith a whole lot of blank space to the right of the image, we caninstead make a small change to our styles:

IMG {display: block; width: auto;}
Figure 8-26

Figure 8-26. Replaced elements with auto width are rendered using their intrinsic size

Replaced elements can have their height and width set to a value other than auto or their intrinsic dimensions. This is most commonly used to "scale" images, either up or down. Thus, if an image is 150 pixels wide and its width is set to 75px , then the image will be displayed half as wide as it would ordinarily appear. In most browsers, the 36pt, its content area is 12pthigh, and the content area is what will be surrounded with theborder.

This behavior can be altered by assigning padding to the inlineelement, which will push the borders away from the text itself (shownin Figure 8-58):

SPAN {border: 1px dashed black; padding: 4pt;}
Figure 8-58

Figure 8-58. Inline padding and line-box layout

Figure 6-55

Figure 6-55. Nailing the background in place

When printed, of course, the two are the same, since the display area(the paper) is the same as the document size, at least for that page.In a web browser, though, the viewing area can change as the userresizes the browser's window. This will cause thebackground's origin image to shift as the windowchanges size. Figure 6-56 depicts several views ofthe same document. So in a certain sense the image isn't fixedin place, but it will remain fixed so long as the viewing area Even if clients don't support XML natively, it is not a big hindrance. In fact, Java with Servlets (on the server side) can convert XML with stylesheets to generate plain HTML that can be displayed in all web browsers.

Using XML to pass parameters and return values on servers makes it very easy to allow these servers to be web-enabled. A thin server side Java layer might be added that interacts with web browsers using HTML and translates the requests and responses from the client into XML, that is then fed into the server.

XML is totally extensible

By not predefining any tags in the XML Recommendation, the W3C allowed developers full control over customizing their data as they see fit. This makes XML very attractive to encoding data that already exists in legacy databases (by using database metadata, and other schema information). This extensibility of XML makes it such a great fit when trying to get different systems to work with each other.

XML supports shareable structure (using DTDs)