«Мастерская CSS.
Профессиональное применение Web-стандартов»

Авторы: Энди Бадд, Камерон Молл, Саймон Коллизон .
Авторы книги показывают, что «эстетически привлекательным должен быть не только внешний вид Web-страницы, но и ее код, что значительно облегчает поддержку и модификацию страницы как самим разработчиком, так и другими дизайнерами».

Кратко о книге. Книга посвящена современным технологиям Web-дизайна на основе каскадных таблиц стилей (CSS). Рассматриваются такие темы, как верстка на основе изменяемой и фиксированной ширины контейнеров; типы селекторов; абсолютное и относительное позиционирование; использование плавающих элементов; стилизация гиперссылок, форм, списков и панелей навигации; позиционирование фоновых изображений. Кроме того, обсуждаются вопросы применения фильтров и трюков для нивелирования на Web-страницах ошибок браузеров. Много внимания уделяется концепциям чистоты разметки и надежности кода.

Отзыв. Методично собираю библиотеку книг по CSS, купила и эту. Поначалу насторожила толщина -- она явно уступает остальным. Но! Она легко заменила в работе все остальные. Это самый свежий взгляд на многие проблемы вёрстки: здесь сведены воедино "глюки" различных браузеров и способы решения. Закрепление теории, оригинальные идеи и авторское видение процесса создания сайта.
Рекомендую. Гриценко Татьяна (отзыв покупателя книги на ozon.ru).

Сколько стоит книга? — 214 руб.
Заказать можно на ozon.ru.

Доступность и привлекательность текста

Урок #15. Как зафиксировать блок в Internet Explorer 6.0?
18 минут

Комментарий к видеоуроку содержит текстовое изложение решения задачи.

Зачем фиксировать? Если вы зафиксируете шапку документа, то при прокрутке этот блок будет всегда находиться наверху: наименование компании, логотип, адрес главной страницы и т.д. Но не только из меркантильных соображений стоит это делать.

Зафиксируйте блок с верхней навигацией (меню), и тогда посетитель сможет перейти по ссылкам в любом месте страницы. Правда, реализовать это в самом распространенном браузере Internet Explorer 6.0 сложнее, чем в других браузерах.

В таких браузерах, как Opera и Mozilla Firefox, используется свойство fixed. Например, на моем сайте зафиксирован блок #topbar с меню на расстоянии 35px от верхнего края браузера:

#topbar {

position: fixed;
top: 35px;

}

Internet Explorer 6.0 не поддерживает fixed. Необходимо применить особый подход.

1. Для IE 6.0 необходимо, чтобы блок #topbar был позиционирован абсолютно. Для этого пишем хак для этой версии:

* html #topbar {

position: absolute;

}

2. Как абсолютно позиционированный блок приобретет свойства фиксированного? Для этого мы закрепляем содержание html, но делаем подвижным содержание body. Другими словами, нужно убрать полосу прокрутки у html, но добавить ее body. Высота html и body должна составлять 100%.

* html {

height: 100%;
overflow:hidden;

}

body {

overflow: auto;
height: 100%;

}

Недостаток этого метода заключается в том, что есть ограничивающие факторы:

1. Если у вас будут другие блоки с абсолютным позиционированием, то в IE 6.0 они автоматически будут фиксироваться, т.е. необходимо соблюдать определенные правила в верстке и разметке.

2. В моем случае вообще исчезла полоса прокрутки (так уж получилось). Для видеоурока использовалась такая страница, где фиксирование происходит без этой потери.

Таким образом, мы получаем кроссбраузерное решение задачи.

Ссылки по теме:

  1. Статья Андрея Шитова «Полноценный fixed в MSIE».
  2. Emulating position fixed for Internet Explorer. 
  3. «Совместить fixed div и CSS menu».