Шапка и подвал. Как прибить подвал к низу страницы

Теперь давайте создадим шапку и подвал в нашем шаблоне. Для этого между тегами <div class="fix">...</div> создадим блок для шапки <div class="header"></div>:

Шапка и подвал. Как прибить подвал к низу страницы

В стилях для шапки пропишем свойства: ширину, высоту и цвета фона:

Шапка и подвал. Как прибить подвал к низу страницы

Ширину блока устанавливаем равной 100%, таким образом шапка будет растягиваться на всю ширину блока fix, так как лежит она именно в нем. Если бы мы прописали этот блок вне блока  fix, тогда шапка растянулась бы на всю ширину окна браузера. Высоту блока сделаем равной 100px, фон сделаем голубым.

Сохраняем изменения, открываем шаблон в браузере:

Шапка и подвал. Как прибить подвал к низу страницы

Переходим к созданию подвала. Нам нужно, чтобы он был прибит к низу страницы. Записываем между тегами <div class="fix">...</div>,сразу после блока с шапкой> блок с классом footer <div class="footer"></div>:

Шапка и подвал. Как прибить подвал к низу страницы

В стилях для нового блока запишем:

Шапка и подвал. Как прибить подвал к низу страницы

Здесь свойство position имеет значение - absolute, т.е. подвал абсолютно позиционирован. Относительно чего? Относительно того блока, у которого свойство position имеет значение - relative. А это, если вы не забыли, у нас блок fix.  Теперь нужно задать положение этого блока при помощи свойства bottom, со значением - 0, чтобы прибить подвал к низу страницы. Сохраняем изменения и смотрим результат:

Шапка и подвал. Как прибить подвал к низу страницы

В следующем уроке создадим контентную часть.

Видеоматериал по этому уроку:

http://youtu.be/v4zCKsgMYb4

Источник: http://psd-html-css.ru/css/shapka-i-podval-kak-pribit-podval-k-nizu-stranicy

Читать комменты и комментировать

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



Защитный код
Обновить

Шапка и подвал. Как прибить подвал к низу страницы | | 2012-03-29 12:13:00 | | Статьи Web-мастеру | | Теперь давайте создадим шапку и подвал в нашем шаблоне. Для этого между тегами ... создадим блок для шапки :В стилях для шапки пропишем свойства: ширину, высоту и цвета фона:Ширину блока | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: