Pro HTML5 and CSS3 Design Patterns

CHAPTER 20 ■ ALERTS

Hanging Alert

Problem You want to insert a hanging alert into your document. You want its heading to be moved to
the left and its content to the right. You want to adjust the indent to fit different types of
alerts. You do not want to insert extra markup.

Solution You can use the Alert design pattern to mark up the alert. You can style the alert using the
Hanging Indent design pattern (Chapter 12). You can optionally use the Inline Decoration
design pattern (Chapter 11) to decorate the alert’s heading.
To create a hanging indent, the alert’s heading and paragraph need to be displayed as inline
blocks. This puts them in the same inline formatting context. You can then use a positive
value in padding-left to indent all the text in the heading and the paragraph to the right.
You can use a negative value in text-indent to move the first line into the left padding area
by an equal amount. For example, if you use padding-left:100px, you should use text-
indent:-100px. Lastly, the first line of the paragraph needs to be moved to the right so that
it lines up with the left indentation of the rest of its lines. You can select the paragraph and
use margin-left to move the first line into alignment. Because the paragraph is displayed
inline, margin-left affects only the beginning of the paragraph’s first line.

Pattern^

HTML

CSS
.alert { ANY_STYLES }
.alert h3 { display:inline; }
.alert.TYPE { display:inline;
text-indent: -INDENT;
padding-left:+INDENT; }
.alert.TYPE p { display:inline; margin-left:+VALUE; }

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.

Disadvantages You have to play with margin-left until you are satisfied it aligns the paragraph’s text. The
exact value depends mainly on the heading’s font.

Example The example shows how you can use different selectors to adjust the hanging indent for
different types of alerts. When you change the type of alert, the hanging indent changes too.

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

Related to Alert; Offset Static (Chapter 8); Inline Decoration (Chapter 11); Hanging Indent (Chapter
12); Inlined (Chapter 13)