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.
Does anyone else have trouble getting the quote image to appear? i have copied the html and css exactly as well as put the images in the correct directory. And for some reason, it just wont work in either IE7 or Opera. All the formatting worked the images just don’t show up.
I am sure i made some stupid mistake but i wanted to double check first.
very good thanks
hmm.. How about you use <blockquote><p>Some text here</p></blockquote> ?
I thought that was the way you were supposed to do it in XHTML?
There is actually a problem implementing your method when the image is bigger then the font, although this can be fixed by giving a bigger font, i think it’s not recommended. The other bigger problem i see is when the last letter is not in the end of the line so the last ending quote wont be near it. The best solution i could come up and it works in FF2 and IE7 is just use:
blockquote {
margin: 15px 15px 0 15px;
padding-right: 30px;
background: url(images/blockquote_end.gif) no-repeat bottom right;
}
blockquote p {
background: url(images/blockquote_start.gif) no-repeat top left;
padding-left: 35px;
}
so 2 images are used. But it would cause problems if there are 2 paragraphs in a 1 blockquote…
Nice, I’ve used this with other images then the quotes. Very good way to make something stand out.
hmm.. this method works. but what it doesnt work with
<blockquote><p> text here</p></blockquote>
any idea?
it’s cool, thank you for this site!
Will use on my site for sure.
How about you use
?
I thought that was the way you were supposed to do it in XHTML?
thanks will use this ..its great
with the element, specifying the language, you will obtain a more simplistic quote symbol. It is not as nice looking but it is coherent with accessibility principles and visual agents.
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;
}
testing
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;
}testing
kinda confuse here and im sort of novice with css.. where shoud i put my text on this code: 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;
}
Actually, I was looking for big double quote image at the end of para/quote.
it’s very interesting this site!!
Good sample, It’s require widely in community sites.
good
Is there a way to get the last comment to directly follow the lost word of the paragraph? I am trying to use this as a header on a page and I can’t get it to follow the last word. It goes to the end of the space and not the word?
Any thoughts?
reiozfy jmcegoi hnretja xvnosqi