Бекграунд дива в зависимости от высоты и без скриптов

[Tokolist]

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

высота которого (дива) изменяется при изменении размеров окна (разрешения монитора).

Нужно сделать так, чтобы все было красиво

Я сделал это с помощью скриптов: поставил обработчик события onload, onresize и меняю класс дива в зависимости от его высоты (двох картинок хватает). Вариант, в принципе нормальный, но хотелось бы сделать без скриптов.

Без скриптов придумался такой вариант:

1. в див кладем еще один див, в которого бекграунд - небольшой прямоугольник цвета такого же как и цвет нашего дива и расположен в нижнем левом углу

2. позиционируем бекграунд по точным координатам, вместо left center

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

Был также другой вариант - более обьемный и не лучше первого, поэтому я даже его не привожу.

Есть ли другие варианты?

Спасибо.

[yopopt]

Честно говоря - не понял чего нужно такого сделать. Можно же сделать div с фоном и он будет сам увеличиваться и уменьшаться по тексту...

<div style="background: url(картинка) repeat-y top left;">
 <p>текст</p>
</div>

[Tokolist]

Честно говоря - не понял чего нужно такого сделать. Можно же сделать div с фоном и он будет сам увеличиваться и уменьшаться по тексту...

Обрати, пожалуйста внимание на скриншот.

То есть надо чтобы так было всегда (одинаково), НЕ зависимо от высоты слоя.

repeat-y там не подходит, к сожалению

[yopopt]

То есть фон должен быть всегда одной высоты?

[Tokolist]

То есть фон должен быть всегда одной высоты?

Нет. Ты не совсем правильно понимаешь...

Просто у этих "стрелочек" должно быть одинаковое растояние от верха слоя и от низа слоя.

И они нарисованы таким образом, что нужно (скорей-всего) именно изменение картинки при уменьшении высоты слоя...

Завтра выдру кусок кода и покажу, ибо счас мозги не варят

[yopopt]

Ну как вариант можно вырезать маленький кусочек этого рисунка(к примеру в 9px). Все его неровности сделать прозрачными. И для текста установить line-height:18px;. Тогда при изменении высоты блока будет прибовляться ровно два маленьких изображения.

<div style="background: url(картинка.гиф) repeat-y top left;">
 <p style="line-height:18px;padding-left:10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Ну а высоту сверху и снизу подрегулировать padding'ами и margin'ами

[Vlad]

Можно сверху (и снизу) накладывать рисунок, но не прямоугольный, а с вырезанным уголком под линии на фоне. Сам рисунок должен быть того же цвета, что и фон, а уголок прозрачным. Что-то вроде этого

| |

--

Тогда сохранится и структура - палок и сверху их не будет.

[yopopt]

to Vlad Так не получится, поскольку при наложении рисунка с уголком высота последней "клеточки"(рисунка) будет или увеличиваться или уменьшаться больше необходимого.

[strix]

1. в div кладем ещ? один див с фоном (косыми линиями)

2. задаем ему margin:10px 0px - относительно родительского у него будет отступ, что и надо

[yopopt]

to strix Пожалуйста, прежде чем писать, внимательно прочитайте тему.

[Tokolist]

2 All

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

_http://whativedone2007.narod.ru/

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

Можно также попробовать просто изменять размеры окна или же margin-right, если большие разрешения недоступны.

repeat-y не совсем подходит из-за особенностей макета (см. скриншот). Если сделать таким образом, то верхняя и нижняя черточка будет выглядеть не так как на макете

Вариант, предложенный Vlad очень хорош. Можно даже применить repeat-y. Сделал пример:

_http://whativedone2007.narod.ru/vlad/test.html

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

но тут (как уже также было сказано yopopt) можно корректировать все это с помощью margin, padding и line-height (line-height все-равно я устанавливаю, поэтому только нужно подобрать необходимое значение)

Но есть еще одно НО - юзверь может масштабировать шрифт.... ну и флаг ему в руки!

вариант со скриптами все-равно останется, но хотелось на будущее...

всем спасибо.

вроде это и есть наилучший вариант, но если есть еще, пожалуйста, поделитесь

тема пока не закрыта...