CSS Blockquote
Perusing blogs tonight, I ran across this block:
…you laughin at me? YOU LAUGHIN AT ME?!!
Is is simply CSS for a blockquote container! Here is the code:
.quote {
font: italic .9em georgia, serif;
background: #f4f2e4 url(../../quotesBrown.gif) no-repeat -4px -3px;
border: 1px solid #c7bfab;
text-indent: 30px;
padding: 10px;
color: #69614d;
}
on 
on 
on 
on 
November 21st, 2005 at 7:39 pm
You should use something more semantically correct.
blockquote {
padding: 0;
margin: 0;
background:url(../img/s2.jpg) bottom right no-repeat;
}
blockquote .name {
font-weight: bold;
color: #fff;
padding-top: 15px;
padding-left: 15px;
height: 15px;
background:url(../img/s1.jpg) top left no-repeat;
}
blockquote p {
padding: 15px;
padding-top: 0px;
margin: 0;
}
November 22nd, 2005 at 5:42 pm
I guess I have to look up what that means!
I understand the word “semantics”, but I need to learn what it means with respect to CSS. As soon as I do, I will edit post!
November 13th, 2007 at 9:35 am
[...] People like to use the style of a big background image of quotes when designing a layout for blockquotes. It’s a very nice method, and makes it obvious as to what you are reading. However, it’s hard to get the quotes all around the blockquote without extra markup. Some sites just open with the left-side quotes and never close. Some sites use the method of the quotes smooshed together in the upper left-hand corner. Some sites get them at the beginning and the end, but they rely on a background image for the upper left-hand corner in the blockquote area, and the closing <p> tag to put the finishing touch in the bottom right-hand corner. Some even do it without images. [...]