This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.
1. HTML source code
Start with a blockquote and some text.
<blockquote>Hello, I am a double quote...</blockquote>
2. Specify blockquote
Specify blockquote element as follow:
blockquote {
font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
width: 400px;
background: url(images/close-quote.gif) no-repeat right bottom;
padding-left: 18px;
text-indent: -18px;
}
The CSS code above will display the close-quote.gif graphic background at bottom right corner. The padding-left and text-indent will create a hanging indent of -18px. It will look like this:
3. First letter of blockquote
Now add 18px left padding to the first-letter of blockquote. This will make the text align together. Then display the open-quote.gif at top left corner. Note I made the first letter in different font styles just to look nice.
blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}
Pullquote style
If you want to make a pullquote, simply specify the blockquote float left or right. View my pullquote sample.
Meh, I’d gladly discriminate against IE since usage is falling behind anyways…
Excellent and del.icio.us article you got there, Nick. Yes I bookmarked this tutorial :D
I’ve been looking for an easy way to do this for a while now… thanks for the tutorial! The first-letter code didn’t work for me for some reason, so I used Sam’s suggestion of utilizing the P tag, but now I get 2 open quotes in front of each separate paragraph… the close quote seems to be working fine though… I’ll try again!
wow, I want to know how to make a div section right in the center of the screen.Just like the ‘preview’ your page show.
thx
Very nice! :)
I’ve been using a much more complicated way of doing the same thing!
@ Mo-Mo:
As I said, try sticking
blockquote p ~ p { background: none; }in the css. That should do the trick. :)@Sam:
Thanks… that worked! I never used the “~” when I coded before, so I forgot to put that in. :D
Pretty cool but, don’t forget the (often overlooked) CITE attribute.
It should show where the blockquote came from. I know the problem is the browsers don’t give people a way do do anything with it but, that can be handled with a little js.
I made a demo/tutorial here on a hovering tooltip for the title and cite attributes
http://willcode4beer.com/tips.jsp?set=blockquoteHover
But, I am sure you could style it to look much better ;-)
Maybe you’re making things too complicated. For XHTML, a blockquote should include a block-level element, as seen here:
http://www.w3schools.com/tags/tag_blockquote.asp
So, you have two places for background images. If you put the opening quotes in the first paragraph, and put the closing quotes in the blockquote, you’ll be just fine in most cases.
@Sam: That technique does not work in IE6.
True Ed, but at least it’s valid. I’m sure you can target IE6 with some other fancy styling if you want. :)
great stuff!
Nothing works in IE6…..
I dont even remember how i reached your site but it doesnt matter, cause i’m so happy i found it, it really made me think, keep up the good work
It works in IE6.
The first-letter pseudo element is supported:
http://www.microsoft.com/technet/prodtechnol/ie/reskit/6/part3/c11ie6rk.mspx?mfr=true
Para ser feliz no se nesesita ser rico
Very good guide … delicious’ed and dugg accordingly :)
Thank You for this site! I mean the design is awesome! The bots and I will be regular visitors now!
Be well!
-LB
Nice and simple even with 2 images. But I guess the first image isn’t that necesary … maybe a background color would be much easier to use and faster to load and also would fit your site better :D
I always thought there would be an easy way of doing that. Very simple and clean.
Hi there, well i tried to do this in blogsome but doesn’t worked.. can someone help me?
thanks!