Оформление цитат

bob_24 · September 12, 2011

Нужно левую кавычку поднять чуть выше.

Если задаю картинке отрицательный отступ, то ничего хорошего не выходит. Добавить сверху padding (по аналогии с закрывающей кавычкой) не дает результата - картинка пропадает за контент боксом.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
blockquote{
	width:400px;
	padding:0 20px 0 0;
	text-indent:-16px;
	background:#ebebeb url(right_quotes.png) no-repeat 100% 100%;
	}
blockquote:first-letter{
	padding-left:16px;
	background:url(left_quotes.png) no-repeat 0 -5px;
	}
</style>
</head>
<body>
<blockquote>Главная идея книги — индивидуализм. Способность человека оставаться самостоятельно мыслящим 
существом независимо от обстоятельств. Пусть все окружающие превращаются в покорное и послушное стадо,
кто имеет силу воли и цель — должен добиваться своего счастья. И такие люди в книге есть.</blockquote>
</body>
</html>

Vlad · September 12, 2011

Этот способ подойдёт?

http://htmlbook.ru/practical/tsitata

bob_24 · September 12, 2011

К сожалению IE 6, 7 не поймет. А почему с padding так: справа работает, сверху нет?

cyklop77 · September 12, 2011

чтобы паддинг заработал попробуй добавить display: block

(но не уверен)

Edited September 12, 2011 by cyklop77

bob_24 · September 13, 2011

Я тоже, кавычки изначально блочный элемент.

psywalker · September 13, 2011

К сожалению IE 6, 7 не поймет. А почему с padding так: справа работает, сверху нет?

Тогда вешай одну каттинку фон на цитату, а другую на обёртку какую нибудь.

Sign In

Оформление цитат

Question

bob_24

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

bob_24

Link to comment

Share on other sites

cyklop77

Link to comment

Share on other sites

bob_24

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information