Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Что насчет списков определений?





Обычно списки определений не требуют большого внимания, за исключением задания стиля dt (обычно жирный текст) и управления отступом определений:

dt { font-weight: bold;} dd { margin-left: 2em;}

Это задает четкое и простое оформление списков определений, как на рис. 32.13:


Рис. 32.13. Оформленный список определений

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

Вложенные списки

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

Если вы задаете свой собственный отступ списка, базовая настройка будет просто умножаться. Например, рассмотрим следующий код CSS:

ul, ol { margin-left: 0; padding-left: 0;} li { margin-left: 2em;}

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

Горизонтальные списки



Одним из наиболее распространенных изменений, требуемых при работе со списком, является создание горизонтального списка - то есть, вывод пунктов списка рядом друг с другом, а не один под другим. Это обычный прием при создании навигации сайта. Давайте воспользуемся примером из статьи о навигационных меню (см. рис. 32.14):


Рис. 32.14. Простой список

Давайте преобразуем его в горизонтальный список, как показано на рис. 32.15:


Рис. 32.15. Простой горизонтальный список

Чтобы добиться этого, необходимо сделать со списком три вещи:

· Удалить margin и padding из <ul>

· Задать для пунктов списка display: inline;

· Задать для пунктов списка некоторый пробел справа, чтобы избежать их слипания

В этом примере список имеет ID "mainmenu", поэтому будем использовать его в качестве контекстного селектора, чтобы гарантировать, что изменяется только тот список, который должен быть изменен. Код CSS имеет вид:

#mainmenu { margin: 0; padding: 0;} #mainmenu li { display: inline; padding: 0 1em 0 0;}

В этом простом примере задание для пунктов меню display: inline; будет достаточно; знайте также, что использование float: left;создает аналогичный вид. Мы познакомимся больше с плавающими элементами позже в курсе.

Ложные столбцы

Ранее мы создали список лент RSS. Теперь давайте представим, что список был помещен в боковую панель сайта. Дизайнер хочет, чтобысписок выводился двумя столбцами и с границей вокруг всей группы, как показано на рис. 32.16.


Рис. 32.16. Список лент в двух столбцах с иконкой RSS в качестве маркера

Давайте предположим, что список находится в элементе <div>, который задает ширину и границу. Базовый список будет выглядеть примерно как на рис. 32.17:


Рис. 32.17. Неоформленный список внутри границы

Добавим сначала иконку RSS, как было показано ранее; затем добавим поле 5px сверху, справа и слева:

.rss { margin: 5px 5px 0 5px; padding: 0;} .rss li { list-style-type: none; background: #fff url("icon-rssfeed.gif") 0 3px no-repeat; padding: 0 0 5px 15px;}

Нам не нужно добавлять нижнее поле, так как последний пункт списка будет добавлять правильный интервал своим заполнением, как видно на рис. 32.18:


Рис. 32.18. Полпути пройдено - мы имеем теперь правильный интервал и иконки маркеров

Теперь зададим для пунктов списка display: inline-block;, и зададим их ширину как 40%, а правое поле как 2% (можно использовать также ширину в пикселях). Необходимо также явно задать для <ul> ширину 100%, чтобы гарантировать, что список правильно заворачивается и измеряется:

.rss { margin: 5px 5px 0 5px; padding: 0; width: 100%;} .rss li { display: inline-block; width: 40%; margin: 0 2% 0 0; list-style-type: none; background: #fff url("icon-rssfeed.gif") 0 3px no-repeat; padding: 0 0 5px 15px;}

В большинстве браузеров этого будет достаточно для создания эффекта столбцов, но нужно будет явно настроить в браузере IE смещение пунктов списка влево. Давайте воспользуемся условным стилевым оформлением для всех версий до IE7 (так как мы еще не знаем, что будут делать будущие версии):

<!--[if lte IE 7]> <style type="text/css"> .rss li { float: left; } </style><![endif]-->

Мы имеем теперь требуемый двухстолбцовый результат, как видно на рис. 32.19:


Рис. 32.19. Готовый список









Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2018 zdamsam.ru Размещенные материалы защищены законодательством РФ.