Бум

Студия Горбунова сделала прекрасный подарок, оставив висеть тестовое задание на закрытую вакансию. Впервые встретил на своем пути действительно необычное тз, выполнение квеста заняло несколько добротных вечеров, но в итоге я справился :)

Мой вариант верстки макета: http://test.dpetroff.ru/gshop/index.html

Корректно отображается в FF1.5+, opera 9.6+, chrome 3, chromium 4, safari 4, ie6+

За это время открыл для себя некоторые новые аспекты деятельности старых firefox, любых эксплореров, премудрости применения inline-block, opacity и активного внедрения javascript для контроля поведения страницы. Код несомненно можно шлифовать, но для тестовой задачи он вполне годится.

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

А еще я крестиком вышиваюмогу решать задачи в области flash и php программирования, ну или программирования вообще при наличии времени и документации, а также обладаю встроенным в мозг отладчиком.

Для того, чтобы растянуть фон блока визуально на высоту родительского блока обычно используется метод, основная суть которого заключается в следующем: родительскому блоку задается

.parent
{
   overflow:hidden;
}

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

.child
{
   padding-bottom: 37000px;
   margin-bottom: -37000px;
}

У этого метода есть недостатки, но тем не менее он очень полезен и удобен. Верстая очередной макет, обнаружил, что в опере это метод срабатывает, только если внутренние блоки - плавающие. Иначе колонки разгоняет по высоте несмотря на overflow: hidden;.
Соответственно, для починки нужно задать

.child
{
   float: left;
}

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

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