Здравствуйте, уважаемые читатели блога сайт. Продолжаем тему блочной верстки, которая была начата и продолжена в трех предыдущих статьях. В принципе, нам уже удалось создать как двух- , так и трехколоночный макет сайта, и мы даже успели рассмотреть нюансы создания резинового макета.
Кроме этого в первых статьях, посвященных верстке сайта (), были рассмотрены некоторые базовые понятия вебмастеринга, без понимания которых было бы довольно трудно разобраться в нюансах.
Какие проблемы возникли с нашим макетом сайтаСегодня мы попробуем решить одну небольшую проблему, которая может возникнуть с созданным нами ранее макетом. Чаще всего такая ситуация возникает при просмотре его на больших мониторах (с высоким разрешением) и при отображении страницы с малым количеством информации.
В этом случае может получиться так, что футер не будет прижат к низу экрана, а будет располагаться чуть ли не на его середине по высоте, что в большинстве случаев будет выглядеть некрасиво и не эстетично.
Все же, по моему мнению, прижать footer к самому низу макета сайта нужно, и особенно это будет актуально в случае, когда высота страницы получиться меньше, чем высота экрана пользователя. Схематично это можно представить так:
Т.е. правильное поведение футера для случая малого количества информации на странице и большого экрана пользователя будет следующим:
Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.
Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:
Заголовок Шапка Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы Подвал
А в файле Style.css были прописаны следующие CSS свойства:
Body, html { margin:0px; padding:0px; } #maket { width:800px; margin:0 auto; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; }
Ну, а сам макет выглядел примерно так:
Как видите, футер не прижат к низу и, следовательно, не удовлетворяет нашим требованиям (он располагается всегда под самой нижней колонкой), поэтому придется внести коррективы в код. Все тоже самое можно будет проделать и для двухколоночного, и для резинового макета тоже. Метод универсальный.
Как прижать футер к низу макета сайтаИтак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала потребуется задать высоту всей страницы, равную ста процентам (она будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер основного блока с макетом тоже до 100%.
Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:
Body, html { margin:0px; padding:0px; height: 100%; }
На внешнем виде это никак пока не отразится, но зато теперь основной блог можно будет растянуться на всю высоту экрана. Т.е. это был своеобразный подготовительный этап.
Основные свойства CSS, при желании, вы можете посмотреть . Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:
Еще я хочу его подсветить (div с id="maket"). Для этого задам ему рамку с помощью соответствующего свойства Border ():
Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:
Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:
Заголовок Шапка Левая колонка Меню Меню Меню Меню Правая колонка Меню Меню Меню Меню Содержимое страницы Содержимое страницы Содержимое Подвал
Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:
Но опять возникает проблема, ибо для того, чтобы увидеть подвал, теперь приходится прокручивать экран в браузере (видите на приведенном рисунке полосу прокрутки).
Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.
Решить эту проблему можно, задав отрицательный отступ для Div контейнера с футером для того, чтобы он сместился вверх, на расстояние равное его высоте. При этом контейнер footer наедет на основной и впишется в высоту экрана браузера (т.е. не нужно будет использовать прокрутку для его просмотра).
Но для того, чтобы задать отрицательный отступ от верха, нужно знать эту самую высоту footer, а мы ее пока что не знаем.
Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:
#footer{ background-color:#FFC0FF; clear:both; height: 50px; }
А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:
Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):
Как видите, теперь полоса прокрутки в браузере не появляется и весь наш трехколоночный макет сайта на основе блочной верстки помещается в одном экране (в случае малого количества информации на странице) и имеет футер, расположенный в самом низу. Что нам, собственно, и требовалось сделать.
Вставляем распорку и боремся с Internet ExplorerНо возникает проблема , которая проявится только тогда, когда информации на странице макета станет больше и может получиться такая ситуация:
Получается, что может возникнуть ситуация, когда информация в одной из колонок макета наедет на футер, что будет выглядеть не красиво. Происходит это из-за пресловутого отрицательного отступа, который мы задали для него и который помог поднять наш подвал с наездом на основной контейнер макета.
Т.е. получается, что внизу экрана расположены два блока, перекрывающие друг друга в области подвала.
Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки ) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.
Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID () с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:
Заголовок Шапка Левая колонка Меню Меню Меню Меню Правая колонка Меню Меню Меню Меню Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы Подвал
А в Style.css пропишем для этого ( , задающее высоту этому контейнеру-распорке равную высоте подвала:
#rasporka { height: 50px; }
В результате футер будет прижиматься снизу не к информации, содержащейся в основном контейнере (например, текст в самой высокой колонке), а на равную подвалу по высоте область с контейнером-распоркой, не содержащим никакой информации.
Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):
Как я уже упоминал выше, ширина футера теперь у нас должна задаваться отдельно, т.к. этот контейнер теперь не входит в состав основного. Для этого нужно добавить в CSS файл дополнительные свойства для Footer, позволяющие задать его ширину и выровнять его посередине экрана по горизонтали.
Ширину имеет смысл задать равной ширине всего макета с помощью свойства Width, а выравнивание по горизонтали можно осуществить таким же способом, как мы это сделали для всего макета на блочной верстке.
Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:
#footer{ background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; }
С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:
Ну вот, вроде больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и, возможно, в каких-то других старых тоже) не смотря на все наши старания подвал не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.
Все это происходит из-за того, что ( не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.
Поэтому для решения этой проблемы нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для maket нужно будет вставить следующую комбинацию:
* html #maket { height: 100%; }
Это правило будет применено только для браузера Internet Explorer 6, остальные не будут его учитывать и выполнять.
Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:
Body, html { margin:0px; padding:0px; height: 100%; } * html #maket { height: 100%; } #maket { width:800px; margin:0 auto; min-height: 100%; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; } #rasporka { height: 50px; }
Ну, а окончательный вид Index.html был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.
Можете также посмотреть видео «Работа с Html тегом div»:
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Блочная верстка - Создаем двухколоночный, трехколоночный и резиновый макеты для сайта
DiV верстка - Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS
Этот тег может использоваться, как и предыдущие теги несколько раз на странице. Вы, наверное уже догадались из названия, что он является подвалом страницы. В нём можно располагать счетчики, текст об авторских правах на сайт, контактные данные и т.п. Возможно также вставить панель навигации () в подвал страницы. Никто не запрещает вставлять и такие новые элементы, как aside и section, но я бы на вашем месте все-таки этого не делал.
и используем на полную!Новая разметка body>header { background:#FFEAD5 } article{ background:#CFCFCF; margin:10px; padding-top:5px; } article p{ padding-left:25px } article, article>header hgroup { -moz-border-radius:5px; /* Радиус скругления */ -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;} article header hgroup { text-align:right; width:40%; color:#CCC; background:#000; margin-left:55%; } article footer { background:#5c6183; -moz-border-radius:0px 0px 5px 5px; /* Радиус скругления */ -webkit-border-radius:0px 0px 5px 5px; -khtml-border-radius:0px 0px 5px 5px; border-radius:0px 0px 5px 5px; padding-left:15px; color:#FFF } header hgroup p { background:#FFF; color:#006; -moz-border-radius:0px 0px 5px 5px; /* Радиус скругления */ -webkit-border-radius:0px 0px 5px 5px; -khtml-border-radius:0px 0px 5px 5px; border-radius:0px 0px 5px 5px; padding-right:10px; } footer {clear:both; background:#DDECE9} footer p{ font-size:14px; text-align:center} Шапка сайта Пост №1
Здесь мы будем писать текст первого поста.
Пост №2Здесь мы будем писать текст второго поста.
Автор поста (статьи): Александр ПобединскийЗдесь обычно пишут, что права защищены. Год и.т.п. Копирование запрещено))
В результате должен получиться следующий результат:
Из этого примера следует, что каждая отдельная статья или пост могут иметь свои элементы и не зависимо от шапки и подвала (футера) страницы документа. Именно в таких случаях эти элементы могут использовать несколько раз. Хотя я уверен, что их можно применять и в боковой панели aside.
Ну вот вы и познакомились с основными структурными элементами HTML5, а следующих уроках мы с вами рассмотрим ещё больше новых элементов, различные формы, которых не было в других спецификациях HTML!
В HTML5 для структуры кода введено несколько новых тегов: , , , , , которые заменяют в некоторых случаях привычный . Хотя кажется, что особой разницы между тегами и нет, между ними лежит огромная пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают , для них это типовой тег разметки - замени его на и смысл не поменяется. Другое дело , робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.
Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде.
Давайте для начала сделаем шапку сайта с помощью тега (пример 6.2).
Пример 6.2. Использование
Попытка добавить в стилях фон к тегу ни к чему не привела, фон в некоторых браузерах отображаться не желает. Все новые теги следует сделать вначале блочными через свойство display , тогда они начнут корректно выводиться (пример 6.3).
Пример 6.3. Шапка сайта
HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx
header { display: block; background: #00B0D8 url(images/header-gradient.png) repeat-x; }
Данный пример будет работать во всех браузерах, кроме IE7 и IE8. Internet Explorer не добавляет стиль к элементам, которые не понимает. Это недоразумение можно исправить, если создать фиктивный элемент с помощью JavaScript. Для этого включим в такой код.
document.createElement("header");
Если на странице встречается один тег, этот скрипт вполне подойдёт для работы. Но не хочется повторять строку десять раз для десяти разных тегов, поэтому автоматизируем этот процесс через цикл. Сами теги указываются списком, разделяясь запятой (пример 6.4).
Пример 6.4. Скрипт для IE
var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(","); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); }
Сам скрипт заключается в условные комментарии, чтобы выполнялся только для IE версии 8.0 и ниже. В IE9 поддержка новых тегов HTML5 уже включена.
Пример выше не обязательно вставлять к себе на сайт, можно воспользоваться общедоступным скриптом написанным Реми Шарпом и распространяемым по лицензии MIT. Для этого достаточно указать на него ссылку, как показано в примере 6.5.
Пример 6.5. Скрипт для IE
Все указанные скрипты должны располагаться в коде перед CSS.
Таким образом, для полноценного использования тегов HTML5 во всех браузерах достаточно выполнить три условия:
Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.
Пример 6.6. Использование тега
HTML5 IE Cr Op Sa Fx
article Следы невиданных зверей История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.
Определяет блок, который не относится к основному контенту, для размещения рубрик, ссылок на архив, меток и другой информации (пример 6.7). Такой блок, если он располагается сбоку, называется, как правило, «сайдбар» или «боковая панель».
Пример 6.7. Использование
HTML5 IE Cr Op Sa Fx
aside document.createElement("aside"); document.createElement("article"); aside { background: #f0f0f0; /* Цвет фона */ padding: 10px; /* Поля */ width: 200px; /* Ширина сайдбара */ float: right; /* Обтекание слева */ } article { margin-right: 240px; /* Отступ справа */ display: block; /* Блочный элемент */ }
Экономьте электричество
Хороший язык
Чья палка больше
История о том, как приходилось экономить электричество, какие меры для этого принимались, и куда оно на самом деле уходило.Используется для группирования любых элементов, например, изображений и подписей к ним (пример 6.8).
Пример 6.8. Использование
HTML5 IE Cr Op Sa Fx
figure document.createElement("figure"); document.createElement("figcaption"); figure { background: #5f6a72; /* Цвет фона */ padding: 10px; /* Поля вокруг */ display: block; /* Блочный элемент */ width: 150px; /* Ширина */ float: left; /* Блоки выстраиваются по горизонтали */ margin: 0 10px 10px 0; /* Отступы */ text-align: center; /* Выравнивание по центру */ } figcaption { color: #fff; /* Цвет текста */ }
Содержит описание для тега . Тег должен быть первым или последним элементом в группе.
Задаёт «подвал» сайта или раздела, в нем обычно располагается имя автора, дата документа, контактная и правовая информация (пример 6.9).
Пример 6.9. Использование
HTML5 IE Cr Op Sa Fx
footer Персональный сайт Кристины Ветровой Добро пожаловать!
Рада приветствовать вас на своем сайте.
Copyright Кристина ВетроваОпределяет «шапку» сайта или раздела.
Используется для группирования заголовков веб-страницы или раздела (пример 6.10).
Пример 6.10. Использование
HTML5 IE Cr Op Sa Fx
hgroup Кристина Ветрова Персональный сайт
Задаёт навигацию по сайту (пример 6.11). Если на странице несколько блоков ссылок, то в обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов в документе. Запрещается вкладывать внутрь .
Пример 6.11. Использование
HTML5 IE Cr Op Sa Fx
nav Чебурашка и крокодил Гена Чебурашка | Гена | Шапокляк | Лариска Добро пожаловать!
Определяет раздел документа, который может включать в себя заголовки, шапку, подвал и текст (пример 6.12). Допускается вкладывать один тег внутрь другого.
Пример 6.12. Использование
HTML5 IE Cr Op Sa Fx
section Съёмки фильма Полипропилен
История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.
Хороший языкИстория о том, как проходила студия изучения языка эсперанто, в то время, как над ней, на веранде велась студия приколистов, где травились анекдоты, и что из этого получилось.
Помечает текст внутри тега как дата, время или одновременно дата и время. Может указываться непосредственно внутри контейнера , либо задаваться через атрибут datetime (пример 6.13).
Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 6.1.
Для каждой единицы существует своя заданная форма и ограничения.
- Год — задается четырьмя цифрами (1860).
- Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
- День — две цифры от 01 до 31.
- Час — две цифры от 00 до 23.
- Минуты — две цифры от 00 до 59.
- Секунды — две цифры от 00 до 59.
- Часовой пояс — часы и минуты с указанием знака плюс или минус.
Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.
Пример 6.13. Использование
HTML5 IE Cr Op Sa Fx
time
1957-10-04 запущен первый искусственный спутник Земли.
1960-08-19 первый полёт собак в космос.
1961-04-12 первый полёт человека в космос.
1963-06-16 первый полёт женщины-космонавта.
1969-07-21 высадка человека на Луну.
Часто при установке , кнопок, баннеров и т.п. возникает необходимость вставки html, css и JavaScript кодов
в в тело тегов body и head. Некорректное выполнение этой операции вручную, может повредить сайт и даже полностью нарушить его работоспособность.
Для автоматизации этого процесса создан замечательный плагин , зайдите в настройки в админпанели и с удовольствием работайте. Он легкий в использовании и имеет следующие функции:
Чтобы увеличить картинку щелкните по ней кнопкой мышки. Чтобы уменьшить щелкните ещё раз.
1. Page Head and Footer (Заголовок и подвал страницы) . Добавление кода в главной страницы сайта.
Code to be added on HEAD section of the home (код, который надо вставить в заголовок домашней (главной) страницы). Позволяет вставить мета теги, коды рекламных баннеров, кнопок и т.п. в тело тега . Чаще это невидимая часть кода для отсутствия на сайте визуального показа. Результат работы видимой части кода появится над шапкой на главной странице.
Code to be added on HEAD section of every page (код, который надо вставить в заголовок каждой страницы). Добавление кода в тело тега в раздел HEAD. Результат работы видимой части кода появится над шапкой на всех страницах, в том числе и на главной.
Code to be added before the end of the page (код, который надо вставить в конец (подвал) страницы). Добавление кода в подвал на всех страницах перед закрывающим тегом . Это работает только для тем, имеющих подвал и файл footer.php.
Практически все счетчики состоят из двух частей – это коды невидимой и видимой (информер) частей счетчика. Код невидимой части вставляется после открывающегося тега , как можно выше к началу страницы. Для этого можно использовать плагин или внести коррекцию непосредственно в файл header.php, . Код видимой части (информер) вставляется в подвал сайта с помощью плагина Header and Footer перед закрывающимся тегом или в сайдбар с помощью виджета.
2. Post content (содержимое записи) . Добавление кода в начало и конец поста на всех страницах категорий, при полном показе поста.
Code to be inserted before each post (код, который надо вставить перед каждой записью). Вставка кода в начале каждого поста (статьи) категории после заголовка, только в том случае, если статья показана полностью.
Code to be inserted after each post (код, который надо вставить после каждой записи). Вставка кода после каждого поста категории.
3. Page content. Добавление кода в начало и конец поста всех статических страниц, при полном показе поста.
Code to be inserted before each page. Вставка кода в начале каждого поста (статьи) статической страницы после заголовка, только в том случае, если статья показана полностью.
Code to be inserted after each page. Код будет вставлен после поста на каждой статической странице.
4. Faceboock . Если добавить метапризнак og:image (протокол Open Graph, с помощью которого можно ввести метаданные в формате Social Graph на страницы ресурса), например список контактов Faceboock, то при нажатии кнопки Faceboock в начале или конце постов, на всех страницах можно управлять выборкой изображения, которое отправится на стену пользователя.
5. Snippets . Имеется возможность задавать отрывки, которые отсылаются на стену пользователя при нажатии кнопки социальных сетей, расположенных в начале или в конце поста. Отрывки отсылаются как , где N – номер отрывка от 1 до 5.
6. Notes and parked codes. Примечания.
