CHAPTER 20 ■ ALERTS
Hanging Alert
HTML
<h1>Hanging Alert</h1>
<p>Text above the alert.</p><div class="alert tip">
<h3><span class="decoration"> </span>Tip</h3>
<p>The Hanging Alert uses the Hanging Indent design pattern to hang the
heading to the left and pad the content to the right. The Inline Decoration
design pattern optionally decorates the Alert's heading.</p>
</div>
<p>Text below the alert.</p>CSS
*.alert { padding-right:20px; padding-top:10px; padding-bottom:10px;
border-top:1px solid black; border-bottom:1px solid black; margin:40px; }*.alert h3 { display:inline; font-size:1.3em; text-transform:uppercase; }*.alert.tip { text-indent:-80px; padding-left:80px; }
*.alert.note { text-indent:-110px; padding-left:110px; }
*.alert.caution { text-indent:-160px; padding-left:160px; }*.alert.tip p { display:inline; margin-left:18px; }
*.alert.note p { display:inline; margin-left:20px; }
*.alert.caution p { display:inline; margin-left:20px; }*.alert *.decoration { border-left:15px solid gold; margin-right:-10px;
font-size:0.7em; vertical-align:2px; }