Как сделать подвал сайта html

Как сделать подвал сайта html

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

Для этого воспользуемся свойством position и его значением fixed . При этом элемент остается на одном месте, а его положение задается координатами через свойства top , right , bottom , left . В нашем случае достаточно задать нулевые значения у left и bottom . Ширина фиксированных элементов равна их контенту, что хорошо заметно, если добавить фоновый цвет или рисунок, поэтому необходимо также задать ширину через width как 100% (пример 1).

Пример 1. Фиксированный подвал

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Подвал внизу страницы

Браузер Internet Explorer 6 не поддерживает значение fixed , поэтому в нем данный пример будет работать некорректно. Для IE6 придется дополнить код двумя тегами

Пример 2. Код с учетом IE6

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

В данном примере используется значение absolute свойства position . При абсолютном позиционировании элемент можно поместить в любое место окна браузера, но при этом он прокручивается вместе с содержимым. В этом основное различие между значениями fixed и absolute . Чтобы подвал не перемещался, задается высота страницы как 100% и отсекается все, что не помещается в текущие размеры окна. При этом пропадает вертикальная полоса прокрутки, ее следует добавить к content с помощью overflow .

Еще один неприятный момент это наложение фона подвала на полосу прокрутки, так что придется задать отступ справа на ширину скролбара. При этом, если полосы прокрутки нет, в подвале справа будет зиять дыра.

Читайте также:  Не горит задний габарит на поло седан

Футер это неотъемлемая часть любого сайта, а иногда даже значительная и как ни крути, он есть везде, но как его красиво сделать и качественно оформить знает не каждый. В этом уроке я наглядно покажу и опишу, как сделать резиновый подвал на сайте с тремя блоками.

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

Теперь приведу код всего подвала, а затем будем разбирать, поэтапно, что к чему:

Популярные сатьи:

Copyright © 2012 by Алексей Мезенцев. Все права защищены.

Разрешается републикация материалов сайта с обязательным указанием ссылки cледующего содержания:

Здравствуйте, уважаемые друзья и гости блога! Сегодня пойдет речь о создании сайта, вернее сказать о его одной составляющей — Подвал сайта, по научному Footer HTML или просто footer. Не смотря на то, что это самая мало видимая часть сайта и мало кто на нее обращает внимание, это на первый взгляд так кажется и многие так думают. И вот из-за этого многие частенько пренебрегают оформлением подвала сайта, что в корне не верно и не правильно!

Так как подвал сайта такая же его важная часть, как шапка и тело или по правильному — header и body. Вот и давайте сегодня займемся тем, что оформим как подобает хорошему сайтостроителю свои подвалы сайтов, а я вам в этом постараюсь помочь!

И так, начнем с самого начала …

Что такое подвал сайта или Footer HTML?

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

Читайте также:  Ошибка установки рингтона на meizu

И не прав тот, кто думает, что в подвал сайта заходит мало посетителей, в корне не прав!

И исходя из этого, нужно уделять не меньше внимания подвалу сайта, чем его, на первый взгляд, более видимым частям, как тело и шапка сайта. Хоть я и повторяюсь, но думаю, что не зря. Это я пытаюсь таким образом объяснить вам всю значимость и важность должного оформления подвала сайта!

Как правильно оформить подвал сайта?

Ничего сложного в этом нет! Я сейчас вам представлю несколько видов довольно красивых и презентабельных подвалов для ваших сайтов. И Вы сможете выбрать из них наиболее подходящий, а так же в конце данной статьи будет ссылка по которой Вы сможете скачать все представленные мной подвалы для сайтов и конечно же использовать их при создании своих новых сайтов, или же заменить уже существующие на мои, более привлекательные footer html.

Это первый подвал сайта:

Это второй подвал для сайта:

Это третий подвал для сайта:

Это четвертый подвал для сайта:

Это пятый подвал сайта:

Это шестой подвал сайта:

Ну, как Вам эти Footer HTML? Понравился хотя бы один из них? Я надеюсь, что да?!

Если они вам понравились, тогда я предлагаю скачать их совершенно бесплатно прямо сейчас и использовать в своих целях!

В папке, которую Вы скачали содержится шесть файлов с Footer HTML. И вам остается только исправить в текстовом редакторе содержание под свой сайт и все!

К стати о текстовом редакторе! Я например пользуюсь ,и вам советую, только Notepad++. Так как он самый удобный и безопасный!

Ссылка на основную публикацию
Как прозвонить видеокарту мультиметром
Вначале статьи сразу сделаю оговорку. Статья не для профи, а для начинающих мастеров-компьютерщиков и для тех, кто самостоятельно хочет найти...
Как подключить модем мотив
Мобильный оператор Мотив старается сделать свою связь максимально удобной и выгодной. Это прослеживается в хороших условиях различных тарифов, опций, а...
Как подключить плоттер к компьютеру
Подключение плоттера к персональному компьютеру ничем не отличается от выполнения аналогичных действий с принтером или МФУ. Единственное, что необходимо сделать...
Как прошить андроид самому без компьютера
Операционная система андроид, установленная на подавляющем большинстве смартфонов, отличается стабильностью работы и многими другими преимуществами. Однако, в силу стечения некоторых...
Adblock detector