Blockquotes are html elements that are meant to designate when a particular section of text is being taken from another website or other source. Different browsers have different built-in styling for blockquotes, often just a simple left margin. If you use a lot of quotes, as bloggers often do, it is a good idea to take control of this element and give it some CSS style!
A popular technique is to put large graphical Quotation marks at the upper left and lower right of the blockquote area. In these pre-CSS3, non-multiple-background days, there is no good way to do this without a little extra HTML. The easiest technique is to add a <span> element along with the <blockquote> element. Not ideal, but it works. You can apply most of the styling the blockquote element in your CSS and then set the second background image with the span. Upper left and lower right respectively.
I have thried 3 kind of block quotes on my site. The second and third, I use because the first doesn’t work.
CSS
In the style.css is the following section:
blockquote {
font-size: 13px; line-height: 22px; margin-bottom: 10px;
margin-top: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #999;
}
blockquote p {
margin: 0;
}
#style2 {
font-size: 13px; line-height: 22px; margin-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}
#style4 {
font-size: 13px; line-height: 22px; margin-bottom: 10px;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(http://luxetdies.nl/afb/openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
POSTS
With the blockquote tag <blockquote>Citation</blockquote> the result is poor:
Only with Safari, when you choose for “READER”, the styles of Through the Lens are not used and the blockquotes become visible:
He led the way in under the huge branches of the trees. Old beyond guessing, they seemed. Great trailing beards of lichen hung from them, blowing and swaying in the breeze. Out of the shadows the hobbits peeped, gazing back down the slope: little furtive figures that in the dim light looked like elf-children in the deeps of time peering out of the Wild Wood in wonder at their first Dawn.
<blockquote id=”style2″>Citation</blockquote> works fine:
He led the way in under the huge branches of the trees. Old beyond guessing, they seemed. Great trailing beards of lichen hung from them, blowing and swaying in the breeze. Out of the shadows the hobbits peeped, gazing back down the slope: little furtive figures that in the dim light looked like elf-children in the deeps of time peering out of the Wild Wood in wonder at their first Dawn.
<blockquote id=”style4″>Citation</blockquote> works as well:
He led the way in under the huge branches of the trees. Old beyond guessing, they seemed. Great trailing beards of lichen hung from them, blowing and swaying in the breeze. Out of the shadows the hobbits peeped, gazing back down the slope: little furtive figures that in the dim light looked like elf-children in the deeps of time peering out of the Wild Wood in wonder at their first Dawn.