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

[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

[rus]

Цена вопроса?

[Radik_45]

Я не прошу готовое решение, - я написал "просто кому интересно".

P.S. Это не задача откуда то или кому-то, я сформулировал частый вопрос, нужный просто для себя

Edited October 19, 2010 by Radik_45

[Great Rash]

Прекратите создавать одинаковые темы в разных разделах форума!

[rus]

Я не прошу готовое решение, - я написал "просто кому интересно".

P.S. Это не задача откуда то или кому-то, я сформулировал частый вопрос, нужный просто для себя

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

[psywalker]

А я не понял вторую задачу, смотри.

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

Особенно меня интересует вот эта часть "где Z - это X-P"

Объясни подробно, а лучше нарисуй.

[SelenIT]

Если я правильно понял, во второй задаче требуется, чтобы целый кусок фона был внизу. Тогда она тривиально решается через background-position: 0 100%.

[psywalker]

Если я правильно понял, во второй задаче требуется, чтобы целый кусок фона был внизу. Тогда она тривиально решается через background-position: 0 100%.

Странно, хотелось-бы услышать ответ автора по этому вопросу.

[Radik_45]

psywalker, SelenIT - Мужики!

—

Если я правильно понял, во второй задаче требуется, чтобы целый кусок фона был внизу. Тогда она тривиально решается через background-position: 0 100%.

- Нет немного не так)) Сейчас я зарисую, все понятно будет))

[psywalker]

Отлично, а ruby on rails можно использовать, я просто на нём могу зафигарить тебе)

[Radik_45]

Тьфу, блин!! Тысячу извинений.. Там не Z=Х-Р, а просто background-image: -P px (X-P это если с конца). Я думаю на картинке смысл ясен, - что должно быть (сделал специально иллюстрацию - думаю так виднее).

_______

Со второй частью задачи - впринципе все и так ясно, можно и не смотреть,

меня самое сложное интересует - в первой части задачи - как этот div пристроить туда (остаток с другим фоном)

Отлично, а ruby on rails можно использовать, я просто на нём могу зафигарить тебе)

Блин.. скорее нет к сожалению..., (я не работал с ним вообще так только примерно знаю про него). Можно JS библиотеки использовать - но тоже желательно mootools, jquery, чтобы еще каких других не подгружать.

Edited October 19, 2010 by Radik_45

[psywalker]

Отлично, а ruby on rails можно использовать, я просто на нём могу зафигарить тебе)

Блин.. скорее нет к сожалению..., (я не работал с ним вообще так только примерно знаю про него). Можно JS библиотеки использовать - но тоже желатель mootools, jquery, чтобы еще каких других не подгружать.

Блин жаль, а то бы я Рустамычу бабла заплатил бы, он бы нам сбацал несколько вариантиков на ruby

[Radik_45]

Ну я уже говорил - что готового решения не прошу, и у самого есть желание позамарачаваться, - тут впринципе основной вопрос только интересует - как этот див - (остаток с другим фоном) - туда запихнуть? Я не думаю что там что-то грандиозно сложное.

Edited October 19, 2010 by Radik_45

[psywalker]

Ааа, смотри, в общем задача такова вторая. Блок фиксированной высоты. Главный контейнер с фоном наверху, всегда одной высоты. А нижний должен под него подстроится, с фоном, так?

[Radik_45]

Прекратите создавать одинаковые темы в разных разделах форума!

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

Ааа, смотри, в общем задача такова вторая. Блок фиксированной высоты. Главный контейнер с фоном наверху, всегда одной высоты. А нижний должен под него подстроится, с фоном, так?

Да так! Но только Верхний - Резиновый(зависит от контента), А Нижний - Фиксированный, - и вот фон фиксированного должен подстроится под фон резинового.

Да это в принципе ерунда, там В общем то понятно, высоту P можно просто из getElementById взять

Edited October 19, 2010 by Radik_45

[psywalker]

Да так! Но только Верхний - Резиновый(зависит от контента), А Нижний - Фиксированный, - и вот фон фиксированного должен подстроится под фон резинового.

