Announcement

**tracknut** · Sep 8, 2011, 09:32 PM

Try this:

Code:

<style type="text/css">
.quote	{display:inline;padding:0 5px}
</style>
</head>

<body>
<div style="position:relative;height:auto;width:80%;">
<p><img class="quote" src="lquote.gif">where quotes appear around words within a determined size div the quotes are lquote.png and rquote.png and 15px by 15px each
i want the left quote top left and the right quote bottom right<img src="rquote.gif"></p>
</div>
</body>

**nomanic** · Sep 9, 2011, 06:21 PM

I never thought of just making it inline!
thanks!

**VIPStephan** · Sep 9, 2011, 07:10 PM

I’d like to suggest another – more semantic – approach.
A quote as showcased above should actually be marked up as such, a blockquote, that is. With modern CSS techniques you can then add the quotes without additional HTML or images (or even with images if the quote font is non-standard or you need to support old browsers).

Code:

<blockquote>
 <p>Lorem ipsum dolor sit amet…</p>
</blockquote>

CSS variant 1 (assuming there is only one paragraph in a quote):

Code:

blockquote p:before, blockquote p:after {
  content: "\201C";
  font: bold 20px Georgia, "Times New Roman", Times, serif;
  color: #999;
}
blockquote p:after {
  content: "\201D";
  font: bold 20px Georgia, "Times New Roman", Times, serif;
  color: #999;
}
/* you can play around with margins, too, to position them appropriately */

CSS variant 2 (if you have images; also for one paragraph in a quote):

Code:

blockquote {
  background: url(open_quote.png) left top no-repeat;
  padding-left: 30px;
}
blockquote p {
  background: url(close_quote.png) left bottom no-repeat;
  padding-right: 30px;
}

**teedoff** · Sep 9, 2011, 07:58 PM

lol OK I mistakenly suggested the <strong> tag was deprecated in another post, but I KNOW the blockquote tag is deprecated.

So should one really use a blockquote?

**VIPStephan** · Sep 10, 2011, 02:43 AM

Originally posted by teedoff View Post

lol OK I mistakenly suggested the <strong> tag was deprecated in another post, but I KNOW the blockquote tag is deprecated.

What?? In my six years as professional web developer I haven’t heard this. And it’s clearly defined in the HTML 4 specs. You may have confused it with this statement in the specs:

Originally posted by W3C

The usage of BLOCKQUOTE to indent text is deprecated in favor of style sheets.

(bold by me)

**Apostropartheid** · Sep 10, 2011, 08:56 AM

Originally posted by teedoff View Post

lol OK I mistakenly suggested the <strong> tag was deprecated in another post, but I KNOW the blockquote tag is deprecated.

So should one really use a blockquote?

HTML 4.01
HTML 5

Read them read them read them

**teedoff** · Sep 10, 2011, 10:35 AM

Directly from W3C

Deprecated
A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML.
User agents should continue to support deprecated elements for reasons of backward compatibility.

Definitions of elements and attributes clearly indicate which are deprecated.

This specification includes examples that illustrate how to avoid using deprecated elements. In most cases these depend on user agent support for style sheets. In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes. HTML presentational attributes have been deprecated when style sheet alternatives exist (see, for example, [CSS1]).

ANd yes again from W3C, as Stephan pointed out

The usage of BLOCKQUOTE to indent text is deprecated in favor of style sheets.

I wasn't trying to start an argument, and I certainly hope noone is getting defensive or argumentative. I'm merely trying not to: 1) confuse anyone else by replies I may or may have already answered, and 2) confuse myself.

The fact that the blockquote tag is "deprecated in favor of CSS", isn't that the very definition of "deprecated" and the very reason WHY they are deprecated in the first place: to separate content from presentational mark-up?

From W3C

The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to "center". The CENTER element is deprecated.

Different wording than the blockquote, but the word deprecated is used in both and when you click on the word deprecated in the center tag text, it goes to the same definition as my first quote from W3c above.

