Над кнопками исчезла, но с левой стороны паиели навигации так и не появилась

(см. рис. 9.18, 3). Это еще одно свидетельство сложности использования плавающих

Элементов. Они вышли из обычного потока содержимого документа,

и браузер больше не видит их в качестве составной части тега <u1>. Тег уменьшился

До минимальных размеров, именно поэтому его нижняя граница отображается

Поверх остального содержимого (это может показаться слишком запутанным,

Но так оно и есть, именно поэтому работе с плавающими элементами

Посвящена отдельная глава книги - см . гл . 12).

К счастью, несмотря на то, что проблема кажется достаточно сложной, ее решение

Совсем простое. Добавим одно СSS-свойство к маркированному списку .

6. Добавьте два свойства в конце стиля #ma inNav:

#mainNav {

margin : 0:

paddi ng: 0:

l i st -style : none :

border-1eft: lpx dashed #999999:

overflow: hidden:

zoom: l; /* for IE б *1

Обучающий урок 2: соэдание панели навигации 289

Код overfl ow: hi dden заставляет расширяться неупорядо'):енный список. Почему

Свойство работает? Об этом вы узнаете в гл. 12. А код zoom: 1 предназначен

Только для Internet Explorer 6.

Наконец, значок скрепки, выровненный по правому краю нажатой кнопки Quiz,

Выглядит неплохо (см. рис. 9.18, 4), но лучше позиционировать его по левому

Краю.

7. Найдите стиль выбранной кнопки,· созданный в шаге 6 (это стиль с длинным

селектором). Измените координаты его свойства background с 97% 100% на Зрх 100%.

Теперь стиль должен выглядеть следующим образом:

#home #homelink.

#feature #featurelink.

#expert #experlink.

#quiz #quizlink.

#project #projectlink.

#horoscope #horoscopelink

{

background-color: #FFFFFF:

background-position: Зрх 100%:

padding-right: 15рх:

padding- left: ЗОрх:

font-weight: bold: