Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts

    quotations in css, anybody help?

    hi

    could anybody help?
    i want to make a quote like this



    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
    but i want it to work equally well for a body of text as a single word, so say for instance if i absolutely position the quotes top left and bottom right it would work, but for a simple word like hello the quotes become miles apart

    so what i want is this
    <div style="position:relative;height:auto;width:80%;"><XXX>hello<YYY></div>

    so I have a wrapper, I need <XXX> and <YYY> that i can just shove round any body of text and get a quote
    anyone have any ideas?

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,311
    Thanks
    11
    Thanked 285 Times in 284 Posts
    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>

  • Users who have thanked tracknut for this post:

    nomanic (09-09-2011)

  • #3
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    I never thought of just making it inline!
    thanks!

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,728
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    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;
    }

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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?
    Teed

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,728
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    Quote 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:
    Quote Originally Posted by W3C

    The usage of BLOCKQUOTE to indent text is deprecated in favor of style sheets.
    (bold by me)

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote 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

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Last edited by teedoff; 09-10-2011 at 03:38 PM.
    Teed

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote 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.

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,728
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    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.

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed


  •  

    Posting Permissions

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