Problem beim Auffinden von <blockquote>-Bildern um das Zitat herum mit CSS

Question

Auf diese Seite Ich versuche, die Bilder um das Blockzitat herum zu positionieren, aber sie lassen sich nicht richtig einfügen.

Dies ist das 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;
}

Ich möchte, dass die Bilder im Idealfall die gleiche Größe haben. Ich möchte nur, dass der Text die Bilder nicht mehr überlappt. Ich habe versucht, die Breite der .blockquote als 500px angeben, aber es schien keinen Unterschied zu machen.

Jede Idee ist willkommen. Danke - Tara

Answer 1

Zwei Dinge:

1. Um die Bilder dahinter zu sehen Text zu sehen, sollten Sie nicht ein Hintergrundfarbe für den inneren Absatz angeben; machen Sie sie transparent stattdessen.
2. Die angegebene Auffüllung wird aufgrund einer anderen Eigenschaft nicht angewendet ( .entry p ), die spezifischer ist. Sie könnten dieses Blockquote-Padding einstellen auf !important aber das ist im Allgemeinen nicht empfehlenswert. Eine andere Möglichkeit ist, diese Option spezifischer zu gestalten als die andere ( .entry p ) durch Hinzufügen der .entry Klasse. Beachten Sie, dass nur Blockquotes mit einer übergeordneten .entry Klasse wird auf diese Weise ausgewählt. ( mehr Informationen zur Spezifität )

Die 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;
}

Answer 2

Versuchen Sie, diese Eigenschaft hinzuzufügen:

.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;
}

Es gelang mir, Folgendes zu erhalten:

Ich hoffe, das hat geholfen (:

Answer 3

Je nach Browserunterstützung, die Sie benötigen, können Sie es auch ohne Bilder versuchen, indem Sie CSS verwenden:

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;
}

En vivo Beispiel hier (Nur mit Firefox und Chrome getestet)