#css #quote
#css #Цитата
Вопрос:
На этой странице я пытаюсь расположить изображения цитаты вокруг цитаты блока, но они не помещаются правильно.
Это 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, но, похоже, это не имело никакого значения.
Приветствуются любые идеи. Спасибо — Tara
Комментарии:
1. В быстрой игре с Firebug я получу желаемые результаты, если: А) увеличу левое заполнение тега blockquote как минимум до 40 пикселей и Б) отключу
padding: 0;
вкл..entry p
Ответ №1:
Две вещи:
- Чтобы увидеть изображения за текстом, вам не следует указывать цвет фона для внутреннего абзаца; сделайте это
transparent
вместо этого. - Указанное заполнение не применяется из-за другого свойства (
.entry p
), которое более специфично. Вы могли бы задать для этого заполнения кавычки в блоке значение!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. Так намного лучше! Спасибо 🙂
Ответ №2:
Попробуйте добавить это свойство:
.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;
}
Мне удалось получить следующее:
Надеюсь, это помогло (:
Ответ №3:
В зависимости от необходимой вам поддержки браузера, вы можете попробовать это без изображений, используя 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;
}
Пример здесь в реальном времени
(Протестировано только в Firefox и Chrome)