How to style these blockquotes

**drtanz** · Apr 18, 2011 08:44

Hi I would like to know what is the best way to style this blockquote, considering also I will have multiple paragraphs in the blockquote, in order to display a text-based (via CSS3 fonts) quote pair at the beginning and end of the blockquote. Thanks

ImageShack® - Online Photo and Video Hosting

**Paul O'B** · Apr 18, 2011 12:06

Hi,

It depends on what browser support you want but for modern browsers (ie8+) you could do something like this (which was taken from an old thread on here).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p {
    margin:0
}
blockquote {
    width: 40%;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size:120%;
    line-height:1.35;
    position:relative;
    padding-left:3em;
    padding-right:3em;
}
blockquote.rt {
    float:right;
}
blockquote.lft {
    float:left;
}
blockquote p:before, blockquote p:after {
    content: "“ ";
    font-size: 300%;
    font-weight: bold;
    color:#FE9D00;
    line-height:0;
    vertical-align:bottom;
    margin-left:-.2em;
}
blockquote p:after {content: "”";margin:0}
</style>
</head>
<body>
<blockquote class="lft" >
    <p>Vampires are roumored to rather drink blood than beer.&nbsp;</p>
</blockquote>
<blockquote class="lft" >
    <p>Some phrase that is long enough to wrap for  at least  
        two lines and then have the quote at the END of the
        last line but not off bellow  or by itself.&nbsp;</p>
</blockquote>
</body>
</html>

Smashing magazine has a load of other examples.

**drtanz** · Apr 19, 2011 04:43

I have modified the code slightly and got it working well, but how can I position the double quotes to be in line with the text as in the screenshot (http://img687.imageshack.us/i/socialy.png/)? And have that first line of the first paragraph indented to make space for the opening double quotes.

Thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p {
    margin:0
}
blockquote {
    width: 40%;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size:120%;
    line-height:1.35;
    position:relative;
    padding-left:3em;
    padding-right:3em;
}
blockquote.rt {
    float:right;
}
blockquote.lft {
    float:left;
}
blockquote:before, blockquote:after {
    content: "\201C";
    font-size: 300%;
    font-weight: bold;
    color:#FE9D00;
    line-height:0;
    vertical-align:bottom;
    margin-left:-.2em;
	padding-right: 10px;
}
blockquote:after {content: "\201D";margin:0;}
</style>
</head>
<body>
<blockquote class="lft" >
    <p>Vampires are roumored to rather drink blood than beer.&nbsp;</p>

    <p>Some phrase that is long enough to wrap for  at least  
        two lines and then have the quote at the END of the
        last line but not off bellow  or by itself.&nbsp;</p>
</blockquote>
</body>
</html>

**Paul O'B** · Apr 19, 2011 05:06

Hi,

The code I gave you was already doing what you wanted so just copy the format and apply the styles to the first and last p elements in the blockquote. We could use first-child and last-child but Ie8 doesn't like that in combination with the other pseudo classes so just add a class to each p instead (I assume that you are able to add classes as required).

e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p {
    margin:0 0 1em
}
blockquote {
    width: 40%;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size:120%;
    line-height:1.35;
    position:relative;
    padding-left:3em;
    padding-right:3em;
}
blockquote.rt {
    float:right;
}
blockquote.lft {
    float:left;
}
blockquote p.first:before, blockquote p.last:after {
    content: "\201C";
    font-size: 300%;
    font-weight: bold;
    color:#FE9D00;
    line-height:0;
    vertical-align:bottom;
    margin-left:-.2em;
    padding-right: 10px;
}
blockquote p.last:after  {
    content: "\201D";
    margin:0;
}
</style>
</head>
<body>
<blockquote class="lft" >
    <p class="first">Vampires are roumored to rather drink blood than beer.&nbsp;</p>
    <p class="last">Some phrase that is long enough to wrap for  at least  
        two lines and then have the quote at the END of the
        last line but not off below  or by itself.&nbsp;</p>
</blockquote>
</body>
</html>

**drtanz** · Apr 19, 2011 05:18

Thanks, the adding of class to the paragraph is not ideal though, I would like to find another solution to that if possible.

**Paul O'B** · Apr 19, 2011 07:20

You won't really be able to do it in IE8 without adding extra mark up as it doesn't understand last-child.

You could add an inner div and then do this which should work in IE8+ and will cater for 1 or more paragraphs as required.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p {
    margin:0 0 1em
}
blockquote {
    width: 40%;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size:120%;
    line-height:1.35;
    position:relative;
    padding-left:3em;
    padding-right:3em;
}
blockquote.lft {
    float:left;
}
blockquote div:before, blockquote div:after {
    content: "\201C";
    font-size: 300%;
    font-weight: bold;
    color:#FE9D00;
    line-height:0;
    vertical-align:bottom;
    margin-left:-.2em;
    padding-right: 10px;
}
blockquote div, blockquote p {
    display:inline
}
blockquote p:before {
    content:" ";
    display:block;
    margin:1em 0 0
}
blockquote p:first-child:before {
    content:"";
    display:inline;
    margin:0
}
blockquote div:after {
    content: "\201D";
    margin:0;
}
</style>
</head>
<body>
<blockquote class="lft" >
    <div>
        <p>Vampires are rumoured to rather drink blood than beer.&nbsp;</p>
        <p>Some phrase that is long enough to wrap for  at least  
            two lines and then have the quote at the END of the
            last line but not off below  or by itself.&nbsp;</p>
    </div>
</blockquote>
</body>
</html>

**Paul O'B** · Apr 19, 2011 07:24

Or you could remove the div and use an existing parent (although it amounts to much the same thing).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p {
    margin:0 0 1em
}
.parent {
    width:40%;
    padding-left:3em;
    padding-right:3em;
}
blockquote {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size:120%;
    line-height:1.35;
    position:relative;
}
blockquote.lft {
    float:left;
}
blockquote:before, blockquote:after {
    content: "\201C";
    font-size: 300%;
    font-weight: bold;
    color:#FE9D00;
    line-height:0;
    vertical-align:bottom;
    margin-left:-.2em;
    padding-right: 10px;
}
blockquote, blockquote p {
    display:inline
}
blockquote p:before {
    content:" ";
    display:block;
    margin:1em 0 0
}
blockquote p:first-child:before {
    content:"";
    display:inline;
    margin:0
}
blockquote:after {
    content: "\201D";
    margin:0;
}
</style>
</head>
<body>
<div class="parent">
    <blockquote class="lft" >
        <p>Vampires are rumoured to rather drink blood than beer.&nbsp;</p>
        <p>Some phrase that is long enough to wrap for  at least  
            two lines and then have the quote at the END of the
            last line but not off below  or by itself.&nbsp;</p>
    </blockquote>
</div>
</body>
</html>

**drtanz** · Apr 19, 2011 07:58

Excellent ideas thanks.

User Tag List

Thread: How to style these blockquotes

Thread Tools

Display

How to style these blockquotes

Bookmarks

Bookmarks

Posting Permissions