Недавно понадобилось сверстать резиновый трёхколоночный макет с высотой 100% и колонками одинаковой высоты. К моему удивлению, это оказалось не очень простым делом: вместо планируемого получаса это заняло намного больше времени.

Требования к макету:

  • кросс-браузерность (куда без неё);
  • минимальная высота: 100% (полное окно, независимо от высоты контента);
  • минимум кода;
  • все три колонки должны быть одинаковой высоты;
  • никакого JavaScript.

Далее

29
Июнь
2008

Гуляя по Internet, совершенно случайно натолкнулся на статью "Стили CSS - центрируем объекты по центру веб-страницы".

Первой мыслью было, что автор начнёт рассказывать про вертикальное центрирование и всем известный margin: 0 auto. Но не тут-то было, всё гораздо интереснее :-) Далее

1
Апр
2008

Очередной раз попав не туда, куда надо из Google, я натолкнулся на статью "Трехколоночный макет на CSS с одинаковой высотой колонок". Да, трехколоночные макеты (да еще и резиновые!) очень популярны, я смотрю :-) Но, несмотря на популярность таких макетов, многие верстальщики почему-то не хотят учиться и городят целый огород на div'ах. Далее

22
Март
2008

Прогуливаясь по Internet в поисках неизвестно чего, я набрёл на статью годичной давности, в которой приводится рецепт по созданию легко изменяемого макета фиксированной ширины. Далее

18
Март
2008

В последнее время так называемая "резиновая вёрстка" (aka liquid layouts) становится всё более популярной, и далеко не последнюю роль в этом играет постоянное увеличение разрешения мониторов. Одним из часто применяемых шаблонов является двухколоночный (одна колонка имеет фиксированную ширину, другая является "резиновой"). Существует несколько разных подходов к вёрстке многоколоночных шаблонов, некоторые подходы приведены на A List Apart: Creating Liquid Layouts with Negative Margins и Multi-Column Layouts Climb Out of the Box. Второе решение, на мой взгляд, более элегантное; но как бы там ни было, оба решения являются, по сути дела, лишь частными случаями шаблона, когда колонки могут иметь свои границы, отступы и т.п. Конечно, расчет всех параметров не является особо сложным, но почему-то многие разработчики предпочитают не утруждать себя лишними вычислениями, а использовать вложенные div, что не очень-то хорошо, ибо такие элементы не несут особой семантической нагрузки. А с появлением IE8 beta (которая альфа) расчеты усложнились, ибо IE8 довольно-таки криво считает координаты элемента с отрицательными границами. Поэтому мы попытаемся найти Универсальное кросс-браузерное решение для двухколоночного резинового шаблона. Далее

15
Март
2008