Wednesday, February 01, 2006

Stylizing a Quote box with CSS

I had to create a quote box the other day and decided I would try the nifty little CSS quote boxes you see on all those fancy CSS designers sites.  So I went googling for a tutorial and found one by Simon Willison called Quick top: Styling blockquotes with CSS.

Basically his tutorial has you create a blockquote and then nest a div inside of it.  The reason for this is because in the Blockquote you put a background image (your left quote) to stick in the upper left.  Within the div you stick a background image (your right ending quote) to the lower right.

His use of Blockquote as the container wasn't ideal in my opinion so replacing that with a div and giving it it's own class work just the same for me.

Here is my mark I used for the quote box.

<div class="quote">
    <div>
        The numbers vindicate&#8230;that children who are given clear behavioral 
standards and social skills, allowing them to feel safe, valued, confident, and 
challenged, will exhibit better school behavior and learn more to boot.<br/>
        <span class="quotesource">-NY TIMES Op-Ed, August 16, 2005</span>
    </div>
</div>
The CSS to add the background images.
.quote 
{
  background: transparent url(images/leftquote.png) left top no-repeat;
  
}
.quote div 
{
  background: transparent url(images/rightquote.png) right bottom no-repeat;
}
That'll give you a box with your quote images on both side and your quote in the middle.  All you need now is to give it your personal touch.

Here are my end results.


[image] Smiling Kid in class
The numbers vindicate…that children who are given clear behavioral standards and social skills, allowing them to feel safe, valued, confident, and challenged, will exhibit better school behavior and learn more to boot.
-NY TIMES Op-Ed, August 16, 2005
# Wednesday, February 1 2006 at 12:14 PM | Comments [2]
Tags:
Wednesday, February 01, 2006 4:53:59 PM (Eastern Standard Time, UTC-05:00)
hehe, I would've went the opposite direction and replaced the inner DIV with something...

[blockquote class="quote"]
[q]some text to quote[/q]
[cite]Travis[/cite]
[/blockquote]

...or if there were several items in the quote...

[blockquote class="quote"]
[p class="first"]a long quote[/p]
[p]a really long quote[/p]
[p class="last"]a really, really long quote[/p]
[cite]Travis[/cite]
[/blockquote]

...then my css would be:
.quote
{
background: transparent url(images/leftquote.png) left top no-repeat;
}

.quote q,
.quote .last
{
background: transparent url(images/rightquote.png) right bottom no-repeat;
}

Although I'm just guessing, I've never had to actually use those big quotes like that. You'd probably have to override the default styles for BLOCKQUOTE, Q and CITE. I kinda like using elements that match up with what they are (or at least come close).

Here's more info on BLOCKQUOTE/Q:
http://www.w3.org/TR/html401/struct/text.html#edef-BLOCKQUOTE
and CITE:
http://www.w3.org/TR/html401/struct/text.html#edef-CITE
and DIVitis:
http://en.wikipedia.org/wiki/Divitis
travis
Wednesday, February 01, 2006 6:49:56 PM (Eastern Standard Time, UTC-05:00)
Yeah when I had it as blockquote it was indented like blockquotes are by default...I just feel like overridding it and decided to go the easier route.
Ralph Whitbeck
Name
E-mail
Home page

Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, strike, strong, sub, super, u)  

Enter the code shown (prevents robots):

Blog Posts by:

Currently Viewable:

My Twitter Updates

View Twitter Page