Это заключительный урок из серии “Блочная верстка веб-сайта”. Нам осталось только оформить “подвал” (footer), да сделать еще пару-тройку замечаний.
Подвал, он же “футер” — это весьма важная часть сайта, хотя и мало кто туда добирается, особенно при очень длинных страницах. Там обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация. Очень часто можно наблюдать такую картину: верхнее гризонтальное меню под “шапкой” практически без изменений дублируется в левой колонке. Выглядит это, по меньшей мере, бестолково. Уж лучше продублировать основные разделы сайта в подвале. Пользы будет несомненно больше.
Футер не должен доминировать над шапкой, но и не должен теряться, делая страницу неуравновешенной. Мы сделаем его немного контрастным по цвету, но небольшой высоты.
Запишем в коде страницы сразу после этого места:
.................
...намечаются до самого утра. При наличии на небе луны — будет весело.
</ul>
</div>
<div class="clearfloat"></div>
Следующий код:
<div id="footer">
<p>Главная | <a href="#" mce_href="#">О нас</a> | <a href="#" mce_href="#">О летучести</a> | <a href="#" mce_href="#">О везучести</a> | <a href="#" mce_href="#">Свинки-герои</a> | <a href="#" mce_href="#">Подружиццо</a></p>
<p>© PIG.RU, 2007 | All right reserved. | <a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html" mce_href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/pig/style.css" mce_href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/pig/style.css">CSS</a> | e-mail: <a href="mailto:piggs@pig.ru" mce_href="mailto:piggs@pig.ru">piggs@pig.ru</a></p>
</div>
Здесь у нас слово Главная не является ссылкой (об этом мы уже говорили), а следом идут обычные ссылки на другие разделы сайта. Всего в футере два абзаца. В первом ссылки на разделы, а во втором как раз и есть всякие копирайты, ссылка на “мыло” и ещё две интересные ссылочки. Вот они уже как раз для форсу бандитского! Это ссылки на валидаторы — конторы, которые проверяют вашу страницу на соответствие стандартам. Ссылки устроены так, что нажимая на них, вы сразу даёте команду этим самым валидаторам проверить ваши странички (которые уже лежат в сети конечно же). И тут же получаете ответ. Сие придаёт вашим страничкам солидность и всеопщее наше верстальское одобрение.
Вот практически и вся страница. Проверьте только чтобы в конце кода у вас было два /div подряд. Вот так:
..........
href="mailto:piggs@pig.ru" mce_href="mailto:piggs@pig.ru">piggs@pig.ru</a></p>
</div>
</div>
</body>
</html>
Второй /div — это закрытие области контейнера.
Теперь допишем в листе стилей оставшийся код:
#footer {
background : #665;
color : #fff;
font-size : 70%;
padding : 5px;
clear : both;
}
#footer a {
color : #ff0;
}
#footer a:hover {
color : #f00;
}
#footer p {
padding : 2px;
text-align : center;
}
.clearfloat {
clear : both;
}
Здесь мы задали фон серо-зелёного цвета, цвет текста — белый. А вот нижняя строчка в первом правиле (clear : both;) означает, что с обоих сторон подвала не должно быть ничего. То есть он у нас занимает всю ширину нижней части контейнера.
Ссылки у нас здесь ярко-жёлтые, а в активном состоянии — красные. Для текста мы выбрали размер мельче всех на странице — 70%. Как я и сказал, футер — важная часть, но не на столько, чтобы бросаться в глаза.
Выравнивание для текста мы задали по центру.
Самое последнее правило как раз служит для блока очистки, заданного атрибутом clearfloat, о котором мы говорили, верстая блок новостей.
Сохраняемся, смотрим. Всё вроде бы хорошо, но как-то неуютно (особенно на белом фоне экрана). Добавим-ка мы всей странице тонкую светло-серую рамку! Откроем лист стилей, найдем вот это место:
#container {
width : 760px;
margin : 0 auto;
}
И добавим следующую строчку:
border : 1px solid #999;
Должно получиться следующее:
#container {
width : 760px;
margin : 0 auto;
border : 1px solid #999;
}
Вот, собственно, и всё!
Реальный сайт о парасенгах можно посмотреть здесь — Pigfly.ru. От первоначального макета мало что осталось. Ну, главное идея, а править сайт можно бесконечно. Хотя идея тоже изменилась, и теперь Летающие Парасенги — это сайт О Счастье, Удаче и Богатстве и даже чуточку о Дзэн.
Кстати, в следующем уроке я расскажу как сделать такое симпатичное меню, как сейчас на Парасенгах.
Напоминаю, что наша верстка является “плавающей“. Грубо говоря — элементы на странице располагаются как бы в потоке, занимая свободные места. Поэтому мы и ограничили часть пространства контейнером как коробкой, в которую уложили поочередно все элементы. Кроме плавающей, конечно же, есть и жесткая привязка элементов к странице. В самом общем случае для этого каждому элементу строго задается местоположение, например — расстоянием в пикселах от верхней и левой стороны экрана. Но это уже совсем другая история.
Удачи! :)
Здравствуйте Игорь!
Обращаюсь к Вам за советом на Вебсовет, помогите пожалуйста.
А дело вот в чем. По Вашей книге я написал код сайта, все получилось хорошо,
спасибо Вам. Но сайт мой состоит из 12 страниц. Я рассчитывал, что в тот же самый
#container будет загружаться контент других страниц и слава Богу. Но не тут то было:
почему то двухколоночные блоки всех страниц ( кроме главной) прижимаются к
левому краю и что тут делать у меня знаний не хватает. Как писать код для других страниц; для каждой новый #container??? Я попробовал некоторые варианты, но увы…
Вразумите, пожалуйста
C уважением Виталий Горьков.
Ответить
Здравствуйте, Виталий!
Рад бы помочь, но не видя кода ничего подсказать не могу :) Пришлите мне на мыло ваши файлы, я посмотрю.
Ответить
Статья просто восхитительная! Огромное СПАСИБО!
Ответить
Потрясающая статья …спасибо вам огромное…мое представление о верстке перевернуто
Ответить
Здравствуйте еще раз :) У меня опять вопрос : Вот я сделал сайт, не по этому уроку, а благодаря полученным знаниям из этого урока, и проблема :
В «опере» и «хроме» все отлично а в IE 7 —
1. Почему то не поддерживается размер шрифта 150% на CSS
2. У меня трехколоночный сайт, три блока примерно по 350 пикселей каждый. В IE все это сбивается к черту, как будто не хватает места тексту, и он налезает на следующий блок.
3. Уменьшенный шрифт, 75% тоже показывается как обычный. В итоге все наполнение сайта, как заголовки, так и маленькие даты — всё набрано одним цветом. Что делать? Заранее ОГРОМНОЕ спасибо за ответ!
Ответить
Да, еще — извините за много вопросов :) В ИЕ 7 сбились все параметры margin и padding, кроме padding-a для задания отступов фона навигации. Что с этим можно сделать? :(
Ответить
Ник, пришлите мне в мыло вашу страницу вместе с файлом CSS. Так я смогу вам что-то подсказать.
Ответить
Отличный блог! Все доступно и понятно. 5 баллов и в избранное.
Да, еще! В 9-ом уроке обещалось рассказать о менюшке как у парасенгов, но продолженя не нащел. Подскажите,плс, где искать…
С ув. Александр.
Ответить
Ура! Нашел… http://ilev.blogspot.com/2007/07/css.html
Еще раз спасибо!
Ответить
:) Здесь тоже есть этот урок
http://www.websovet.com/rollover-menyu-na-css
Ответить
Да, господа верстальщики, а я и не думал, что так сильно отстал от жизни. Работал в небольшой фирме по разработке сайтов и делал их исключительно табличным способом, а тут… спасибо за статью. Огромное.
Ответить
Вэлкам, N/A :)
Ответить
Спасибо за мастер класс))
Подскажите пожалуйста, как сделать эти милые вертикальные черточки в футере между ссылками меню?
Что это за символ?
Ответить
Sunliker, этот знак находится на клавиатуре правее знака + в английской раскладке. Правда на клаве он выглядит как два вертикальных штриха.
Ответить
Здраствуйте Игорь. С огромным интересом прошёл ваши уроки, но у меня появились некоторые нестыковочки. Чтот не получилось немного. Может где то тоятся ошибки. Поэтому я и хотел вас попросить выслать мне на e-mail profili2009@ya.ru два фаиликак style.css и index.html в готовом варианте. Буду очень благодарен, хочу найти свои ошибки. С уважением Алексей.
Ответить
Алексей, так это просто: кликаете по ссылке в статье (готовый Рэзультат), потом сохраняете как “HTML-файл с изображениями” (это если Оперой, в ИЕ почти так же) и будут вам и оба файла, и картинки все :)
Ответить
Спасибо, неплохая статья. Опыт веб-дизайна был, но, пока читал, отметил для себя несколько особенностей HTML и CSS. Хотел бы предложить несколько поправок, исключительно из любви к точности.
1. Спецификация CSS2 даёт следующий формат набора правил (ruleset):
selector? ‘{’ S* declaration? [ ‘;’ S* declaration? ]* ‘}’ S*;
Т.е. точка с запятой используется не как терминатор, а как разделитель, поэтому после последней пары свойство-значение её использование как минимум необязательно, а вообще - не соответствует приведённому выражению.
2. Селектор * обозначает не “всю страницу разом”, а все элементы, которые могут встретиться на странице. Различие, IMHO, существенное, поскольку правила, применённые к странице могут быть переопределены в дочерних элементах. На практике это разночтение мало на что влияет, но мне кажется, следовало бы подчеркнуть, что * - это не эквивалент body или (упаси господь! :)) html.
3. На протяжении всего мини-курса очень резало глаз следующее. Например, имеется [div id=”text”] (квадратные скобки - чтобы не порезало). В пояснении это называется “Тэг div с атрибутом text”. Дело в том, что спецификация HTML даёт вполне однозначное определение слова “атрибут” и этому определению соответствует “id”, а “text” является его значением.
Это, опять же, не создаёт особых проблем при создании сайта, но, к сожалению, может помешать тем, кто будет учиться по Вашим урокам, в общении с другими разработчиками: как правило, к некорректному употреблению основных терминов специалисты оказываются чутки. По той же причине к числу хороших книг по Delphi, например, не причисляют книги Фленова или Архангельского: они являются неплохими учебниками, но идеологически не совсем верны, что создаёт затруднения при переходе от состояния начинающего к состоянию специалиста.
=====
В остальном - ещё раз огромное спасибо, было приятно читать.
Ответить
Спасибо большое! Оччень полезная статья получилась. Сделал всё как написано, работает сразу!
Ответить
Ant, вэлкам! :)
Ответить
Я очень долго искал где же можно прочитать и чтобы понятно было про “дивную” верстку. И только на этом сайте нашел. Огромное человеческое СПАСИБО!!!
Ответить
Спасибо, Александр, за добрый отзыв!
Ответить
На сколько я понял подвал ни к чему не привязан (хотелось бы к низу.) и при отсутствии текстов лепиться куда не попадя. Также подвал не имеет фиксированного размера, и уменьшается под тот размер куда прилипает, что можно было бы сделать?
Ответить
Можно ли вставить этот тэг в самом низу выше закрывающегося тэга body?
Ответить
Подвал в любом случае будет внизу, так как перед ним мы добавили блок очистки:
<div class=”clearfloat”></div>
А сам блок подвала размещается в пределах основного контейнера. Если вы его перенесете в самый низ, то необходимо будет добавить в набор правил для футера выравнивание по центру, как и у основного контейнера:
margin: 0 auto;
Также можно задать и фиксированную высоту. Для этого достаточно в набор правил для футера добавить:
height: 50px;
Ответить
Автору Р Е С П Е К Т И У В А Ж У Х А!!!!Супер урок!
Ответить
Классный учебник.
Респект и благодарность автору)))
Теперь хотелось бы расширить свои знания и научиться делать сайты на php.
Кто бы мог подсказать хороший учебник для начинающих, с примерами построения сайта как в этом учебнике…
Ответить
А где можно поучиться созданию форм.
Так же с помощью css и divov?
Ответить
Нет слов…! Прекрасное изложение - легко, доступно и с юмором!
Спасибо огромное! Получил огромное удовольсвие и дополнительные знания!
Наилучшие пожелания, и успехов!
P.S. Относительно всей книги “Блочная верстка веб-сайта”.
Ответить
Большое спасибо за статью, как раз то что искал!
Ответить
обещали обьяснить как делать две колонки но так и не обьяснили
спасибо
Ответить
ipenrovich, а это:
http://www.websovet.com/sozdanie-2-x-kolonochnogo-shablona-dlya-vordpress-chast-1-risuem-maket
?
Ответить
Классная стать. Но вот один вопрос как организовать как типа на фреймах. Тоесть шапка навигация и подвал у нас статичны все находится на 1 странице и не меняется а вот в div text при нажатии на ссылку грузится уже готовая страница. Я сделал через iframe но чета не оч удобно. можно ли как нибудь по другому реализовать изменеие содержания дива. Как вы это ремлизовали на своем сайте при клике на ссылку. Или у каждой страницы есть шапка и тд и тп и оно все целиком грузится???
336644086
vitalikse@gmail.com
я на связи
Ответить
Для этого не обязательно использовать фреймы, от которых уже давно все отказались. Для этого существует обычный PHP. Шаблоны Вордпресс, к примеру, раз собраны на этом принципе: шапка, сайдбары и подвал единственны в своем роде и подключаются ко всем страницам сразу.
Ответить
Урок суперский. Был сайт на табличной верстке.
На днях собираюсь делать блочную! И обязателно буду обращатся к уроку.
Доходчиво, понятно все написано. И для новичка подойдет.
Спасибо Вам!!! :)
Ответить
И вам спасибо на добром слове! :)
Ответить
Огромное спасибо за статью. Оказалась очень полезной. Но вот почему то Opera 10.01 вообще не открывает страницу. Почему такое происходит?
Ответить
Наверное, глюк в самой Опере. Поробуйте переустановить.
Ответить
Здравствуйте товарищи,объясните мне старому юзеру как шапку на сайте сделать на всю ширину?
Ответить
Лев, вы имеете в виду свой форум?
Ответить
Спасибо большое за уроки )
Прочитал уроки w3schools, заполировал вашим творением и вуаля - таблицы больше мне не кажутся такими хорошими и годными ))
P.S. отдельное спасибо за Strict
P.P.S. отсутствие ul в footer’е смутило
Ответить
Roach, вэлкам!
Ответить
Да статья супер я перебрал много статей и книг и нигде так понятно и просто небыло написано про вёрстку дивами, теперь чувствую основу в знаниях и можно пробовать делать сайт самому не на таблицах, а сразу на дивах
Ответить
Здравствуйте Игорь. Ваша статья оказалась очень полезной для меня как для новичка.Изложено всё достаточно чётко.Но к сожалению у меня возникли вопросы.Скажите пожалуйста как мне изменить Размер шрифта горизонтального блока ссылок и как увеличить количество этих ссылок,я пробовал увеличить но увы они выстраиваются в список.А ещё лучше бы было бы создать там выпадающее меню,посоветуйте какой нибудь полезный материал.
За ранее огромное спасибо.
с уважением роман
Ответить
Здравствуйте, Роман! Могу лишь посоветовать обзавестить хорошей книгой по HTML. Или юзать Гугль, ибо материалов на данную тему в сети хоть отбавляй.
Ответить
Роман.
Изменения размера в css, а что-бы увеличить количество ссылок,
расширьте контейнер предназначенный для них.
Игорь Квентор, не могли бы вы разделить место под комментарии на несколько страниц.
Ответить
Здравствуйте, тезка. Не вижу в этом особого смысла. Если бы под каждым постом было достаточно много комментариев, то оно было бы логично. А так - лишний плагин, лишние дублирующие страницы. Зачем?
Ответить
Ради удобства, а то страница стала очень длинной…
Но решать конечно вам.
Ответить
Ну вот наконец-то свершилось, без спец компутерных знаний, на интуиции и желании сделать сайт, и ТОЛЬКО БЛАГОДАРЯ книге Игоря Квентора, я сделал ЭТО. Просто и удобно, доступно даже для контуженых танкистов. Гениально преподнес автор материал. Спасибо.
Ответить
Спасибо, Павел, на добром слове!
Ответить
Огромное спасибо!
Прочитал каждое слово и делал как написано.
Теперь буду глядя на проделанное пытаться научиться правильно верстать с ами.
Еще раз Спасибо!
Ответить
Спасибо большое! Только после прочтения данной статьи чуток прояснился вопрос с “дивной” версткой :)
Ответить
Сверстал страничку по вашим урокам и всё было хорошо и красиво, пока не загрузил её на широкоформатном мониторе с разрешением 1920*1080. Самое странное что в IE8 всё отлично, а вот в опере 10.62 все блоки разъехались. Похоже, что всё дело в размерах шрифта или самом шрифте. Видимо для таких случаев стоит прописывать конкретные значения кегля, а не масштабные? На днях поэкспериментирую.
Ответить
Игорь, добрый день, помоги пд разобраться в чем проблема. IE не отображает корректно шапку сайта… только на первой странице, остальные открываются как и задумано темой, строго по заданным параметрам, в Опере этой проблемы нет.
Пожалуйста, гляньте из-за чего этого происходит…
было начинала думать что я “гений” =)))
Ответить
Игорь Квентор 29.10.2010
@Елена, здравствуйте! Сложно сказать. Нужно перелопатить весь шаблон. Проверяйте файлы шаблона на ошибки. К примеру, у вас в конце страницы лишний закрывающий див для блока с селектором #main. Скорее всего, пропустили где-то открытие этого дива.
Ответить
Игорь, а где CSS «Средний уровень» — вариант
для продвинутых верстальщиков?
Я бы с удовольствием изучил, даже за деньги (при разумной цене).
Или продолжением оказалась книга “Создание 3-х колоночного шаблона для Вордпресс (Wordpress)”?
Ответить
Игорь Квентор 15.11.2010
@Дмитрий.К, хороший вопрос! :) Как раз сейчас занялся продолжением написания следующей книги, которая будет называться “Профессия вебмастер”. Это расширенный курс, куда войдут материалы как для начинающих, так и для продвинутых вебмастеров. В частности, будут более подробно раскрыты тема Wordpress и jQuery. Ориентировочная стоимость 20$. Возможно это будет не только e-book, но и диск с полезными программами и наборами шрифтов, кистей и прочих вебмастерских инструментов.
Ответить
Виктор 17.11.2010
@Игорь Квентор, ждем с нетерпением. Только что закончил изучение двух бесплатных книг. Все доходчиво и понятно. Спасибо.
20$ за хороший курс не жалко.
Ответить
Игорь Квентор 18.11.2010
@Виктор, окей! Уже треть книги готова :)
Ответить
Доброго времени суток.
У меня возник вопрос по поводу правильного отображения сего кода. Сам html код и css я полностью взял с этих уроков. Но проблема в том. что отображается оно верно лишь в IE.8. В других браузерах списки с новыми пользователями выстроились в столбец. Сработало лишь, когда убрал поплавок у второго списка. Может все-таки есть другой способ решить это, не удаляя поплавок?
И еще вопрос, где можно скачать вашу книгу?
Ответить
Игорь Квентор 30.01.2011
@Azerus, не знаю что за поплавок такой. Если вы имеете в виду маркер, то его наличие или отсутствие никак не влияют на обтекание.
Книгу можно купить. См. здесь: http://www.websovet.com/my-books
Ответить
Под поплавком я имел ввиду float:)
Ответить
СПАСИБО!!
Ответить
Здравствуйте Игорь!
Прежде всего спасибо за Ваш блок, очень интересно его читать.
Первые шаги начал имено с этой Вашей статьи. Но немного оттошел от примера.
У меня правая колонка получилась короче левой. А так как у меня фон body один, у text другой, а у news третий получилось не очень красиво:
http://s08.radikal.ru/i181/1107/da/92151d8fbc34.jpg
Подскажите как можно растянуть news до подвала?
И плюс к этому как привязать футтер к низу страницы, чтоб он не подымался на середину экрана если контента мало?
В сети я вычитал много вариантов, но пока реализовать не смог для себя =) Но это скорей не из-за плохих решений, а из-за того что мои умения пока на низком уровне.
Подскажите какое решение для этих двух вопросов использовали бы вы для данной(которая у вас в примере) страничке?
Заранее спасибо, за ответ.
Ответить