Pro HTML5 and CSS3 Design Patterns

CHAPTER 20 ■ ALERTS

Run-In Alert

Problem You want to insert an alert into your document where the alert’s heading runs into the
alert’s paragraph.

Solution You can use the Alert design pattern to mark up the alert. You can use the Run-In design
pattern to get the heading to run into the paragraph by styling the heading and the
paragraph with display:inline. As pointed out in the Run-In design pattern discussion in
Chapter 13, CSS provides the rule display:run-in for this purpose, but only Opera, Safari,
and Konquerer support it. Thus, we have to use the Run-In design pattern instead. Lastly,
you can optionally use the Inline Decoration design pattern (Chapter 11) to decorate the
alert’s heading.

Pattern

HTML

CSS

<div class="alert TYPE">

<h3> ALERT HEADING </h3>

<p> ALERT TEXT </p>

</div>

*.alert { ANY_STYLES }

*.alert h3 { display:inline; }

*.alert p { display:inline; }

Location This pattern works anywhere you can use a block element, and it can be reliably floated and
positioned.

Advantages Because the properties used by this pattern are simple, they are well supported by every
major browser.
This pattern is closely related to the Inline Alert design pattern because it displays the
heading and paragraph inline. If you want the Inline Alert design pattern to be styled like
the Run-In pattern, simply do not assign display:block to its
and elements. The main advantage of the Run-In Alert over the
Inline Alert design pattern is that

and

have more semantic meaning than spans.

Example In the example, I used the selector *.alert.caution to turn the text and borders red when
the class of the alert is caution. I also inserted the Inline Decoration design pattern into the
heading to give it more emphasis. In this case, the Inline Decoration consists of the <span
class="decoration">   styled with a gold left border.

Tip You can build prettier alerts by using rounded corners with border-radius or shadow
effects, as described in Chapter 6.

Related to Inline Alert; Inline Decoration (Chapter 11); Inlined, Run-In (Chapter 13)