3 - The Joy of CSS
CSS is all about separating content from presentation and this is a great example of just that. Here's the code...
<blockquote>
<div class="quote">Frankly ..etc.. not scientific enough.</div>
<div class="author">Michael J. Davis**</div>
</blockqquote>
And here's the result...
Frankly, I've given up on Dawkins* because when it comes to religion he just isn't scientific enough.
Aw, ok. You need a bit of css, too...
blockquote {
margin:20px 50px;
width:450px;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size:150%;
background: #ccc url("../images/Open.jpg") no-repeat top left;
}
.quote {
padding: 20px 50px 0px ;
margin: 0;
background: url("../images/Close.jpg") no-repeat bottom right;
}
.author {
padding: 10px 20px 20px;
margin: 0;
border-top: 1px solid #bbb ;
font-size:80%;
background: url("../images/Bottom.jpg") no-repeat bottom ;
}
margin:20px 50px;
width:450px;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size:150%;
background: #ccc url("../images/Open.jpg") no-repeat top left;
}
.quote {
padding: 20px 50px 0px ;
margin: 0;
background: url("../images/Close.jpg") no-repeat bottom right;
}
.author {
padding: 10px 20px 20px;
margin: 0;
border-top: 1px solid #bbb ;
font-size:80%;
background: url("../images/Bottom.jpg") no-repeat bottom ;
}
Thanks to Dan Cederholm for this concept. Buy his book "Web Standards Solutions" for a more robust version and many other stonking ideas.
* Professor Richard Dawkins, Charles Simonyi Chair in the Public Understanding of Science at the University of Oxford.
** Christian & Management Consultant, Springbank Lane, Rochdale.
