Проблема с поиском <blockquote>изображений вокруг цитаты с помощью CSS - PullRequest
Новая
       2

Проблема с поиском <blockquote>изображений вокруг цитаты с помощью CSS

3 голосов
/ 30 апреля 2011

Вкл. на этой странице Я пытаюсь расположить изображения цитаты вокруг цитаты блока, но они не будут расположены правильно

Это 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;
}

Я хочу, чтобы в идеале размер изображений был одинаковым. Я просто хочу, чтобы текст перестал перекрывать изображения. Я попытался указать ширину .blockquote как 500px, но, похоже, это не имело никакого значения.

Любые идеи приветствуются. Спасибо - Тара

Ответы [ 3 ]

3 голосов
/ 30 апреля 2011

Две вещи:

  1. Чтобы увидеть изображения позади текст, который вы не должны указывать цвет фона для внутреннего абзаца; делать это transparent вместо.
  2. Указанный отступ не применяется из-за другого свойства (.entry p), которое является более конкретным. Вы можете установить для этого отступа blockquote значение !important, но это, как правило, не рекомендуется, другой вариант - сделать его более конкретным, чем другой (.entry p), добавив класс .entry. Имейте в виду, что таким образом будут выбраны только цитаты с родительским классом .entry. ( подробнее о специфике )

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;
}
1 голос
/ 30 апреля 2011

Попробуйте добавить это свойство: 

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

Мне удалось получить следующее:

Sample output

Надеюсь, что помогло (:

0 голосов
/ 19 октября 2015

В зависимости от необходимой вам поддержки браузера вы можете попробовать ее без изображений, используя 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 пример здесь (Проверено только на Firefox и Chrome)

...