To avoid this, padding needs to
be applied to the quote mark to force its content inward, but still leave the background
images in place. Since the quote images are both 23 pixels wide, a horizontal
padding value of 33px provides room for the images and adds an additional 10
pixels so that the content of the paragraph doesn??™t abut the quote marks. Finally,
the default margin-bottom value for paragraphs is overridden (via a 0 value), since
it??™s redundant here.
blockquote p {
color: #555555;
font-size: 1.3em;
font-weight: bold;
text-align: justify;
background: url(quote-close.gif) 100% 90% no-repeat;
padding: 0 33px;
margin-bottom: 0;
}
The following image shows your pull quote page so far.
WORKING WITH TYPE
103
3
6. Next, credit the quotation. To add a credit to the quote, add another paragraph,
with a nested cite element, inside which is the relevant content.
This is the pull quote. It's really very exciting, so read it now!
?? Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fred Bloggs
7. In CSS, add the following rule:
cite {
background: none;
display: block;
text-align: right;
font-size: 1.1em;
font-weight: normal;
font-style: italic;
}
8. Some of the property values in cite are there to override the settings from blockquote
p, and to ensure that the second paragraph??™s text is clearly distinguishable
from the quote itself. However, at this point, both paragraphs within the blockquote
element have the closing-quote background, so a final rule is required.
Pages:
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180