Разметка Div - Повторяющееся изображение help

Question

Я пытаюсь получить часть основного контента моего веб-сайта, который будет обернут в этом стиле ноутбука.

Однако на основной части контента у меня есть повторяющееся изображение, которое иногда срезается на полпути через изображение и не выглядит правильным, есть ли у кого-нибудь идеи о том, как исправить это либо в Photoshop, либо с помощью CSS?

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

Вот сайт с примером того, что происходит, благодаря:

http://www.seth-duncan.com/Test/Notebook/notebook.html

Answer 1

Ваш образец URL выглядит хорошо для меня, но я думаю, что я знаю, о чем ты говоришь. Мне кажется, что вам нужно сделать, это заставить div notebookContent на высоту, которая является следующей кратной высотой изображения связующего. В JQuery, это было бы что-то вроде:

$(document).ready(function() { 
    var height = $('#notebookContent').height(); 
    var offset = height % 24; 
    if(offset) 
     $('#notebookContent').css('min-height', height + 24 - offset); 
}); 

Answer 2

Если вы хотите использовать повторяющееся изображение в качестве фона, вы должны использовать

div {line-height: 24px; /* equal to the height of the image */ 
    } 

, а затем все других образов (в вашем случае content-Top.png и content-Bottom.png) должны быть кратными этому изображению, или линии, высоте. Проблема, с которой вы столкнулись, заключается в том, что нижнее изображение имеет высоту 31 пиксель, верхнее изображение - 41px, а повторяющееся изображение - 24px. Эти высоты не собираются хорошо зацепляться.

Javascript может решить эту проблему, но вам, возможно, будет проще просто редактировать изображения, чтобы они имели общие высоты.

Я думаю, что <br /> равно одной строке-высоте, а отступы/поля между <p> тегами должны быть скорректированы так, чтобы они были равны одному (или целому краю) высоты строки для сохранения темы.

A List Apart имеет хорошую статью по этому виду вещей здесь: http://www.alistapart.com/articles/settingtypeontheweb.

Кроме того, потому что иногда я просто не могу остановить себя (ах, бессонница, мой старый враг ...), я починил демо-страницы для вас, с помощью CSS на странице для вашего perusing- удовольствие: http://www.davidrhysthomas.co.uk/so/notebook.html