Pro HTML5 and CSS3 Design Patterns

CHAPTER 19 ■ CALLOUTS AND QUOTES

Inline Block Quote

HTML

<h1>Inline Block Quote</h1>

<p>This quote is embedded in a paragraph, but looks like a block quote.

<span class="blockquote"><span>

An inline block quote is marked up with inline elements, but looks like a

block quote because its elements are rendered using <code>display:block</code>.

<br /> <br />I embedded a decorative span in this example to display

a graphical closing quote.

<cite>Pro HTML5 and CSS3 Design Patterns</cite></span></span> </p>

CSS

.blockquote { display:block; width:500px; margin:10px auto;

position:relative; left:0%; text-align:justify;

line-height:1.3em; color:black;

padding-top:40px; padding-left:40px;

background:url("dq1.jpg") no-repeat top left white; }

.blockquote span { display:block;

padding-bottom:20px; padding-right:40px;

background:url("dq2.jpg") no-repeat bottom right; }

.blockquote cite { display:block; text-align:right; font-size:0.9em; }