Уроки Web-мастерства

Главная « Уроки Web-мастерства « Создание компонентов интерфейса в XHTML

Элементы навигации и CSS-меню на базе списков…

Web-страницы, создаваемые вами, состоят из контента, а также нескольких элементов интерфейса, обычно одинаковых для всех сайтов - меню навигационных ссылок, форм, списков и таблиц.

В этой статье я покажу, как создавать XHTML-код для этих компонентов и применять к ним CSS-стили. По ходу дела мы создадим библиотеку CSS-компонентов, которую вы сможете использовать как точку отправки при создании собственных страниц.

Достаточно будет просто открыть файлы примеров, скопировать код в код ваших страниц, а CSS-правила - в файл таблиц стилей и затем подкорректировать их для конкретных нужд. Это очень удобно и поможет вам сэкономить время, используя готовые заготовки, лишь слегка изменив их.

Списки…

Существует три вида списков: нумерованные, ненумерованные и списки определений. Для их создания используется похожий код, но применять их следует исходя из предназначения:

в ненумерованных списках по умолчанию для каждого пункта используется маркер, вы можете изменить маркер на пустой кружок, квадрат, изображение или тильду (˜);
в нумерованном списке пункты по умолчанию нумеруются, для чего можно выбрать в том числе латинские цифры и буквы;
списки определений (или вложенные списки) содержат подпункты; такой тип списка можно использовать, например, для предметного указателя.

Ненумерованный список открывается с тега <ul>, который содержит несколько пунктов списка (li) и закрывается тегом <⁄ul>.

Нумерованный список очень похож на ненумерованный, но для него используются теги <ol>…<⁄ol>. В таком списке каждый пункт последовательно пронумерован арабскими или латинскими цифрами либо буквами, в зависимости от значения свойства list-style-type. Поместить маркер пунктов списка можно как снаружи, так и внутри списка с помощью свойства list-style-position.

Добавление стилей к спискам…

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

Одним из преимуществ такого подхода является то, что если пользователь просматривает страницу в агенте, не поддерживающем CSS, например в мобильном телефоне, XHTML-разметки списка оказывается достаточно для вывода навигации или меню в приемлемом и понятном виде.

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

Код:

<div id="menunav">
<ul>
   <li>раздел №1</li>
   <li>раздел №2</li>
   <li>раздел №3</li>
   <li>раздел №4</li>
   <li>раздел №5</li>
   <li>раздел №6</li>
   <li>раздел №7</li>
</ul>
</div>

Вначале отобразим границы <div>, в котором находится наш список (рис. 1):

Код:

(рис. 1) Ненумерованный список внутри <div> с включенными границами.

Затем включим границы для элементов <ul> и (li), чтобы понять расположение отдельных элементов списка (рис. 2).

Код:

ul {
border: 1px solid #ff0000;
}
li {
border: 1px solid #008000;
}

(рис. 2) Включив границами для <ul> и (li), мы видим, что Firefox (вверху) и IE (внизу) по умолчанию применяют разные стили к спискам.

На рис. 2 граница <ul> выделена красным, а граница (li) - зеленым цветом. Как видно, браузер Firefox использует отступы для <ul>, чтобы сместить список (зеленые элементы отодвигаются от красного контейнера <ul>), а также добавляет небольшие верхнее и нижнее поле, чтобы отделить список от окружающих элементов.

Internet Explorer добавляет поля к <ul> (обратите внимание, что <ul> плотно обхватывает элементы (li), и оба они смещены от <div>), а также добавляет только нижнее поле. Эти различия затрудняют создание одинакового облика списков в различных браузерах. Единственным способом обойти их является изначальный сброс значений полей и отступов по умолчанию и последующее явное их указание.

Итак, зададим поля и отступы для <ul> и (li) обоих элементов списка равными нулю (рис. 3):

Код:

ul {
border: 1px solid #ff0000; margin: 0; padding: 0;
}
li {
border: 1px solid #008000; margin: 0; padding: 0;
}

(рис. 3) Теперь и Firefox (вверху), и IE (внизу) отображают списки идентично. Обратите внимание, что когда в Internet Explorer маркеры смещены за пределы <ul>, они не отображаются.

Теперь списки выглядят одинаково и в Firefox, и в Internet Explorer. Обратите внимание, что маркеры, принадлежащие элементам (li), теперь находятся за пределами <div>. Если <div> расположен прямо возле кромки окна, маркеры полностью не видны. Поэтому необходимо к <ul> добавить левое поле минимального размера, чтобы маркеры оставались внутри <div> и не накладывались на соседние элементы или, как в случае с Internet Explorer, попросту не исчезали.

Итак, зададим левое поле (рис. 4):

Код:

div#menunav {
border: 1px solid #000000;
width: 160px;
font-size: 11px;
margin: 20px;
}
ul {
border: 1px solid #ff0000; margin: 0 0 0 15px; padding: 0;
}
li {
border: 1px solid #008000; margin: 0;
}

