i thought styling some quote images around text can be quite simple but how wrong!

to simply add two quote images around some text. seems quite simple at first but turns out all the obvious solutions are not as desirable as a perfect solution:

See
http://www.0011.com/css/quote.html

basically, Style 1 is just inlining the image, text, and image.

Style 2 is using a table.

Style 3 is using images as background.

None of them actually is perfect... it seems so easy at first... anyone know a way to make it work at all? thanks.

 

Firstly it's a quote and it should be marked up as such:

<blockquote><p>
The big quote
</p></blockquote>

Obvious solution is to add a bg on the blockquote and a bg on the p, however, if multiple paragraphs are used there'll be multiple 99. Easiest solution would either be wrap the whole thing in a div and use the blockquote and div for anchors, or use a class on the last paragraph for the 99 and use the blockquote to do the 66.

Only benefit of doing inline is that you can use " for alt, so if images are disabled you can clearly see its a quote (and not just a paragraph of text that's emphasised). Not technically correct however.

 

hm, thank you rochow for your answer. i wonder, would this solution be the same as "Style 2" in the link that the ending quote can be at the lower right corner rather than near the ending text? (the ending text can be just one word on the last line, rather than near the right bottom corner.

 

http://www.matthewrochow.com/testimonials/

Exactly how I did it. Granted, I know that they're all one paragraph so I can get away with using the blockquote and p solely. For a clients site they may have 3 paragraph testimonials so I'd have to code it with that in mind.

 

thanks again rochow. your ninja logo is really funny. btw... i think i see the beginning quote but not ending quote on the page... i was mainly looking to make the ending quote work... do you know how that can be?

 

Oh, I must have taken it out (thinking back I think I changed my mind and just used the 1). On the paragraph, I positioned the background image "right bottom" and then added right padding.

blockquote {background:url(images/66.gif) no-repeat}
blockquote p {background:url(../images.99.gif) no-repeat right bottom;padding:0 20px}

Adjusting the padding to the image size and desired effect

 

Hi rochow... i tried again and uploaded to

http://www.0011.com/css/rochow.html

the style turned out exactly the same as the Style 2 I have. The ending quote is at the very bottom right corner of the block... I hope to have the ending quote next to the ending text. (and the text is from the database, so i don't know the text content beforehand).

 

Yep - It looks the same, however it's far more semantic (as a long quote should be wrapped in a <blockquote>)

Ahh. Well, the difference in this is because I have the cite in a paragraph (hence the two 99's). You can always set cite to display:block and put the 99 on that rather than the p. What exactly is the content? (Is it just a quote, or is there a name before/after it to?)

 

hm, the content can be anything a user enters through a form and stored in the database. so it can be of any length, and we are not showing the user's name at the end of the quote.

 

If I may interject a bit on typographic conventions:

In English, the blockquote, if delimited with quotes, will have an open quote at the start of each paragraph, and a close quote only at the end of the last paragraph. For that reason, put the leftquote.gif left top of each <p> in the blockquote. Use the rightquote.gif right bottom of the <blockquote>.

The <cite> is not the proper tag here. A cite should reference the actual document you're quoting. What you're doing is referencing the author. That requires the <address> tag. It should best be composed outside the blockquote itself.

Using your original code, rochow (I was betting on a shortened form of Polish, as in "Rochowski". ), here is a more typographically and semantically correct version. It is picking at nits, but …. :shrug:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
        

  <title>blockquotes</title>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/

  blockquote {
    background: transparent url(rightquote.gif) right bottom no-repeat;
    font-style: italic;
    margin: 0 40px;
    }

  blockquote p {
    background: transparent url(leftquote.gif) left top no-repeat;
    padding: 5px 18px;
    }

  blockquote.special {
    background-image: none;
    }

  blockquote.special p {
    background-image: none;
    text-indent: -20px;   /*width of image*/
    }

  blockquote.special p:before {
    content: url(leftquote.gif);
    }

  blockquote.special p:last-child:after {
    content: "\20" url(rightquote.gif);
    }
    

  /*]]>*/
  </style>
</head>

<body>
  <h1>Testimonials</h1>

  <div class="entry">
    <blockquote>
      <p>It’s only natural to be hesitant to work with someone on
      the other side of the world. After deciding to work with Matt
      though, I can say I couldn’t be happier! There was never a
      moment that Matt wasn’t readily available to discuss project
      details or work with me on my specific timeline. He was
      flexible when I threw a few kinks into the plan, and
      delivered exactly what I had hoped for after everything was
      said and done. If you are at all hesitant to work with Matt,
      give his services a chance and you will simply not be
      upset!</p>

      <address>
        Ross Baker
        <br />
        <a href="http://www.remixdesigninc.com/">RemIXdesign
        Inc.</a>
      </address>
    </blockquote>

    <p>Now as two paragraphs.</p>

    <blockquote>
      <p>It’s only natural to be hesitant to work with someone on
      the other side of the world. After deciding to work with Matt
      though, I can say I couldn’t be happier! There was never a
      moment that Matt wasn’t readily available to discuss project
      details or work with me on my specific timeline.</p>

      <p>He was flexible when I threw a few kinks into the plan,
      and delivered exactly what I had hoped for after everything
      was said and done. If you are at all hesitant to work with
      Matt, give his services a chance and you will simply not be
      upset!</p>

      <address>
        Ross Baker
        <br />
        <a href="http://www.remixdesigninc.com/">RemIXdesign
        Inc.</a>
      </address>
    </blockquote>
  </div>

  <p>Now moving the author info out of the quoted area:</p>

  <blockquote>
    <p>It’s only natural to be hesitant to work with someone on the
    other side of the world. After deciding to work with Matt
    though, I can say I couldn’t be happier! There was never a
    moment that Matt wasn’t readily available to discuss project
    details or work with me on my specific timeline.</p>

    <p>He was flexible when I threw a few kinks into the plan, and
    delivered exactly what I had hoped for after everything was
    said and done. If you are at all hesitant to work with Matt,
    give his services a chance and you will simply not be
    upset!</p>
  </blockquote>

  <address>
    Ross Baker
    <br />
    <a href="http://www.remixdesigninc.com/">RemIXdesign Inc.</a>
  </address>

  <p>To get the close quote to snuggle up to the text requires that
  the image be inline. Easy to do for modern browsers, a PITA for
  you know who.</p>

  <p>The image should be made with text line height in mind.</p>

  <blockquote class="special">
    <p>It’s only natural to be hesitant to work with someone on the
    other side of the world. After deciding to work with Matt
    though, I can say I couldn’t be happier! There was never a
    moment that Matt wasn’t readily available to discuss project
    details or work with me on my specific timeline.</p>

    <p>He was flexible when I threw a few kinks into the plan, and
    delivered exactly what I had hoped for after everything was
    said and done. If you are at all hesitant to work with Matt,
    give his services a chance and you will simply not be
    upset!</p>
  </blockquote>

  <address>
    Ross Baker
    <br />
    <a href="http://www.remixdesigninc.com/">RemIXdesign Inc.</a>
  </address>
</body>
</html>

Code (markup):

cheers,

gary

 

Ding ding ding, we have a winner

They (dads side of the family) think it is Polish, however one of them was Russian too and they weren't sure whether it was the guy or the girl that was the Russian one (great great great grandparents or something). That side of the family aren't much into family trees.

What's the purely presentational <br /> doing? It's fine if it goes inline with styles disabled, doesn't detract the meaning.

I dunno about using <address>.... you're the first person out of many (recognised) people who have said that using cite is incorrect. Address defines contact information, and while it IS contact information, it is also a who said it (a citation)

http://www.w3.org/TR/html401/struct/text.html

 

Ben Bacarisse just gave a super smart solution. I don't fully understand why the right quote image with the negative right margin won't be in the normal flow and get pushed down to a line all by itself yet, but I tried it in IE 6, 7, FF3, Chrome, Safari, and they all worked.

 

The margin doesn't do anything, I removed it in the firebug live edit thingy and it worked the same. Theory is that it's padded 22px on the right, and then the image is pulled back 22px outside of the flow.

 

the margin doesn't do anything? you mean it can be removed? without the padding in the div and the negative margin of that image, the image can wrapped to a newline all by itself. right now it will not.

 

In FF3 I removed it and it worked without it. May not be the case with other browsers.

 

when you remove it, and then add some characters to the line, won't the ending quote image display all by itself on a line? that is to be avoided.

 

I moved the browser window in and out and it didn't happen. Theory would suggest so though, I might have just got lucky.

 

I likely overstated my objection. As you've structured the content, the inline <cite> does not seem to me equivalent to the W3 example. (Yeah, I checked the specs on it and address before posting.)

It is my sense that <cite> is better suited for indirect or inline quotes. E.g.,

<p>It was <cite>Harry Truman</cite> who said, <q>The buck stops here.</q></p>

<p>It was <cite>Harry Truman</cite> who said something about kitchens and standing the heat.</p>

Code (markup):

Further, the <address> is a block level container itself, and doesn't need a wrapper.

in re: the <br />. It is a common convention to have the individual's name and the company name, or website in this case, on separate lines. That makes the <br /> a structural choice.

cheers,

gary

 

I only did it because on the sidebar every line would wrap and it'd look stupid, so starting the business name on a new line meant most wouldn't, so it was purely presentational. On all of my previous sites the name and url have been on the same line. I'm not sure of any rule/convention in English that says they should be on separate lines.

My problem with this is there is nothing to show that the address and blockquote are related. Which is also why the <cite> I have is inside the blockquote, rather than outside of it wrapped in a paragraph.

 

No rule that I know of, but by convention I mean it's a common practice that other people know how to interpret. Look at the way people address memos, or sign things. It's name, position, company, each on its own line.

cheers,

gary