Thursday 05th of March 2015 03:28:11 PM

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: E

element boxes: 7.1. Basic Element Boxes
8.1. Basic Boxes
element clipping: 9.1.4.3. Element clipping
element selectors: 2.1.1. Rule Structure
elements
classification of: 2.9. Classification of Elements
floated (see floated elements)
overlapping, altering: 9.5. Stacking Positioned Elements
styling common: 11.2.4. Styling Common Elements
visibility of: 9.1.5. Element Visibility
elevation property: 10.8.2. The Spoken Word
em box: 5.3. Font Size
em-height (em): 3.2.2.1. em and ex units
em length value: 5.3.3. Percentages and Sizes
em square: 5.3. Font Size
embedded style sheets: 1.4.2. The STYLE Element
ex-height (ex): 3.2.2.1. em and ex units
Extensible Markup Language (see XML)
external style sheets: 1.4.1. The LINK Tag
creating: 11.1.1. Case 1: Consistent Look and Feel
loading
with @import directive: 1.4.3. The @import Directive
with LINK element: 1.4.1. The LINK Tag

Not only that, but if you're using lengths or percentages, you can give negative values, thus pushing the image out of the element, to some degree. Consider the example with the very large yin-yang symbol for a background. At one point, we centered it, but what if we only want part of it visible in the top left corner of the containing element? No problem, at least in theory. First, assume the image is 300 pixels tall by 300 pixels wide. Then, assume that only the bottom right third of it should be visible. We can get the desired effect (shown in Figure 6-45) like this:

extra space around elements, adding: 7.2. Margins or Padding?
7.2. Margins or Padding?
(see also margins)


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

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

10.2.3.3. :lang

On a completely different note is the pseudo-class :lang, which is used to apply styles to elements with matching languages. Let's say you want all paragraphs in English to be black on white, and all paragraphs in element, its width will tend toward zero. This is exactly the opposite of the normal horizontal rules, where width is increased until the seven properties equal the parent's width. A floated element's width will default to auto, which then defaults to zero, which is then increased to the browser's minimum allowed width. Thus, a floated paragraph could literally be one character wide -- assuming that to be the browser's minimum value for width. In practice, it's more likely that the browser will make the floated element as narrow

If both margins are set explicitly, and width is auto, then the value of width will be set to be whatever is needed to reach the required total (that is, the content width of the parent element). The following markup is displayed as shown in Figure 8-13:

P {margin-left: 100px; margin-right: 100px; width: auto;}
Figure 8-13

Figure 8-13. Automatic width

This is the most common case, in fact, since it is equivalent to setting the margins and not declaring anything for the

This is entirely consistent with the rules for floating, but it obviously isn't what we want. By floating the second column, we avoid this possibility altogether, and the columns stay straight.

Now let's place the pictures. There are two of them, both in the first column, so that makes things a lot easier. Obviously, they're left-floating images. The interesting part will be recreating the way they hang out into the