**Apostropartheid** · Sep 10, 2011, 12:58 PM

Originally posted by teedoff View Post

The fact that the blockquote tag is "deprecated in favor of CSS", isn't that the very definition of "deprecated" and the very reason WHY they are deprecated in the first place: to separate content from presentational mark-up?

It isn't, though. Blockquotes are used for marking up quotes which are separate from the main body (usually if the quotation is a paragraph or more), whilst qs are used for inline quotes.

For example, should I wish to quote the beginning of the Magna Carta, I would mark it up like so:

Code:

<p>What follows is the text of the Magna Carta.</p>
<blockquote>
  <p>EDWARD by the grace of God, King of England, Lord of Ireland, and Duke of Guyan, to all Archbishops, Bishops, etc. We have seen the Great Charter of the Lord HENRY, sometimes King of England, our father, of the Liberties of England, in these words: Henry by the grace of God, King of England, Lord of Ireland, Duke of Normandy and Guyan, and Earl of Anjou, to all Archbishops, Bishops, Abbots, Priors, Earls, Barons, Sheriffs, Provosts, Officers, and to all Bailiffs and other our faithful Subjects , which shall see this present Charter, Greeting. Know ye that we, unto the honour of Almighty God, and for the salvation of the souls of our progenitors and successors, Kings of England, to the advancement of holy Church, and amendment of our Realm, of our meer and free will, have given and granted to all Archbishops, Bishops, Abbots, Priors, Earls, Barons, and to all freemen of this our realm, these liberties following, to be kept in our kingdom of England for ever.</p>
  <ol>
    <li>First, We have granted to God, and by this our present Charter have confirmed, for us and our Heirs for ever, That the Church of England shall be free, and shall have her whole rights and liberties inviolable. We have granted also, and given to all the freemen of our realm, for us and our Heirs for ever, these liberties underwritten, to have and to hold to them and their Heirs, of us and our Heirs for ever.</li>
  </ol>
</blockquote>

However, if I were quoting only a bit of it inline with my own paragraph, I would mark it up like so:

Code:

<p>As for the Magna Carta, they said: <q>the Church of England shall be free, and shall have her whole rights and liberties inviolable.</q> Thus, the Church is wholly independent from the state.</p>

It is most definitely not deprecated as it has semantic meaning.

**VIPStephan** · Sep 10, 2011, 04:08 PM

And teedoff, just to clarify again the meaning of the sentence we both quoted: The practice of indenting text with the blockquote element is deprecated, not the element itself. You know, back in the days of table layouts and poor CSS support text that was supposed to be indented would be put into blockquote elements (especially earlier versions of WYSIWYG editors did that). Nowadays this approach is deprecated because blockquote is not made to indent text (you should indeed use CSS for that, e. g. margins or padding) but to mark up a quote as Apostropartheid explained above.

In fact, the blockquote element is the only semantically correct way to mark up quotes that form their own logical block.

**teedoff** · Sep 12, 2011, 09:59 AM

Stephan, Apostro, I understand....Still a bit confusing though.

The fact that the powers that be have been pushing for years the concept of content and style being two wholly separate entities and should be kept separated seems contradictory in light of the "definitions" given for the term "deprecated" as seen in the above text quoted from W3C itself. And when one simply does a search for "deprecated html elements", W3C doesn't even show up as a main resource for such information. Instead, if you were to view this page for instance, the lines are very blury as to what the truth is and what the not so true is.

I know the W3C is THE site for all things html/css, but you can see how ppl get confused by the above link. They ALL say deprecated in favor of CSS...... although the one for blockquote says deprecated in favor of margins WHEN used for text indenting. I DO see the difference.

Anyway, again thanks for the clarification and again I apologize for any misinformation and confusion on this topic.

Announcement

quotations in css, anybody help?

quotations in css, anybody help?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment