In my previous post I had a quote and I wanted that to stand out from the text. So I added <blockquote>...</blockquote> around my text and with CSS added a dashed line but something was missing... So I made a quote mark. But it didn't look that nice inside the border. I wanted it outside the border. In order to get that I have to have an element around the quote div. And I wanted an end quote as well so that meant another div...
<div class=outerQuote>
<div class=centerQuote>
<blockquote>
...
</blockquote>
</div>
</div>
Not particularly pretty, certainly not semantic code and mixing content and presentation like this is so Web 1.0... But I recently read about JQuery, a lightweight framework that makes it really easy to manipulate the DOM.
I won't bother with the details on downloading, installing and setting up JQuery, it's really easy and very well explained already, but I thought I might share the code for making my quotes:
$("blockquote").wrap('<div class="outerQuote"><div class="centerQuote"></div></div>');
There, that wasn't very hard, was it? In plain English it is "find a blockquote and wrap it in the two divs specified". In my source, I only have one <blockquote> element, only JavaScript enabled clients will see the other divs and it degrades nicely. Perfect!
For the interested, here is the CSS used for the quotes:
blockquote {
margin: 0 0;
padding: 0 5px 0 5px;
border: dashed 1px #666;
}
.outerQuote {
margin: -10px 20px -10px 20px;
background: url("quote.png") no-repeat;
}
.centerQuote {
padding: 10px 10px;
background: url("quote-end.png") no-repeat bottom right;
}
The images are quote.png and quote-end.png.
According to their own website, JQuery is...
...a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
If you do any javascript programming you should really check it out, it will make your life easier! (see how nice my quotes turned out 
)
The JQuery code, the CSS code and the two quote images presented here are created by me and hereby released into the public domain. That means you can take them and do whatever you want with them. If you'd like to give me credit or drop me a note saying that you found it usefull, that would be appreciated but is not required.
The rest of the text is copyrighted by me and is not released into the public domain but released under a Creative Commons license.