(рис. 4) Задав для <ul> левое поле 15px, мы вернули маркеры обратно в <div>.

Обратите внимание, что все поля указаны в одном правиле. Ведь если не обнулить явно значения всех полей, браузер попытается добавить верхние или нижние поля, в зависимости от внутреннего стиля, и список снова будет выглядеть по-разному. Кроме того, теперь мы можем в любой момент при необходимости указать значения других полей, просто заменив (0) на нужное значение.

Давайте поменяем расстояние между пунктами списка, так как сейчас они расположены слишком близко друг к другу:

Код:

div#menunav {
border: 1px solid #000000;
width: 160px;
font-size: 11px;
margin: 20px;
}
ul {
border: 1px solid #ff0000; margin: 0 0 0 15px; padding: 0;
}
li {
border: 1px solid #008000; margin: 0; padding: 5px; 0;
}

Самый простой способ сделать это - использовать свойства margin-top или margin-bottom для элементов (li), но я предпочитаю применять идентичные отступы сверху и снизу.

Чтобы показать вам преимущества этого подхода над использованием полей, заменим рамки вокруг элементов на горизонтальные линии между ними (рис. 5):

Код:

div#menunav {
border: 1px solid #000000;
width: 160px;
font-size: 11px;
margin: 20px;
}
ul {
border: 1px solid #ff0000; margin: 0 0 0 15px; padding: 0;
}
li {
border-bottom: 2px solid #800000; margin: 0; padding: 5px; 0;
}

(рис. 5) Добавление горизонтальных линий является первым шагом на пути к приданию списку более дизайнерского облика.

Добавив верхние и нижние отступы для увеличения высоты элементов (li) вместо применения полей, мы получили расположение элементов (li) точно посередине каждой строки.

Теперь слегка подчистим этот список:

Удалим маркеры;
Добавим поля для <ul>, чтобы выровнять список внутри <div>;
Сместим пункты меню, создав отступы.

Вот какие изменения кода следует для этого выполнить (рис. 6):

Код:

(рис. 6) Теперь список выглядит лучше, однако с линией над первым элементом было бы более профессионально.

Наиболее заметные изменения мы внесли с помощью свойства list-style-type со значением none, удалив маркеры. С помощью свойства text-indent мы сместили текст от края списка, и добавив поле к элементу <ul> расположили список более привлекательно внутри контейнера.

Очевидно, что список будет выглядеть гораздо лучше, если мы добавим первому элементу верхнюю горизонтальную линию (рис. 7). Идеальным решением в данном случае будет использование border-top. Сделать это очень просто с помощью псевдокласса CSS :first-child. К сожалению, Internet Explorer не распознает этот псевдокласс.

Это значит, что мы либо можем использовать псевдокласс и признать, что этот способ не сработает в Internet Explorer, либо использовать трюк. Для начала используем псевдокласс, а затем подумаем о том, как обойти этот дефект в менее совместимом со стандартами, но популярном браузере Internet Explorer.

Вот код:

(рис. 7) Мы добавили верхнюю линию для первого элемента с помощью псевдокласса :first-child.

А теперь давайте познакомимся с простой уловкой для Internet Explorer. Когда мы удалили маркеры, элемент <ul> сузился до ширины элементов списка. Мы можем создать линию, применив стиль к элементу <ul>, содержащему все пункты списка.

Вместо приведенного выше кода допустимо использовать следующий, отображающий верхнюю линию и в Internet Explorer:

Kод:

Иногда можно найти простые ходы для решения проблем Internet Explorer, но бывает, приходится признать, что не все пользователи увидят страницу в одинаковом облике.

Теперь наш список начинает приобретать черты панели навигации. Осталось лишь превратить простой текст в ссылки - и перед нами привлекательный и функциональный элемент навигации (рис. 8).

Сделать это просто с помощью следующего кода:

Код:

<div id="menunav">
<ul>
   <li><a href="#">раздел №1</a></li>
   <li><a href="#">раздел №2</a></li>
   <li><a href="#">раздел №3</a></li>
   <li><a href="#">раздел №4</a></li>
   <li><a href="#">раздел №5</a></li>
   <li><a href="#">раздел №6</a></li>
   <li><a href="#">раздел №7</a></li>
</ul>
</div>

(рис. 8) Мы добавили ссылки. Теперь текст отображается с подчеркиванием.

Добавление стилей к ссылкам…

Теперь добавим ссылкам определенный стиль. Вначале удалим подчеркивание для обычного пассивного состояния, а затем сделаем так, чтобы при наведении указателя мыши на ссылку она меняла цвет.

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

