Creating a Variation

Using the same selectors and HTML code, it is possible to change the layout so that the <blockquote> and its content looks entirely different.

For this example, you will create a fixed-width <blockquote> with one large background image as shown in Figure 13.6.

Figure 13.6. Screenshot of new background image.

In the blockquote selector, the background image and its position need to change. In this case, both the x and y axes will be set to 0, which means the image will sit in the top-left corner of the <blockquote>.

The padding-top declaration changes from 30px to 1px to trap paragraph margins.

Trapping Margins

A standard paragraph has predefined top and bottom margins.

When a paragraph is placed inside of another container, its top margin can cause problems. Some browsers will display the paragraph and top margin inside of the container. Other browsers, however, will display the paragraph only, and allow the margin to poke out the top of the container.

You can stop this from occurring by applying either border-top or padding-top to the container. The amount can be as tiny as 1px, as long as it is present.

This is referred to as trapping margins.

The blockquote.p selector changes from padding: 0 70px to padding: 0 1em 0 80px. This new padding will move the text away from the left edge of the <blockquote> to allow room for the new background image.

The blockquote p.source selector has a range of changes. The background image is removed completely. Margins are set to 0. A 5px white border is added to the top of the paragraph to separate the source from the quotation. Padding is changed from padding-bottom: 30px to padding: .5em .5em .5em 80px.

Finally, text-align: right is removed and background: #336 is added. The results are shown in Listing 13.6. The results can be seen in Figure 13.7.

Listing 13.6. CSS Code for the <blockquote> Variation

blockquote {     margin: 1em 0;     border: 1px solid #000;     background: #000 url(lesson13b.gif) no-repeat 0 0;     padding-top: 1px;     color: #fff;     width: 500px; } blockquote p {     padding: 0 1em 0 80px; } blockquote p.source {     margin: 0;     border-top: 5px solid #fff;     padding: .5em .5em .5em 80px;     background: #336;     font-style: italic; } 

Figure 13.7. Screenshot of the <blockquote> variation.