CHAPTER 20 ■ ALERTSInline Alert
Problem You want to insert an alert into the inline flow of your document. You also want the inline
alert to work just like a block alert.
Solution An inline alert consists of an inline heading and inline content packaged inside a span. The
inline heading identifies the purpose of the alert as a tip, note, caution, warning, and so on.
The inline content contains the alert’s message. The inline alert works just like the Alert
design pattern; the only difference is elements are inline. You can make the alert stand out
by displaying it as a block, and using whitespace, borders, backgrounds, and fonts.
You can use to identify the span element as an alert and to
identify the type of alert. For example, identifies the span as an
alert and identifies the type of alert as a tip. This works just like the Alert design pattern
except we are using a span instead of a division. You can use .alert to select the entire
alert for styling. You can chain together class selectors to style specific types of alerts, such
as .alert.tip{}.
You can use to identify the alert’s heading. Heading elements
cannot be used inline because they are block elements. is a good substitute
because it indicates strongly emphasized text. The heading text is typically one word, such
as “Note,” “Tip,” or “Caution.” You can use .alert .heading{} to select the heading for
styling.
You can use to identify the alert’s content. You can use .alert
.content{} to select the heading for styling.
Pattern^
HTML ^
ALERT HEADING:
ALERT TEXT
CSS
.alert { white-space:nowrap; line-height:+VALUE; }
.alert .heading { STYLES }
.alert .content { STYLES }
.alert.TYPE { STYLES }
.alert.TYPE .heading { STYLES }
.alert.TYPE .content { STYLES }
Location This pattern works anywhere you can use an inline element, and it can be reliably floated
and positioned.
Options You can use display:block to render an inline alert exactly as if it were a block alert. This is
useful when you have to mark up an alert within an inline context, but want it to look like a
block alert.
Tip You can build prettier alerts by using rounded corners with border-radius or shadow
effects, as described in Chapter 6.
Related to Alert, JavaScript Alert, Tooltip Alert, Pop-Up Alert; Inline Elements (Chapter 2); Subclass
Selector (Chapter 3); Inline Box (Chapter 4); Spacing, Nowrap (Chapter 11)