Форум Сайтостроение Веб-строительство

Как сделать вот такой вид цитаты в статье?

K1
На сайте с 15.11.2014
Offline
158
karen1994
765

Подскажите как вот такую выноску сделать в статьях????? Давно интересуюсь и присматриваюсь, а понять не могу(((

Первый пример увидел на great-world.ru а второй на alaev.info

Подскажите если не сложно):idea:

SK
На сайте с 10.05.2008
Offline
108
SHoKKiNG
#1

просто в css прописать, как оформлять цитаты (blockquote)

можно с этих сайтов и скопировать оформление, раз нравиться)

правой кнопкой - исследователь элемент

HostiQ - Хостинг, который радует (http://goo.gl/jTd7hf)
K1
На сайте с 15.11.2014
Offline
158
karen1994
#2
SHoKKiNG:
просто в css прописать, как оформлять цитаты (blockquote)
можно с этих сайтов и скопировать оформление, раз нравиться)
правой кнопкой - исследователь элемент

Так и сделал, но у меня на сайте не отображается(

[Удален]
#3

В смысле, "не отображается"? Скопировали посто кусок html кода со страницы или кусок кода + css? В шапке прописано каким css файлом страница регулируется, он тоже доступен. Надо два файла, страница и каскад, не один.

Lord Maverik
На сайте с 15.04.2003
Offline
471
Lord Maverik
#4
karen1994:
Так и сделал, но у меня на сайте не отображается(

Обратитесь тогда к верстальщику.

/ru/forum/webmasters-jobs/design

RedMall.Ru (https://redmall.ru) - Товары из Китая (Таобао, Tmall) с проверкой качества, скидка для форумчан 7% Партнерская программа 2 уровня: 5% + 5%. Подробнее. (https://redmall.ru/about/partner/)
Staid
На сайте с 30.07.2014
Offline
59
Staid
#5

karen1994, примерно так:

CSS


.quote{padding: 15px 20px 15px 50px; background: #cceaff url('quote.jpg') 15px 15px no-repeat; border-radius: 10px;}

HTML


<div class="quote">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

#cceaff - цвет заливки, цвета можно брать отсюда

quote.jpg - иконка цитаты, искать тут

Результат: http://jsfiddle.net/xuepazzo/

[Удален]
#6

Если уж через css делаем, то логичнее вовсе без имиджей обойтись, а голым кодом прописать "иконку", например, так.

Ragnarok
На сайте с 25.06.2010
Offline
239
Ragnarok
#7

загуглите "оформление цитат css"

//TODO: перестать откладывать на потом
K1
На сайте с 15.11.2014
Offline
158
karen1994
#8

Спасибо все за помощь)))

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий