Using classes and CSS overrides to create an alternate pull quote : quote : Text HTML CSS TUTORIALS


HTML CSS TUTORIALS » Text » quote »

 

Using classes and CSS overrides to create an alternate pull quote


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
<style type="text/css" media="screen">
blockquote {
    background: url(quote-open.gif0 0 no-repeat;
    margin: 2.4em 2em;
}    
    
blockquote p {
    background: url(quote-close.gif10090% no-repeat;
    padding: 0 33px;
    margin-bottom: 0;
}    
    
cite {
    background: none;
    display: block;
    text-align: right;
}    
    
blockquote>p+p {
    background: none;
}    
    
blockquote.floatRight {
    float: right;
    width: 150px;
    background: none;
    border-top: 5px solid #dddddd;
    border-bottom: 5px solid #dddddd;
    padding: 10px 0;
    margin: 0 0 2em 2.4em;
}
    
blockquote.floatRight p {
    text-align: center;
    background: none;
    padding: 0;
}    
</style>
</head>
<body>
  <div id="wrapper">
    <h1>Article heading</h1>
    <p>This is the first paragraph. this is a test.  this is a test.  this is a test.  
    this is a test. this is a test. this is a test. this is a test. 
    </p>
    <p>This is the second. This is the second. This is the second. This is the second. 
    This is the second. This is the second. This is the second. 
    This is the second. This is the second. This is the second. This is the second. 
    </p>
    <blockquote class="floatRight">
      <p>This is a quote which is floating. this is a test. this is a test. this is a test. 
      </p>
      <p><cite>First Name</cite></p>
    </blockquote>
    <h2>This is the header 2</h2>
    <p>This is a paragraph. This is a paragraph. This is a paragraph. 
    This is a paragraph. This is a paragraph. This is a paragraph. 
    This is a paragraph. This is a paragraph. This is a paragraph. 
    This is a paragraph. This is a paragraph. </p>
    <p>This is another paragraph. This is another paragraph. This is another paragraph. 
    This is another paragraph. This is another paragraph. This is another paragraph. 
    This is another paragraph. This is another paragraph. This is another paragraph. 
    This is another paragraph. This is another paragraph. This is another paragraph. 
    This is another paragraph. This is another paragraph. This is another paragraph. 
    This is another paragraph. This is another paragraph. This is another paragraph. </p>
    <h3>This is the headering</h3>
    <p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
    <h3>Habitant morbid</h3>
    <p>This is a test This is another test. This is a test.</p>
  </div>
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Text
» quote