Pull Quote with font, border top bottom : q « Tags « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Tags » q 




Pull Quote with font, border top bottom
   



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
.pullQuote {
    float: right;
    width: 180px;
    margin: 0 10px 5px 10px;
    font: italic bold 110% Arial,Helvetica, sans-serif;
    padding: 10px;
    border-top: 10px solid #666666;
    border-bottom: 10px solid #666666;
}

</style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam non eros sed tellus mollis sodales. Nulla et pede eu est placerat ultricies. Integer est. Cras eu lorem quis augue scelerisque cursus. Sed fermentum. Praesent mattis, velit vel hendrerit egestas, turpis risus cursus velit, nec luctus turpis sem ac sapien.</p>
    <p class="pullQuote">"Lorem ipsum dolor sit amet, . Integer est. Cras eu lorem quis augue scelerisque cursus. Sed fermentum. Praesent mattis, velit vel hendrerit egestas, turpis risus cursus velit, nec luctus turpis sem ac sapien."</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam non eros sed tellus mollis sodales. Nulla et pede eu est placerat ultricies. Integer est. Cras eu lorem quis augue scelerisque cursus. Sed fermentum. Praesent mattis, velit vel hendrerit egestas, turpis risus cursus velit, nec luctus turpis sem ac sapien.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam non eros sed tellus mollis sodales. Nulla et pede eu est placerat ultricies. Integer est. Cras eu lorem quis augue scelerisque cursus. Sed fermentum. Praesent mattis, velit vel hendrerit egestas, turpis risus cursus velit, nec luctus turpis sem ac sapien.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam non eros sed tellus mollis sodales. Nulla et pede eu est placerat ultricies. Integer est. Cras eu lorem quis augue scelerisque cursus. Sed fermentum. Praesent mattis, velit vel hendrerit egestas, turpis risus cursus velit, nec luctus turpis sem ac sapien.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam non eros sed tellus mollis sodales. Nulla et pede eu est placerat ultricies. Integer est. Cras eu lorem quis augue scelerisque cursus. Sed fermentum. Praesent mattis, velit vel hendrerit egestas, turpis risus cursus velit, nec luctus turpis sem ac sapien.</p>
</body>
</html>

   
    
  














Related examples in the same category
1.Inline quotation
2.q:before {content:open-quote;}
3.q:after {content:close-quote;}
4.q {quotes: '"' '"';}
5.quotes for quote
6.Create quote with float: right
7.Using classes and CSS overrides to create an alternate pull quote
8.Creating pull quotes in CSS
9.Quote with thick border
10.Center Callout
11.Right Floating Callout
12.'q' Example
13.'cite' provides a URL for reference information to a borrowed quotation
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.