0
Welcome Guest! Login
0 items Join Now

SOLVED Blockquote Inside Articles

  • Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • Sorry, Yves! I just noticed your post. I still can't get the images to show up. I think my CSS is working though because the text is italicized.
  • Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • I've tried a few different types of CSS, including that which Yves suggested. Does anyone have any idea how I can get this to work? I'm stumped.
  • Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • OK...weird!! I finally got it working but I have no idea if it's the correct way or not :shock:

      Here's my CSS:
      blockquote {
      background-image: url(http://i192.photobucket.com/albums/z133/nintendonerds/open-quote.png);
      background-repeat: no-repeat;
      background-position: left 5px;
      padding-left: 30px;
      font-style: italic;
      }
      blockquote span {
      background-image: url(http://i192.photobucket.com/albums/z133/nintendonerds/close-quote.png);
      background-repeat: no-repeat;
      background-position: right bottom;
      display: block;
      padding-right: 30px;
      }

      Here's my HTML:
      <table style="text-align: center;" border="0" cellspacing="5" cellpadding="5" align="center">
      <tbody>
      <tr>
      <td style="text-align: justify;">Forget about chocolates and cupids on Valentine's Day! Dragon Quest VI:  Realms of Revelation will be released for the Nintendo DS in North  America on February 14th, 2011. Although released for the DS in Japan on  January 28th, 2010, North American fans will finally be able to savor  the newest installment of this Dragon Quest delight. The original Dragon  Quest VI actually dates back to December of 1995, when it was released  in Japan for the Super Famicom. So, get your "Happy Valentine's Day"  greetings knocked out early and find a comfortable spot because Dragon  Quest VI: Realms of Revelation is going to be a sweet treat you'll enjoy  for years to come.</td>
      </tr>
      </tbody>
      </table>
      <blockquote>
      <p style="text-align: center;"><span class="blockquote span">Don't be surprised if you're taking on the role of a hero trying to rescue and rid the world from evil. If you're a Dragon Quest fan, this is only to be expected.</span></p>
      </blockquote>
      <table border="0" cellspacing="5" cellpadding="5" align="center">
      <tbody>
      <tr>
      <td>Dragon Quest VI utilizes the classic turn-based attack system. And, like  the other Dragon Quest titles, much of your time is spent battling  monsters from around the world. Don't be surprised if you're taking on  the role of a hero trying to rescue and rid the world from evil. If  you're a Dragon Quest fan, this is only to be expected. Two different  worlds can be traveled between and explored; the Real World and the  Dream World. There's also an underwater realm in this game, which isn't  too frequently found in the Dragon Quest franchise. Personally, I think  this will be pretty exciting. How often does our hero get to battle  aquatic foes?! Anyway, the opening story shows you (the hero)  accompanied by some other party members riding on the back of a dragon  only to meet up close and personal with a demon named Murdaw. Now is  where the story gets interesting.</td>
      </tr>
      </tbody>
      </table>

      The article can be found here:
      dhoulmagus.nintendonerds.com/news/ds/ite...t-vi-how-i-love-thee

      I'm still going to style it a little better, but at least it works.

      My CSS looks awful when I verify it though :cry:
      jigsaw.w3.org/css-validator/validator?ur...vextwarning=&lang=en

      If someone could let me know if my HTML/CSS combination for the blockquote effect is correct, I would totally appreciate it. Also, if someone could help me get rid of my CSS errors that the validator references, I would appreciate it.

      EDIT: I made a small change to the gantry.css file. Is that a big deal??

      I had to change this:
      /* Typography */
      p {margin: 0 0 15px 0;}

      To this because it was creating extra space at the bottom of my blockquote:
      /* Typography */
      p {margin: 0 0 1px 0;}
    • JeffShinn's Avatar
    • JeffShinn
    • Sr. Rocketeer
    • Posts: 122
    • Thanks: 1
    • Software Engineer (BS CET/MS CS)

    Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • Sorry I couldn't get back to you sooner, massive client meeting yesterday that lasted far too long and then I just crashed. :mrgreen:

      You should be fine by just changing your CSS to the following:
      stylized-quotes {
      background-image: url(../images/open-quote.png);
      background-repeat: no-repeat;
      background-position: left 5px;
      padding-left: 30px;
      font-style: italic;
      }
      stylized-quotes span {
      background-image: url(../images/close-quote.png);
      background-repeat: no-repeat;
      background-position: right bottom;
      display: block;
      padding-right: 30px;
      }

      Hosting your images at Photobucket is sort of like a CDN I suppose, but I'm not sure it is the best option :)

      Try the above which points the background OUTSIDE the CSS directory and then into the proper IMAGES directory where you had moved them to.

      Hope that gets 'er done!

      Jeff
    • When someone is impatient and says, "I haven't got all day," I always wonder, How can that be? How can you not have all day?
    • JeffShinn's Avatar
    • JeffShinn
    • Sr. Rocketeer
    • Posts: 122
    • Thanks: 1
    • Software Engineer (BS CET/MS CS)

    Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • Oh, and by the way, get it working like what you want development-wise, then go through and fine tune the CSS for validation. Sometimes it is deprecated calls or unknown fancy attributes that get you.

      Jeff
    • When someone is impatient and says, "I haven't got all day," I always wonder, How can that be? How can you not have all day?
  • Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • Thanks for reminding me to change the URL for the images, Jeff. I was using the Photobucket URL when I was trying to get the images to show up. I changed my image URLs to "../images/open-quote.png" and "../images/close-quote.png" respectively and everything is working just fine :D

      How can I make the background of the blockquote area a different color, to set it apart?

      What about my CSS and HTML (above) though? Does this look OK?

      Also, I made a small edit to my gantry.css file. Is that OK that I did that?
    • JeffShinn's Avatar
    • JeffShinn
    • Sr. Rocketeer
    • Posts: 122
    • Thanks: 1
    • Software Engineer (BS CET/MS CS)

    Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • I don't think it would be too much of a problem with the gantry.css. Do you use FireBug for FireFox or Chrome? It makes doing those little edits on the CSS nice since you can test it in the browser and see how it will turn out.

      getfirebug.com/downloads

      They have the Lite version as well for browsers other than FireFox (like Chrome), and for FireFox you can also install Yahoo!'s YSlow to improve your site's responsiveness.

      As for the background...oops looks liek you got that going :cheesy:

      Jeff
    • When someone is impatient and says, "I haven't got all day," I always wonder, How can that be? How can you not have all day?
  • Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • Thanks for the quick response, Jeff! You beat me to my edit :D

      I'm using Firebug w/ Firefox. I'm not too familiar with it, but it definitely helps me out!

      Here's the current CSS I'm using:
      /*-------------- Blockquote CSS For Articles --------------*/
      blockquote {
      background-image: url(../images/open-quote.png);
      background-color: black;
      border: 1px dashed;
      border-color: inherit;
      color: #A25679;
      background-repeat: no-repeat;
      background-position: top left;
      padding-left: 40px;
      font-style: italic;
      font-weight: bold;
      }
      blockquote span {
      background-image: url(../images/close-quote.png);
      background-repeat: no-repeat;
      background-position: bottom right;
      display: block;
      padding-right: 40px;
      }
  • Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • Thanks for everyone's help on this! After spending quite a bit of time messing around with the CSS, along with everyone's advice, I was able to achieve what I wanted. Here's what I'm using:

      CSS (placed in template.css)::
      /*-------------- Blockquote CSS For Articles --------------*/
      blockquote {
      background-image: url(../images/open-quote.png);
      background-color: black;
      border: 1px dotted;
      border-color: inherit;
      color: #A25679;
      background-repeat: no-repeat;
      background-position: top left;
      padding-left: 40px;
      font-style: italic;
      font-weight: bold;
      font-family: helvetica;
      }
      blockquote span {
      background-image: url(../images/close-quote.png);
      background-repeat: no-repeat;
      background-position: bottom right;
      display: block;
      padding-right: 40px;
      }

      HTML (placed inside the article):
      <blockquote>
      <p style="text-align: center;"><span class="blockquote span">Don't be surprised if you're taking on the role of a hero trying to rescue and rid the world from evil. If you're a Dragon Quest fan, this is only to be expected.</span></p>
      </blockquote>

      Here's what it looks like:
      i192.photobucket.com/albums/z133/nintendonerds/blockquote.png

Time to create page: 0.066 seconds