Schmitt C. CSS Cookbook / Recipe 1.12 Creating a Pull Quote with Images

Computers & Technology
Education & Reference
Business & Investing
Science & Math

CSS Cookbook
Authors: Schmitt C.
Published year: 2004
Pages: 27-28/154

Buy this book on amazon.com >>

<< Previous page
Table of contents
Next page >>

‚ < ‚ Day Day Up ‚ > ‚

Recipe 1.12 Creating a Pull Quote with Images

Problem

You want to stylize a pull quote with images on either side, such as the curly braces in Figure 1-23.

Figure 1-23. A Pull quote with images

Solution

Use the blockquote element to mark up the pull quote content:

<blockquote>

 <p>Ma quande lingues coalesce, li grammatica del resultant 

lingue es plu simplic e regulari quam ti.</p>

</blockquote>

Then set the style for the pull quote, placing one image in the background of the blockquote element and another in the background of the p :

blockquote {

 background-image: url(http://flylib.com/books/3/26/1/html/2/bracket_left.gif);

 background-repeat: no-repeat;

 float: left;

 width: 175px;

 margin: 0 0.7em 0 0;

 padding: 10px 0 0 27px;

 font-family: Georgia, Times, "Times New Roman", serif;

 font-size: 1.2em;

 font-style: italic;

 color: black;

}

blockquote p {

 margin: 0;

 padding: 0 22px 10px 0;

 width:150px;

 text-align: justify;

 line-height: 1.3em;

 background-image: url(http://flylib.com/books/3/26/1/html/2/bracket_right.gif);

 background-repeat: no-repeat;

 background-position: bottom right;

}

Discussion

For this Solution, the bracket images for the pull quote come in a pair, with one at the upper left corner and the other at the bottom right corner. Through CSS, you can assign only one background image per block-level element.

The workaround is to give these images the proper placement; put one image in the background of the blockquote element and the other in the p element that is a child of the blockquote element:

blockquote {

 background-image: url(http://flylib.com/books/3/26/1/html/2/bracket_left.gif);

 background-repeat: no-repeat;

 float: left;

 width: 175px;

}

blockquote p {

 background-image: url(http://flylib.com/books/3/26/1/html/2/bracket_right.gif);

 background-repeat: no-repeat;

 background-position: bottom right;

}

Then adjust the padding, margin, and width of the blockquote and p elements so that you have an unobstructed view of the images:

blockquote {

 background-image: url(http://flylib.com/books/3/26/1/html/2/bracket_left.gif);

 background-repeat: no-repeat;

 float: left;

 width: 175px;

 margin: 0 0.7em 0 0;

 padding: 10px 0 0 27px;

}

blockquote p {

 margin: 0;

 padding: 0 22px 10px 0;

 width:150px;

 background-image: url(http://flylib.com/books/3/26/1/html/2/bracket_right.gif);

 background-repeat: no-repeat;

 background-position: bottom right;

}

A benefit of this Solution is that if the text is resized, as shown in Figure 1-24, the images (brackets) stretch like rubber bands.

Figure 1-24. The background images staying in the corners as the text is resized

Recipe 1.13 Setting the Indent in the First Line of a Paragraph

Problem

You want to place an indent in the first line of each paragraph, turning the paragraphs shown in Figure 1-25 to the paragraphs shown in Figure 1-26.

Figure 1-25. The default rendering of the paragraphs

Figure 1-26. The paragraphs with first lines indented

Solution

Use the text-indent property to create the indent:

p {

 text-indent: 2.5em;

 margin: 0 0 0.5em 0;

 padding: 0;

}

Discussion

The text-indent property can take absolute and relative length units as well as percentages. If you use percentages, the percentage refers to the element's width and not the total width of the page. In other words, if the indent is set to 35% of a paragraph that is set to a width of 200 pixels, the width of the indent is 70 pixels.