5822-1 (Раздвижные двери CSS), страница 2

padding:5px 15px 4px;

}

#header #current a {

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

padding-bottom:5px;

}

Это изменение делает нижнюю границу видимой сквозь обычные закладки, но прячет ее для текущей закладки. Мы получаем пример 3.

Заключительные шаги

Внимательный взгляд мог заметить в предыдущем примере белые участки по углам закладок. Эти непрозрачные уголки мешают задней картинке быть видимой через левый угол переднего изображения. Теоретически мы могли бы сделать эти уголки такого же цвета как и фон позади них. Но наши закладки могут увеличиться по высоте, и тогда задний градиентный фон сдвинется вниз, что приведет к рассогласованию цвета уголков и фонового градиента. Вместо этого мы изменим наши картинки, сделав их уголки прозрачными. Если к обводке закладок применено сглаживание (anti-aliasing), мы зададим в качестве прозрачного цвета (matte) среднее значение заднего фонового градиента.

Теперь, когда уголки прозрачны, кусочек правого изображения просматривается через прозрачный угол левого. Чтобы избежать этого, добавим небольшой левый отступ к элементу списка, равный ширине левого изображения (9px). Чтобы сохранить центрирование текста после добавления отступа к элементу списка, необходимо убрать такую же величину левого отступа у ссылки (15px - 9px = 6px):

#header li {

float:left;

background:url("right.gif")

no-repeat right top;

margin:0;

padding:0 0 0 9px;

}

#header a {

display:block;

background:url("left.gif")

no-repeat left top;

padding:5px 15px 4px 6px;

}

Но и этот вариант нас не устроит, так как левая картинка теперь отодвинута от левого края закладки на 9 пикселей добавленного отступа. Теперь, когда внутренние края левого и правого «дверных проемов» стыкуются друг с другом, нам больше нет надобности держать левую картинку впереди. И мы можем изменить очередность фоновых картинок, применив их к противоположным элементам. Мы также должны поменять картинки и для текущей закладки:

#header li {

float:left;

background:url("left.gif")

no-repeat left top;

margin:0;

padding:0 0 0 9px;

}

#header a, #header strong, #header span {

display:block;

background:url("right.gif")

no-repeat right top;

padding:5px 15px 4px 6px;

}

#header #current {

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

}

#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 постоянно сокращается и приближается к нулю.

Варианты

Мы только что детально разобрали метод «Раздвижных дверей», который позволяет создавать сверстанную с помощью ненумерованного списка и ссылок и доработанную при помощи нескольких правил CSS закладочную навигацию на основе простого текста. Такая навигация быстро загружается, проста в поддержке, а текст внутри нее может быть значительно масштабирован в любую сторону без нарушения дизайна. Стоит ли говорить, насколько гибким является этот метод при создании любой утонченно выглядящей навигации?

Использование этой техники ограничивается только нашим воображением. Заключительный пример иллюстрирует всего лишь один вариант. Но этот пример не должен ограничивать наши идеи.

Закладки, например, необязательно должны быть симметричными. Я быстро создал второй вариант закладок, в котором использовал простые цвета, угловатые формы и более широкую и сложную по форме левую сторону. Как показывает вариант 2, мы можем свободно менять порядок левого и правого изображений в зависимости от дизайна. При четком планировании и искусном обращении с картинками, можно отказаться от нижней границы в пользу стилевого сочетания картинок с фоном, расположенным позади, как показано в созданном мной варианте 3. Если ваш браузер поддерживает переключение между альтернативными стилями, вы можете просмотреть все представленные варианты, открыв этот мастер-файл и переключаясь в нем между таблицами стилей. [В NN7.1 доступ к альтернативным стилям осуществляется через главное меню View>Use Style, в Opera 7.20—через главное меню View>Style, в IE/Win такой возможности нет—прим. переводчика]

К примененной технике могут быть добавлены другие эффекты, которые мы здесь не рассматриваем. В нашем примере мы меняли цвет текста для состояния hover, но почему бы не поменять фоновое изображение целиком для получения интересных ролловер-эффектов. При наличии в коде двух вложенных HTML элементов мы всегда можем использовать CSS для накладывания фоновых изображений и получения эффектов, о которых мы и не мечтали. В нашем примере мы создали горизонтальный ряд закладок, но метод Раздвижных дверей можно использовать и во многих других случаях. Какое применение этому методу предложите вы?

Список литературы

Для подготовки данной работы были использованы материалы с сайта http://www.webmascon.com/