Просматривал один из видеокурсов по верстке сайта и разворачиванию его на CMS Joomla.

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

Конечно, можно сохранить где-нибудь этот видеоурок и просматривать его, если забыл какие-то моменты. Но показанный в нем прием мне так понравился, что я решил описать его сам, своими собственными словами. Более того, благодаря этому приему для меня “открылась” возможность работы с вложенными слоями. Оказалось, это достаточно простое и эфективное решение, которое можно применять при верстке на практике. И, как мне кажется, данное решение является 100%-но кроссбраузерным.

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

Как будем поступать. Выделить и вырезать фон из psd-макета не составляет проблем. Затем сохраняем выделенный фон в виде jpeg-файла. После этого нужно разрезать полученную картинку пополам. В результате получиться две части одного фона - верхняя и нижняя. Верхнюю разместим вверху страницы и закрепим там. А нижнюю часть поместим вниз сайта и сделаем так, чтобы она была постоянно прижата к нему. И так, выделили, разрезали и сохранили. Все у нас получилось.

Теперь начинается самое интересное. Будем создавать каркас сайта и в нем реализовывать нашу задумку. Но для начала набросаем схему-каркас сайта. Она очень проста и создана мною в качестве примера:

Смотрим и видим пять слоев на div’ах, которые вложены один в другой. Первый слой с классом .wrap является оберткой, на которую возложена задача центрирования страницы и задания ей определенной ширины. Второй слой с классом .fon-bot предназначен для размещения нем фонового изображения, в частности - нижней части фонового изображения сайта. В этот слой вложен еще один слой с классом .fon-top, в котором расположена в качестве фона верхняя часть картинки. И, наконец, самый последний и глубоковложенный слой - это будущий контент сайта с классом .content.

HTML-каркас создан. Теперь нужно прописать стили для него, чтобы он “ожил”. Делаю так:

Слой .wrap - тут все понятно без лишних слов. Далее - слой .fon-bot. В нем задается фоновая картинка, которая прижимается с помощью свойства background-position в правый нижний угол блока. Посмотрите на значения этого свойства: 100% 100%. Это как раз и задает фоновому изображению положение в правом нижнем углу. Фактически, теперь она будет постоянно прижата книзу блока .fon-bot, что нам и требовалось.

С точностью до наоборот поступаем с блоком .fon-top. Также устанавливаем для него фоновое изображение, но позиционируем его в левом верхнем углу с помощью значений 0 0. Теперь картинка будет всегда прижата кверху этого блока. Фактически, поставленная перед нами задача уже выполнена.

Но для наглядности в пример добавлен еще один, пятый блок .content. На практике он выполняет функцию контейнера для всего содержимого страницы сайта. Вставим внутрь этого слоя фоновое изображение и зададим ему минимальную высоту, которая превышает высоту блоков .fon-top и .fon-bot в сумме (точнее - высоту фоновых картинок обоих слоев). Также отцентруем фоновую картинку блока .content.

В итоге получим следующий результат (чтобы пример веселее смотрелся, в качестве фоновых картинок вставил красоток-сестренок Марианну и Камиллу Давалос):

При увеличении значения min-height слоя .content верхняя и нижняя картинки будут разъезжаться, а при уменьшении - съезжаться. Если не ошибаюсь, описанный мною способ называется методом “раздвижных дверей” (сам такой метод не изучал, но встречал в книгах по CSS такое упоминание.)

Полезным для себя вынес такой прием, как работа с неоднородным фоном страницы.

На этом все.