Верстка книги

[Буллет]

Добрый день. Уже долго думаю, как сделать так, чтобы сверстать вот такой элемент сайта так, чтобы он был резиновым по высоте. Ну и соответственно текст внутри этой книги начинался сверху. Сама книга состоит из трех частей: верхней, средней (полоска высотой в несколько пикселей) и нижней.

Подскажите пожалуйста, как это сделать. Заранее благодарю.

[alexandr_v-vich]

Ну я думаю как..

вырежьте прямоугольник (вытянутый в горизонтали) небольшой из этой книги, захватывающий всю дину, но по высоте немного и не захватываю всякие элементы там, ну вот снизу кусок. По ширине полностью, по высоте чучуть.

Теперь див, ему вот этот вырезанный кусок в бэкграунд и repeat-x и height: auto;

В этот див ещё один (ну или текстовой какой-нибудь тег). Для него бекграунд, вот вашей книги и min-height с размером вашей книги.

Ну и всё, по-момему..

Edited March 18, 2012 by alexandr_v-vich

[Буллет]

Чет немного не понял.

Можете на примере показать?

[alexandr_v-vich]

<div id="base">
    <p>Красное и чёрное</p>
</div>

<style>
#base {
background: url("здесь полоска") repeat-y;
height: auto;
}
#base p {
background: url("здесь ваша книга") no-repeat;
height: здесь размер картинки с вашей книгой;
}
</style>

Примерно такая полоска

Edited March 18, 2012 by alexandr_v-vich

[Буллет]

Это какая-то фантастика.

Так не работает. Она не растягивается по высоте.

[alexandr_v-vich]

http://jsfiddle.net/KZFCA/36/

Вот идея

там уже доработайте. Размеры картинок, обрезка их правильная, тень снизу (убрать), позиционирование, ну уже разберётесь, да?

[Буллет]

Хорошо спасибо за такой, как мне кажется, странный способ. Чуть позже начну разбираться.

По окончанию отпишусь.

Edited March 18, 2012 by Буллет

[alexandr_v-vich]

А, и полоску такого типа используйте

Иначе, вся книга на двух заклёпках будет)

Edited March 18, 2012 by alexandr_v-vich

[Буллет]

alexandr_v-vich, спасибо. получилось.

http://jsfiddle.net/uGbRM/1/

Edited March 18, 2012 by Буллет

[alexandr_v-vich]

пожалуйста,

неплохо вышло)