One very interesting debate among web design purists is how to best use CSS to represent quotes. In HTML, it is very simple to markup a block of text as a quote. Simply use the blockquote tag, like this:
<blockquote>The first step to getting the things you
want out of life is this: Decide what
you want.</blockquote>
Using CSS, we can assign a distinct look and feel to make the quote stand out from the text, like making it italic and maybe even indent it a little. A very common technique is to use an image as the quote symbol, and by setting it as the background of the block, we can have a rather nice effect, without any messy “img” tags.
I’ve created a custom quote image for the vSlider theme, and the CSS to use it, so the previous example would be rendered like this:
The first step to getting the things you want out of life is this: Decide what you want.
Now, the problem is that although this looks quite ok, it would be a lot nicer if we could also have the closing quote as well. And this is where the problems begin, since in CSS there is no way we can use two different images as backgrounds for the same block. If we could, it would be rather simple: the opening quote would be defined in the top left, and the closing quote on the bottom right. Since this is not possible, again we have one of those (unfortunately common) situations where we have to mix semantics and presentation. By adding a “div” tag, we can create a nested block with its own style and that can be used as a placeholder for the closing quote.
In the case of vSlider, I have defined this as a class named blockquote-inner. So, we can slightly change our previous example to:
<blockquote>
<div class="blockquote-inner">The first step to getting
the things you want out
of life is this: Decide what you want.</div>
</blockquote>
And the result would be:
The first step to getting the things you want out of life is this: Decide what you want.
Which looks a lot better, if I may say so. Uglier code, true… but nicer result 
If you are using the vSlider theme, you can give it a try.
Tags: CSS,Design,HTML,Tips 4 Geeks,Way of the web
4 Comments »
