Рубрика: Веб-разработка » CSS »

Разные варианты CSS-макетов фиксированной ширины

Макеты практически на все случаи жизни с сайта trifler.ru

Особенности

  • Область контента - наиболее интересная часть сайта, идет по html-коду раньше всего, а header и горизонтальное меню по html-коду находятся в самом конце страницы.
  • Колонки равной высоты.
  • Все макеты имеют 100% высоту.

Иллюзия одинаковой высоты колонок центральной части достигается за счет использования стилевых правил для колонок центральной части:

  margin-bottom:-32767px;padding-bottom:32766px;

а для основного контейнера центральной части шаблона:

  overflow:hidden;

К сожалению, их использование имеет один существенный недостаток - перемещение по web-странице с помощью меток-якорей невозможно или работает некорректно. Как это обойти, описано в статье: "Абсолютное позиционирование и колонки равной высоты".

Просмотреть/скачать макеты trifler.ru

Трехколоночная разметка

Left Content Right

Content Left Right

Left Right Content

Двухколоночная разметка

Content Right

Left Content

Скриншоты и файлы некоторых шаблонов


Файлы на случай недоступности сайта trifler.ru:

Контент - левая - правая
clr_01
clr_02
clr_03
clr_04
clr_04a
Контент - правая
cr_03 - 2 колонки
Левая - контент - правая
lcr_04
lcr_05
lcr_06
lcr_07
Левая - правая - контент
lrc_02

Опубликовано в рубрике CSS | с метками . |

Еще записи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *