CHAPTER 20 ■ ALERTS
Graphical Alert
HTML
<h1>Graphical Alert</h1>
<p>Text above the alert.</p>
<div class="alert tip">
<h3><em>Tip</em><span></span></h3>
<p>The Graphical Alert design pattern combines the Left Marginal design pattern
and the Text Replacement design pattern to display a graphic
on top of the heading.</p></div>
<p>Text below the alert.</p>
CSS
*.alert { position:relative; margin:20px 0 20px 120px; }
*.alert h3 { margin:10px 0; font-weight:bold; font-size:1.3em;
text-transform:uppercase; }
*.alert p { margin:10px 0; }
*.alert.tip p { color:green; border:4px ridge green; padding:20px; }
*.alert.tip h3 { position:absolute; left:-100px; top:-15px;
width:71px; height:117px; padding:0; overflow:hidden; }
*.alert.tip h3 em { position:absolute; left:20px; top:25px; }
*.alert.tip span { position:absolute; left:0; top:0; margin:0;
width:71px; height:117px; background:url("tip.jpg") no-repeat; }