Writing a Generic CSS Blockquote Class

People do odd things in an emergency and we all have stories of ludicrous situations in an emergency which we laugh afterwards, if we are still alive.

My favorite one is of the third mate of a merchant ship who, after a tremendous explosion and thinking his ship had been torpedoed, leapt naked from his bunk and jammed both his legs down one leg of his shorts, so immobilizing himself that he had to crawl out on deck on his hands and knees. Fortunately the explosion hadn't come from a torpedo but from a closely dropped depth charge.

D. Robertson, Survive the Savage Sea

sailboat by http://cemagraphics.deviantart.com

I wanted to post a funny paragraph from a paperback I've been reading. Since we had covered CSS blockquotes before, I went back to find out how to use that class with my quote. As it is, every blockquote gets an airplane but I had a boat to display. I must have assumed that the user would rewrite the background statements to fulfill their needs. This is a very easy change. But sometimes people just want to use things as is and have it work for them. So now, I am going to rewrite a more generic blockquote class without a background image - you can always add one if you desire using this post as a guide.

THE CSS

/* blockquote generic*/
div.post-body blockquote.gen img  { 
   float: left;  
   margin-right: 25px; 
}
 
div.post-body blockquote.gen span { 
   float: right; 
   margin-top: 5px;
   font-size: 13px;
   font-weight: normal;
   text-transform: uppercase;
   clear: both;
}

blockquote.gen p.first:before,  
blockquote.gen p.last:after {
   font-weight: bold;
   font-size: 4em;
   color: #909090;
}

/*MS repositioning upper quote*/
blockquote.gen p.first:before {
   /*push the upper quote down, line up with the text*/
   position: relative;
   top: 0.4em;
   /*to push the text away from the quote symbol*/
   padding-right: 0.2em;
 }

.post blockquote.gen {
   width: 490px;
   margin: 0px;
   padding: 18px 30px 30px;

   background-color: #d9e8fa;
   border-top: 5px solid #b29b81;
   border-bottom: 5px solid #b29b81;
   quotes: "\201C" "\201D";

   font-family: Calibri, sans-serif;
   font-size: 15px;
   color: #363636;
 }

 blockquote.gen p.first:before { content: open-quote; }
 blockquote.gen p.last:after   { 
    content: close-quote; 
    float: right; 
    padding-top:20px;
 }

 .post blockquote.gen p {
   margin: 0 0 0.75em;
 }          
 /* end of blockquotes */      

THE HTML

<blockquote class="gen">
<img src="images/tallship2.png" alt="" />
<p class="first">
People do odd things...... alive. </p>
<p class="last">My favorite one is of the ...... charge.</p>

<span>D. Robertson, <a href="#">Surviving the Savage Sea</a></span>
</blockquote>  

RELATIVE POSITIONING TO NUDGE THE QUOTE DOWN

Given the 4em font size, the first quote comes out rather large, producing a large line height to go with it. Since the text within the quote is in a much smaller font, we end up with a pretty large offset between the quote and the first letter of the text. The upper quote still looks decent but if you want to make it perfect, we can fix it using relative positioning.

HOW TO USE THE CLASS

Your markup will be very similar to the above. If you wish, you can change the background color from blue to a color of your choosing by rewriting the background color statement in the CSS and of course find a substitute for the image in the markup. Remember the filename and path "images/tallship2.png" are generic, you need to write your own URL.

The ship graphic used in the blockquote demo is by http://cemagraphics.deviantart.com