Div Layout — справка по повторяющимся изображениям

Question

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

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

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

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

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

css photoshop html liquid-layout

1

Seth Duncan 4 Июл 2009 в 02:59

Я зашел на страницу, и изображение не выглядело «обрезанным». Возможно, вы столкнулись с проблемой, связанной с браузером. Я использовал Firefox 3.0.10. В каком браузере вы видите обрезание изображения? Кроме того, рассмотрите возможность сброса таблицы стилей, чтобы свести к минимуму различия между браузерами.

–

FOR

4 Июл 2009 в 03:12

Попробуйте посмотреть сейчас. На изображении сейчас явное обрезание.

–

Seth Duncan

4 Июл 2009 в 03:28

Я думаю, что вижу это сейчас. Вы имеете в виду место, где изображение «notebook-Content.png» «соединяется» с изображением «notebook-Bottom.png» внизу страницы? Хммм - раньше не решал такие проблемы, извините - если что-то придумаю, напишу.

–

FOR

4 Июл 2009 в 03:34

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);
});

1

chaos 4 Июл 2009 в 03:36

Я думал, что это должен быть какой-то обходной путь javascript, поэтому я ожидал чего-то подобного. Тот факт, что он использует jQuery, идеален, потому что это моя любимая библиотека javascript. Большое спасибо за решение. -Сет

–

Seth Duncan

4 Июл 2009 в 04:11

Просто будьте осторожны со стилем с JS, так как, если он отключен, все может пойти прахом.

–

Ian Elliott

4 Июл 2009 в 04:20

Answer 2

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

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

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

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

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

В A List Apart есть хорошая статья на эту тему: http: //www.alistapart.com/articles/settingtypeontheweb.

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

1

David Thomas 4 Июл 2009 в 23:17

Div Layout — справка по повторяющимся изображениям

2 ответа

Похожие вопросы

Новые вопросы

css