Posts Tagged ‘html’

I figured I’d share two ways I’ve done blockquotes on this site.
Here is the HTML being used

<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet quam. Sed quis justo scelerisque dui iaculis euismod. Nunc sit amet lectus ac orci placerat pulvinar?</p></blockquote>


The first is from the original design the site had.

In this one I just use 2 images for the quotes, but no extra div for the closing quote, because I use the last-child pseudo-class.


blockquote {
margin:1.5em;
padding:5px 40px;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
background:url(images/quotation_marks.gif) no-repeat left 5px;
color:#717f53;
min-height:30px;
}
blockquote p:last-child {background:url(images/quotation_marks_close.gif) no-repeat right bottom;}/*css3*/


The second is the one I use on the site right now. Instead of using images, I just use the css content property and set the value to open-quote for the before pseudo-class and close-quote for the after pseudo-class. I also add css rounded corners for some extra styling.


blockquote p {
padding:10px;
margin:10px;
}
blockquote:before, blockquote:after {
display:block;
cursor:default;
line-height:1em;
font-weight:bold;
font-size:1.6em;
color:#000;
font-family:Georgia, 'Times New Roman', serif;
}
blockquote:before {
content:open-quote;
}
blockquote:after {
text-align:right;
content:close-quote;
}
blockquote {
margin:20px;
padding:10px;
border:1px solid #eee;
line-height:1.4em;
color:#918e95;
-moz-border-radius:5px; -webkit-border-radius:5px;/*css3 rounded corners*/
}


This CSS may not work in older-browsers, but if the blockquote is indented with a border or set to another color, it should stand out enough to be ok.