Задачка по верстке

[Radik_45]

Есть такая задачка по верстке (просто кому интересно):

--

1-1

Есть див (фиксированной ширины, см. рис. id="main") высотой Y (высота динамическая зависит от содержимого) заполнен повторяющимся по вертикали background-image (высота изображения бэкграунда = X).

Необходимо:

- если Y кратно Х - (делится без остатка) то высоту id="main" оставить какая есть (т.е. Y)

- если Y/X - дает остаток (т.е. будет смотреться так, что торчит не полностью кусок бэкграунда), необходимо чтобы этот "кусок" (остаток в px) имел другой фон.

Задача: Найти и реализовать такое решение (можно использовать впринципе - все js, php, вставлять дивы если нужно, и даже <img/>) но: решение должно быть обязательно - валидным, кроссбраузерным(включая IE6-8), и не в коем случае (визуально) ничем не должно перекрываться содержимое блока "main".

См. рисунок, думаю впринципе все понятно, если что-то нет, дообъясню.

--

1-2

(На основе предыдущей задачи).

Есть див (фиксированной ширины и высоты, id="bottom") заполнен повторяющимся по вертикали background-image.

Необходимо "сдвинуть" изображение бэкграунда вверх, т.е. background-position: -P px; (остаток фона) из предыдущей задачи.

Edited October 19, 2010 by Radik_45

[Radik_45]

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

Белыми линиями - очерчено Изображение (его оригинальная высота) которое является фоном для основного контейнера (id=''main'')

И еще один момент (не дописал там), - если сделать нижний блок (тот который остаток) - во всю длину своего изображения (как обсуждалось в этом посте) (а не вычилять высоту блока как остаток), то будет следующая неувязка: при изменении высоты id="main" верхнего блока, если контент будет выходить за высоту "цикла" на 1-2 пикселя - будет "торчать" большое брюхо длиной Х-1 пиксель, - а если наоборот (контент ровно впишеться в N-количество повторов изображения фона) - то нижние маленькие блоки - будут вплотную примыкать к верхнему блоку id="main"

Edited October 20, 2010 by Radik_45

[SelenIT]

Да уж, ох и намудрил дизайнер, ох и намудрил

А слоями порезать это дело (нижний слой - деревяшка с прижатием к низу, средний слой - цепи, верхний - колечки, которыми цепи оканчиваются, два верхних слоя — прозрачные PNG) никак не получится?

[Radik_45]

Да уж, ох и намудрил дизайнер, ох и намудрил

Хахах)) это точно, но на практике то могут и не такие заморочки встретится

А слоями порезать это дело (нижний слой - деревяшка с прижатием к низу, средний слой - цепи, верхний - колечки, которыми цепи оканчиваются, два верхних слоя — прозрачные PNG) никак не получится?

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

А что касается разбития по слоям - помойму будут те же яйца только в профиль - ведь тогда и цепи нужно будет зацикливать и подстраивать чтоб они не "резались" внизу

[Radik_45]

Хотя впринципе есть и другой тогда путь решения: прижать к низу фон у нижних маленьких блоков и у верхнего блока (у него сместив на высоту маленького блока - прокатит даже если высота маленького - резиновая, просто через getelementbyid будешь брать ее), а цепи - два боковых слоя высота которых будет кратна высоте изображения - "Х". - Но помойму это те же яйца.

[psywalker]

Всё же тоже хочется внести свои 5 коппек. Такой вариантик сообразил

http://psywalker.ru/Forum/BG/Y-X/1.html

В ИЕ6 пашет вроде)

[Radik_45]

psywalker: Здорово! Спасибище. Пашет во всех браузерах, валидацию тоже проходит

Edited October 20, 2010 by Radik_45

[psywalker]

psywalker: Здорово! Спасибище. Пашет во всех браузерах, валидацию тоже проходит

Да не за что, самому интересно было