SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to style these blockquotes

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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>

  5. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, the adding of class to the paragraph is not ideal though, I would like to find another solution to that if possible.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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>

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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>

  8. #8
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent ideas thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •