CSS Design Укрощение списков, CSS

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

Помню как в июле 1999 года я просвещал людей в мейл-листах о прелестях стилевой вёрстки. С той поры мало что изменилось.

Однако, кое-что изменилось. Изменился мой взгляд на CSS и на (X)HTML, который находится в роли каркаса для стилей. К примеру, я обнаружил, что большинство страниц содержат панель навигации. Очень часто она оформляются как обычная текстовая строка со ссылками, разделенными тегами

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

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

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

В качестве предмета дрессировки я подобрал обычные ненумерованные перечни. Все упомянутые здесь правила CSS можно задействовать и к нумерованным перечням с тем же результатом. Во всех примерах (не считая собственно оговоренных случаев) применяется следующий перечень:

Каждый перечень просто помещен в середину отдельного элемента

Без каких-то дополнительных стилевых правил, перечень в базовом DIV-е станет смотреться так:

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

В следующем примере особенностям margin-left и padding-left у элемента UL присвоено значение 0:

Скажем, вам понадобился перечень со специальными маркерами. Как вы поступали до недавнего времени? Создавали таблицу, в одной колонке размещали gif-картинку маркера и смещали ее в ячейке вверх и вправо. В другой колонке размещали текст, который должен был бы находится в элементах . Теперь CSS дает возможность применять изображение в качестве маркера. Если броузер не поддерживает подобную функцию CSS (или не поддерживает вывод графики), будет применен маркер по умолчанию (либо тот, который вы укажите на данный случай).

Стилевое правило выглядит так:

А броузер покажет перечень так:

Изображения, подобранное вами в качестве маркера, может «выползти» за границы перечня. Чтобы этого не случилось, разместите изображение в середину блока . Для этого прибавьте следующую строку:

Все три декларации можно соединить в одно короткое правило:

Перечень в результате станет смотреться так:

Либо свойство левый padding, либо свойство левый margin должно иметь значение 0, а другое — значение 1em. Меняя такое свойство вы можете приладить размер отступа от вашего маркера до оптимального. Отрицательное значение в свойстве text-indent приводит к тому, что первая строка каждого пункта перечня сдвигается влево и «надвисает» над остальным текстом.

Следующий наш перечень будет обыкновенным, только в качестве маркера будет применен обыкновенный HML-символ, к примеру », который отвечает закрывающей типографской кавычке: «.

Свойству content может быть присвоена текстовая строка, URL или что-нибудь другое, включая особенные символы. Если вы остановили собственный выбор на символе типа », в свойстве нужно прописать шестнадцатеричный код этого символа. У правой типографской кавычки это код 0BB (другой символ 020 — это пробел, добавлен из соображений красоты). Финишный результат предоставлен ниже (смотрите броузером Opera или Mozilla/Netscape):

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

Касается это не только перечня ссылок. Вам будет не лишним привести перечень пару раз в середине абзаца (к примеру, перечень книг). Структурно — это перечень, но до недавнего времени если бы вы такое выполнили, данный список разорвал бы ваш абзац. CSS снова приходит к вам на помощь!

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

Уже слышу крики: «Болван! Мы думали ты научишь нас, как помещать перечни в середине абзаца, а не между 2-мя абзацами.»

И на это я отвечу: «Ну да, вы правы. К большому сожалению (X)HTML не разрешает помещать перечни в середину абзаца. Впрочем при помощи стилей вы можете сделать вот что».

В первую очередь, вот стилевые правила:

Весь код помещен в

Результат выглядит так (перечень выделен синим цветом):

Тут мы применяем псевдо-элемент :after для добавки запятой по завершению каждого пункта перечня, а точку ставим при помощи класса >

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

Вот варианты горизонтальных перечней, помещенных в одинаковый базовый DIV с такими правилами.

Два примера ниже применяют все тот же UL только без длинного текста в последнем пункте. Добавлен также дополнительный класс, который дает возможность отдельно работать с одним из LI в перечне.

Символ | активно применяется для определения разных вариантов выбора. Абсолютно естественно применять его в меню. Сымитируем этот символ при помощи границ у LI.

Мы добавили класс >

Примечание: данный прием был предложен Ренделом Растом (Randal Rust), а потом его улучшили подписчики перечня рассылки css-discuss

Еще 1 вид ссылок, которые в большинстве случаев размещаются в горизонтальном положении на веб-странице — это знаменитые всем нам ссылки-цепочки (breadcrumb links). Данные ссылки показывают воочию, где в иерархии сайта вы нынче находитесь — весь путь ваш от главной страницы до текущего раздела или страницы. Если вы на самом деле желаете сделать код вашей страницы семантически правильным, данный тип ссылок необходимо оформить как серию вложенных перечней, так как каждый раздел считается частью прошлого раздела:

в результате приобретаем:

приобретаем вот что:

Закончу собственную публикацию настоящим примером, в котором применен описанный выше прием. Мы возьмём обыкновенный перечень UL со ссылками и создадим динамическое меню с эффектами перекатывания. Для создания эффекта перекатывания зрительные стили будут использоваться к элементам A, а детали UL и LI будут служить только как структурный каркас.

Дайте разберем стилевую таблицу правило за правилом, и я объясню зачем необходимо любое из них.

Правило первое — для DIV-а #button. Оно задает, сколько места будет занимать меню, и создаёт контекст, чтобы мы могли управлять поведением ссылок и пунктов перечня. Я избрал составить меню гибким и зависимым от установок броузера, благодаря этому (практически) все значения заданы в «em»-ах. Включая ширину меню. Черная граница была взята из начального дизайна Майкла. Большой нижний отступ (padding) у меню осуществлен для того, чтобы вы могли наблюдать фон у DIV. Снова таки, это было выполнено, чтобы повторить исходный дизайн. Нижнее поле (margin) применяется для того, чтобы разделить меню от того, что за ним идет. Все цвета взяты из начального дизайна.

Здесь я определил, каким должен быть перечень. Так как все пункты перечня у нас являются ссылками, а эффект перекатывания пока есть только у ссылок, я намерено удалил все тематические правила из перечней. Я добавил лишь границу шириной в один пиксель, у которой цвет сходится с цветом фона DIV-а #button. Эта граница служит разделителем между пунктами меню. В исходном дизайне для этого применялась отдельная картинка.

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

Тут воспользовался одним трюком: чтобы поведение ссылок распространялось на весь блок (по высоте и ширине), я присвоил им правило display: block;. Это сработало во всех броузерах, не считая IE для Windows. Если вы откровенно укажите ширину в 100%, IE для Windows все поймет. Однако при этом вы получаете проблемы в броузерах IE5 для Mac и Netscape/Mozilla. Благодаря этому я схитрил: при помощи дочернего селектора « > » я присвоил ширине значение «auto». Так как броузер IE для Windows не понимает дочерних селекторов, он игнорирует данное правило. IE5 для Mac, Opera и Netscape/Mozilla знают данное правило, и все остались удовлетворенными.

Правило для псевдо-класса :hover меняет цвет фона и границ при наведении мышки на ссылку.

Все стилевые правила и перечень (1 кб кода) заменили ориентировочно 5кб JavaScript-ов и вложенных таблиц, уже не говоря о ориентировочно 8кб графических файлов, применявшихся для создания эффекта перекатывания. По мимо того разметка стала более читаемой, ее легче оновлять, так как вам не надо создавать новые картинки, если поменяется наименование какого-нибудь меню. Нужно только заменить текст. Конечный вариант меню вы можете посмотреть на ресурсе Asset Surveillance.

Желаете верьте, желаете — нет, но мы лишь слегка побеспокоили тему перечней и того, что с ними можно выделывать при помощи CSS. Я не утверждаю, что все приемы, изложенные здесь, являются верхом совершенства, но я очень надеюсь что эта статья изменит ваше отношение к CSS и привлечет ваше внимание к идее структурной верстки.