Предыдущая страница реферата | 1  2  3  4  5  6  7  8 | Следующая страница реферата

#header #current a {

 background-image:url("right_on.gif");

 padding-bottom:5px;

 }

Сделав это, мы получаем пример 4. Заметьте, что предпринятые нами для создания прозрачных углов шаги, привели к появлению небольшой «мертвой» зоны в левой части закладки, где она не реагирует на наведение мыши. Мертвая зона находится вне текста, но она все же заметна. Прозрачные картинки для каждой стороны нашей закладки использовать необязательно. Если мы предпочтем не иметь на нашей закладке «мертвого» участка, нужно всего лишь использовать позади закладок сплошную заливку, а не градиент, и сделать уголки закладок такого же цвета. Пока же мы сохраним прозрачность углов. [В IE/Win упомянутая «мертвая» зона существовала и до предпринятых шагов, причем со всех сторон от текста ссылки. Решение этой проблемы освещено в следующей статье серии Sliding Doors of CSS, Part II.—прим. переводчика]

- - -

Ну и, наконец, последние штрихи. Все за один раз: делаем весь текст полужирным, текст на обычных закладках коричневым, а на текущей—темно-серым, этот же цвет присваиваем тексту для состояния ссылки hover, убираем подчеркивание ссылок. Все сделанные к этой минуте добавления и изменения представлены в примере 5.

Еще один метод для обеспечения совместимости

Рассмотрев пример 2, мы признали наличие проблемы с IE5/Mac, который растягивал закладки на всю ширину окна, выстраивая их вертикально одна под другой. Не совсем тот эффект, которого мы добиваемся.

В большинстве браузеров применение к элементу свойства float влечет его сжатие до минимально возможного размера, определяемого его контентом. Если плавающий элемент содержит картинку (или сам является картинкой), то он сожмется до ширины картинки. Если он содержит только текст, то сожмется до ширины самой длинной строки текста, не содержащей переносов.

Проблемы возникают в IE5/Mac, когда блочный элемент с шириной auto помещается внутрь плавающего элемента. В этом случае все браузеры сжимают плавающий элемент до минимально возможной ширины, не обращая внимания на внутренний блочный элемент. А вот IE5/Mac в описанной ситуации этого не делает. Вместо этого он растягивает плавающий и внутренний блочный элементы на всю доступную ширину. Чтобы обойти такое поведение, нам нужно применить float также и к ссылке, но только для IE5/Mac, не затрагивая другие браузеры. Сначала добавим float к уже существующему правилу. Затем применим «Метод обратного слэша», чтобы спрятать от IE5/Mac новое правило, которое удаляет float для остальных браузеров:

#header a {

 float:left;

 display:block;

 background:url("right.gif")

 no-repeat right top;

 padding:5px 15px 4px 6px;

 text-decoration:none;

 font-weight:bold;

 color:#765;

 }

/* Commented Backslash Hack

 hides rule from IE5-Mac */

#header a {float:none;}

/* End IE5-Mac hack */

В соответствии с примером 6 IE5/Mac теперь отображает закладки как положено. Для остальных браузеров ничего не изменилось. IE5/Mac содержит огромное количество CSS-багов, которые были исправлены в версии IE5.1. От этих багов в IE5/Mac страдает и метод «Раздвижных дверей». Их число превосходит все мыслимые пределы, и я не собираюсь с ними бороться. А так как обновление до 5.1 уже довольно длительное время доступно для всех желающих, процент Маков c OS 9 и установленным IE5/Mac постоянно сокращается и приближается к нулю.

Рекомендуем скачать другие рефераты по теме: доклад, контрольные работы 2 класс.



Предыдущая страница реферата | 1  2  3  4  5  6  7  8 | Следующая страница реферата

Поделитесь этой записью или добавьте в закладки