CODEWITHSUNDEEP
cssquote
Tara
Tara

Reputation: 1598

Problem Locating <blockquote> Images Around Quote With CSS

On this page I'm trying to position quote images around the block quote but they won't sit right.

This is the CSS:

    blockquote {
    padding-left:10px;
    color:#444;
    font-style: normal;
    width: 500px;
    background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
  padding: 0 100px;
  background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}

I want to keep the images the same size ideally. I just want to make the text stop overlapping the images. I tried specifying the width of the .blockquote as 500px but it didn't seem to make any difference.

Any ideas would be welcomed. Thanks - Tara

Upvotes: 3

Views: 1049

Answers (3)

Ezequias Dinella
Ezequias Dinella

Reputation: 1306

Depending on the browser support that you need, you can try it without images, using CSS:

blockquote {
  padding: 0;
  margin: 0;
  border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
  color: #ccc;
  font-size: 4em;
  line-height: 0;
  height: 0;
  vertical-align: -0.5em;
  display: inline-block;
}
blockquote:after {
  content: "”";
  margin-left: 0.05em;
}
blockquote:before {
  content: "“";
  margin-right: 0.05em;
  margin-bottom: -0.5em;
}

enter image description here

Live example here (Tested on Firefox and Chrome only)

Upvotes: 0

floorish
floorish

Reputation: 718

Two things:

  1. In order to see the images behind the text you should not specify a background color for the inner paragraph; make it transparent instead.
  2. The specified padding is not applied due to another property (.entry p) which is more specific. You could set this blockquote padding to !important but that's generally not recommended, another option is to make this one more specific than the other (.entry p) by adding the .entry class. Be aware that only blockquotes with a parent .entry class will be selected this way. (more info about specificity)

The css:

blockquote {
  padding-left: 10px;
  color: #444;
  font-style: normal;
  width: 500px;
  background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}

.entry blockquote p {
  padding: 0 100px;
  background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}

Upvotes: 3

Vern
Vern

Reputation: 2413

Try adding this property:

.entry p {
    margin: 5px 5px 5px 15px;
    padding: 0px 40px 0px 0px;
    line-height: 20px;
    font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
    font-size: 13px;
}

I managed to get the following:

Sample output

Hope that helped (:

Upvotes: 1

Related Questions