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

Плюсы

• Есть прижимающийся к полу футер
• Колонки меню растягиваются по 100% высоте
• Колонок может быть сколько душе угодно
• Колонки могут быть как лево- так и правосторонними, а также совмещенными, например 2 справа и 1 слева
• Ширина как резиновая, так и фиксированная
• Критический минимум хаков
• Не используется Javascript
• Не используются бекграундовые изображения для создания эффекта колонки
• Никаких таблиц
• Одинаковый результат в ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 (Если у вас не работает в каком-то браузере — отпишитесь, пожалуйста, в комментах. Исправим и приведем к универсальному виду)

Минусы

• Есть несколько «лишних» блоков. (Я бы и сам рад от них избавиться)
• Есть несколько абсолютно-позиционируемых блоков

Возможно ли на странице по екшену сохранить содержимое DIVа в картинку или pdf?

Учитывая, что там convas с графиком…

Всем заранее спасибо!

p.s. PHP,IIS

Сегодня, верстая один макет, я, кажется, изобрел очередной небезынтересный способ вертикального выравнивания блока относительно родительского. Он не основан на превращении блоков в ячейки таблицы и не использует css-свойство position.

Требования

— Должна быть известна начальная высота родительского блока;
— Дочерний блок может иметь произвольный размер как по высоте, так и по ширине.

Возможности

— Работает в IE6+, O9+, FF2+, webkit;
— Тру vertical-align выравнивание со всеми допустимыми значениями;
— Одинаковое поведение во всех браузерах (незначительные отклонение при некоторых условиях в ие6 будут оговорены ниже);
— При вырастании дочернего блока выше «папочки», родительский блок расширяется;
— Ни грамма Javascript.

Сегодня в процессе верстальных боев с браузерами я столкнулся с такой непонятной проблемой: если в растянутом на 100% по вертикали div`е расположить другой div с указанными вертикальными margin`ами, то эти отступы почему-то влияют на родительский div (он сползает вниз).
Каюсь, использовал широкоизвестный, но при этом не очень правильный прием для растягивания div`а по вертикали. Но не думаю, что это именно он так повлиял на поведение «правильных» браузеров.
Кстати, «неправильные» ИЕ5.5, ИЕ6, и ИЕ7 показывают всё именно так, как мне хотелось :)
И, что самое смешное, в «правильных» браузерах всё встаёт на свои места при назначении border`а на родительский div.

В качестве примера, иллюстрирующего поставленную задачу, могу привести вот этот топик: Миниатюрное приложение-калькулятор. Особенность, которую должен учесть верстальщик, заключается в следующем: окно с приложением обычно не растянуто на весь экран (зачем, например, разворачивать на весь экран калькулятор или софтфон?), но при этом размер окна может меняться пользователем, причём меняться очень даже произвольно, вплоть до полного экрана.

Итак, возникла производственная задача: необходимо расположить на страничке шапку фиксированной высоты, а всё остальное место заполнить контейнером с возможностью появления полосы прокрутки в случае большого количества контента в нём. Т.е. должна прокручиваться не страничка, а див (а-ля аська, в шапке кнопочки, в контейнере контакт-лист). Казалось бы, задача тривиальная, решается с кандачка (у дива высота 100% и каким-то образом вычесть из неё фиксированную высоту шапки). Ан нет, час битья лбом о клавиатуру ничего не принёс.

Задача: менять горизонтальное положение блочных элементов по линейной зависимости при изменении размера окна браузера.
Решение: термин «пропорциональность» подразумевает линейную зависимость двух параметров. Вспоминаем школьный курс геометрии: линейная зависимость — это прямая, её уравнение выглядит следующим образом: Y=aX+b. Для построения уравнения прямой необходимо и достаточно знать координаты двух точек, принадлежащих этой прямой. Если принять за Y горизонтальное положение блока, а за X — ширину окна, то задача сводится к определению параметров a и b.

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

Сначала пошёл ошибочным путём: основной DIV с контентом — 100% по высоте, а хидер и футер спозиционированы абсолютно. Выглядит нормально во всех браузерах, но в ИЕ6 вылезал косяк — при динамической смене контента (через javascript) футер оставался на своем месте, т.е. не перемещался вслед за кромкой окна. Поэтому сделал так: DIV с основным контентом, DIV-футер с отрицательным margin-top, DIV-хидер с абсолютным позиционированием. Нарисовался очевидный плюс данного способа: основной контент страницы в HTML-коде максимально приближен к началу документа.

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

Т.е. в DIV`е-контейнере, есть 3 дива, левый, центровой и правый(прижатый всегда к правой стороне). В левом диве, находится артикул товара, в правом находится цена. А в центре - Описание и текст.

Можно всё это организовать таблицей, но хотелось бы попробовать дивами.

Привет всем) Долго я ждал этого блога, и вот, наконец напишу первый вопрос в него)
Есть скрипт всем известный — lightbox. Сделал окно, какое мне надо, протестил, все работает ок. Выкладываю на сервак, вот что вижу…