HTML/CSS/Text/quote — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
| |
Текущая версия на 08:17, 26 мая 2010
Содержание
Center Callout
<!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" media="Screen">
* .callout {
display: block;
width: 300px;
margin: 20px auto;
padding: 6px;
position: relative;
left: 0%;
color: black;
background-color: pink;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 6px solid black;
border-bottom: 6px solid black;
}
</style>
</head>
<body>
<span class="callout">Centered Callout!</span>
</body>
</html>
Create quote with float: right
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div {
width: 400px;
}
div,h1,p {
border: 1px solid #000000;
margin: 5px;
}
p#pullQuote {
float: right;
width: 100px;
}
</style>
</head>
<body>
<div id="page">
<h1>Heading One</h1>
<p id="pullQuote">a pull-quote.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in neque.
Etiam condimentum, dui sed sodales tristique, libero tellus bibendum felis, vel
malesuada lacus mauris eget dui. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in neque.
Etiam condimentum, dui sed sodales tristique, libero tellus bibendum felis, vel
malesuada lacus mauris eget dui. Quisque condimentum volutpat sem. Nunc dictum.
Morbi elit lacus, ultricies faucibus, adipiscing non, sollicitudin ut, arcu.
Curabitur cursus odio eu felis. </p>
</div>
</body>
</html>
Creating pull quotes in CSS
<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>Creating pull quotes in CSS</title>
<style type="text/css" media="screen">
blockquote {
background: url(quote-open.gif) 0 0 no-repeat;
margin: 2.4em 2em;
}
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;
}
cite {
background: none;
display: block;
text-align: right;
font-size: 1.1em;
font-weight: normal;
font-style: italic;
}
blockquote>p+p {
background: none;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Article heading</h1>
<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. 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 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. 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. this is a test. this is a test.
</p>
<blockquote>
<p>This is the quote. This is the quote. This is the quote.
This is the quote. This is the quote. This is the quote.
This is the quote. This is the quote. This is the quote.
This is the quote. This is the quote. This is the quote.
This is the quote. This is the quote. This is the quote.
This is the quote. </p>
<p><cite>First Name</cite></p>
</blockquote>
<h2>This is the heading 2</h2>
<p>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. 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. 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>
<h3>This is the level 3</h3>
<p>this is a test. this is a test. this is a test. this is a test. </p>
</div>
</body>
</html>
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>
Quote with thick border
<!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>A Web page</title>
<style type="text/css" media="Screen">
p {
font-family: Georgia, serif;
font-size: 13px;
color: red;
padding-left: 25px;
}
.quote {
width: 100px;
font-family: Arial, sans-serif;
color: white;
font-size: 18px;
padding: 5px 15px;
margin-left: 70px;
border-left: 5px solid white;
border-right: 5px solid white;
}
</style>
</head>
<body>
<p class="quote">"A quote about something, displayed in black."</p>
</body>
</html>
Right Floating Callout
<!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" media="Screen">
* .callout {
float: right;
width: 200px;
padding: 6px;
margin: 10px 30px 10px 40px;
position: relative;
top: 10px;
background-color: pink;
border-left: 1px solid red;
border-right: 1px solid red;
border-top: 6px solid black;
border-bottom: 6px solid black;
}
</style>
</head>
<body>
<span class="callout">Wraps under and over</span>
</body>
</html>
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.gif) 0 0 no-repeat;
margin: 2.4em 2em;
}
blockquote p {
background: url(quote-close.gif) 100% 90% 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>