Да это в принципе ерунда, я уже понял, высоту P можно просто из getElementById взять

Ага, понятно, а вверху фон какой длины вообще? Т.е. в плане что произойдёт с фоном например, если верхний резиновый контейнер будет 1000пк высоты? Он вообще повторяется или нет?

[Radik_45]

Ага, понятно, а вверху фон какой длины вообще? Т.е. в плане что произойдёт с фоном например, если верхний резиновый контейнер будет 1000пк высоты?

Ага, молодец, подкавырку нашел. (потом впринципе тоже надо будет глянуть). Но именно для этой задачи этого не нужно - так как подразумевается что этот Верхний Резиновый Контейнер не будет больше оригинального изображения в нем (только один цикл) (т.к. его высота вычисляется на основе предыдущей задачи, а высоты изображений - для id=main, id=bottom одинаковые (не высоты блоков а высоты именно изображений бэкграундов))

Что касается повторяется или нет - можно оба случая рассмотреть, хоть как background-position: -P px, даст нужный резултат, хоть верхний резиновый контейнер будет даже 1000рх

Edited October 19, 2010 by Radik_45

[psywalker]

Так, тогда вроде-бы всё ясно, если что, то потом ещё спрошу.

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

[Radik_45]

Спасибо большое! У меня тоже уже идеи впринципе начали появлятся (по поводу первой части задачи), мож и реализую (если получится) - выложу и свой вариант.

[SelenIT]

По второй задаче: и всё-таки, какие темные силы мешают тупо взять целую картинку и положить ее фоном на весь общий контейнер верхнего и нижнего блоков, с привязкой к низу?

По первой задаче: как-то так?

Edited October 19, 2010 by SelenIT

[Radik_45]

Да отлично! Именно так и нужно

Все ведь элементарно просто, я так и думал впринципе - все их позиционировать.

SelenIT, валидацию проходит. У меня только в ИЕ6 почему-то не правильно отображает - в остальных вроде все отлично

[psywalker]

SelenIT

Дружище, а объясни плиз сдедующие вещи:

1) div.parentNode.clientHeight - вот это что запись значит?

2) window.onload = window.onresize = document.onkeyup - и вот эта

[Radik_45]

По второй задаче: и всё-таки, какие темные силы мешают тупо взять целую картинку и положить ее фоном на весь общий контейнер верхнего и нижнего блоков, с привязкой к низу?

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

[SelenIT]

psywalker, 1) высота содержимого родителя элемента div, 2) присваивание по цепочке справа налево — значение св-ва document.onkeyup (ссылка на функцию) присваивается св-ву window.onresize, а затем уже это значение (та же самая ссылка) присваивается window.onload (по сути просто экономия строк).

Radik_45, да, под IE6 специально я не подгонял. Он не поддерживает min-height (для него через хаки надо height подсовывать) и с прозрачными png-шками в нем швах. Но "допилить" под него совсем нетрудно.

[psywalker]

psywalker, 1) высота содержимого родителя элемента div, 2) присваивание по цепочке справа налево — значение св-ва document.onkeyup (ссылка на функцию) присваивается св-ву window.onresize, а затем уже это значение (та же самая ссылка) присваивается window.onload (по сути просто экономия строк).

Понял, спасиб

[Radik_45]

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

Хах, уже порвали в хлам - спасибо SelenIT.

Я помню после далеких институтских лет у меня была одна очень хитрая нерешенная задачка по матанализу, я просто голову над ней тогда сломал, потом у скольких преподов спрашивал (из них со стажем в институте, хорошие математики) тоже не смогли решить, Задал вопрос на форуме (специализированном по математике) - думал они щас мозгами блеванут, На следующий день зашел, - поразился - они ее в мясо порвали, - даже несколькими способами решили и разные варианты обсудили без меня)), - я офигел просто - кандидат наук мне ее решить не могла))!!

Кстати - да, даже помню что за сайт - это были дневники diary.ru, - сообщество по математики.

Edited October 19, 2010 by Radik_45