Так как это последний этап настройки навигации, следует подчистить код: настроить нижнее поле <ul>, добавить контекст к селекторам, чтобы эти стили применялись только к элементам внутри <div> с именем menunav, и добавить трюк (а точнее, два трюка) чтобы линия над первым элементом отображалась в Internet Explorer для Windows.

Вот окончательный CSS-код для компонента навигации на базе списка (рис. 9):

Код:

body {
margin : 0;
padding : 0;
font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
background-color: #ffffff;
}
div#menunav {
border: 1px solid #000000;
width: 160px;
font-size: 11px;
margin: 20px;
}
div#menunav ul {
border: 0;
margin: 15px 20px 15px 15px; padding: 0;
list-style-type: none;
}
div#menunav li {
border-bottom: 2px solid #800000;
margin: 0; padding: 5px; 0;
text-indent: 5px
}
div#menunav li:first-child {
border-top: 2px solid #800000;
}
div#menunav a {
text-decoration: none;
color: #0099cc;
}
div#menunav a:hover {
color: #ff3300;
}
/* трюк для IE Win \*/
* html div#menunav ul {
border-top: 2px solid #800000;
}
/*конец трюка*/

(рис. 9) Готовое меню с выделением элемента при наведении на него указателя.

Трюк со звездочкой и обратной косой чертой…

Трюком я называю использование CSS не так, как это описывается в спецификациях. Трюки используются для включения или скрытия CSS от определенных браузеров. Зачастую трюки применяются для обхождения дефектов Internet Explorer.

Трюк со звездочкой…

Как мы знаем, прапрадедушкой всех элементов разметки является HTML; все другие элементы - его наследники. Однако Internet Explorer уникален тем, что содержит безымянный элемент, являющийся родительским для HTML. Ссылаясь на этот элемент, в селекторе мы создаем правило, понимаемое только Internet Explorer. Так как имя у этого элемента отсутствует, сошлемся на него с помощью звездочки (*).

Например, так:

Код:

div * ul {
...правила CSS...
}

В этом правиле <ul> не будет выбран, если он является дочерним элементом для <div>, и будет, если является внучатым. Мы используем звездочку, чтобы указать, что нам не важно, какие промежуточные элементы находятся между <div> и <ul>.

То есть, чтобы создать правило, понимаемое только Internet Explorer, мы пишем:

Код:

* html ...более точные селекторы... {
...правила CSS...
}

Например:

Код:

div#box {
border: 1px solid #00ffff;
}
* html div#box {
border: 1px solid ff0000;
}

В этом примере синюю рамку покажут все браузеры, кроме Internet Explorer, который отобразит красную рамку.

Тем не менее, браузер Internet Explorer для Mac более совместим со стандартами и может обработать как правила с (*), так и некоторые CSS-правила, недоступные IE/Win.

Поэтому следует убедиться, что используемый вами трюк со звездочкой будет воспринят только IE для Windows.

Трюк с обратной косой чертой…

Если мы напишем комментарий с обратной косой чертой перед закрывающей звездочкой:

Код:

/* комментарий \*/

Internet Explorer для Mac посчитает, что комментарий не закрыт, и воспримет весь последующий код как комментарий, до тех пор пока не встретит обычное закрытие комментария, состоящее из звездочки и косой черты.

Например:

Код:

/*трюк для IE Win \*/
* html div#menunav ul {
border-top: 2px solid #800000;
}
/* конец трюка*/

Здесь IE/Mac игнорирует строку с селектором * html. Таким образом, мы можем комбинировать трюки со звездочкой и обратной косой чертой, чтобы создать правило только для Internet Explorer для Windows.

XHTML-код меню навигационных ссылок…

И в завершении этой статьи, привожу полный XHTML-код со встроенным CSS-кодом, для меню навигационных ссылок:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Элементы навигации и меню на базе списков</title>

<style>

</style>
</head>

<body>

<div id="menunav">
<ul>
<li><a href="#">раздел №1</a></li>
<li><a href="#">раздел №2</a></li>
<li><a href="#">раздел №3</a></li>
<li><a href="#">раздел №4</a></li>
<li><a href="#">раздел №5</a></li>
<li><a href="#">раздел №6</a></li>
<li><a href="#">раздел №7</a></li>
</ul>
</div>

</body>
</html>

Урок написан по материалам книги Чарльза Уайк-Смита
«Стильный сайт с помощью CSS».

Урок № 5: | Дата: 16.07.2007 | Автор: Коровенков Юрий

Обсудить на форуме…

Что нужно для SEO?

Десять важных шагов

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

Создание компонентов интерфейса в XHTML

Элементы навигации и CSS-меню на базе списков…

Списки…

Добавление стилей к спискам…

Добавление стилей к ссылкам…

Трюк со звездочкой и обратной косой чертой…

Трюк со звездочкой…

Трюк с обратной косой чертой…

XHTML-код меню навигационных ссылок…

Облик поисковиков

Оглавление