CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!

Example 1-3. Text Replacement

HTML

Text Replacement

Heading 2

CSS

#h2 { position:relative; width:250px; height:76px; overflow:hidden; }

#h2 span { position:absolute; width:250px; height:76px; left:0; top:0;
background:url("heading2.jpg") no-repeat; }

Example 1-4 demonstrates the Left Marginal design pattern. The idea behind this pattern is to move
one or more elements out of a block into its left margin so you can have headings (or notes, images, etc.)
on the left and content on the right.^4

(^4) The Left Marginal design pattern combines the Position Selector design pattern in Chapter 3; the
Margin pattern in Chapter 6; the Absolute Box pattern in Chapter 4; and the Absolute, Relative, and the
Closest Positioned Ancestor patterns in Chapter 7.