Блог счастливого веб-разработчика Голосов: 1 Адрес блога: http://ridler-fun.livejournal.com/ Добавлен: 2010-12-26 16:27:55

Использование маркированных списков.

2010-12-20 13:33:14 (читать в оригинале)

 По сути, панель навигации - не что иное, как набор ссылок, а точнее, она представляет собой список разделов сайта. Из этого следует что? правильно, из этого следует что мы всегда должны использовать теги в соответствии с их функциональным назначением, чтобы они соответствовали заключенному в них содержимому. Например, для списка элементов это должен быть тег <ul>, или тег неупорядоченного, маркированного списка. Не имеет значения, будет ли список вообще без маркеров или будет располагаться горизонтально вдоль верхнего края веб-страницы: всё форматирование тега <ul> обеспечено средствами языка CSS.





Применение HTML для создания панели навигации - это и есть использование языка разметки по самому её прямому назначению ;) В каждом элементе списка имеется по одной ссылке. Кроме того, нам всего лишь нуобходимо стилизовать этот маркированный список (не нужно, чтобы его пункты составляли панель навигации). Правильным подходом и методом будет применение стилевого класса или стиля с идентификатором (ID - стиля) к тегу <ul>:

<ul class="navigation">
       <li><a href="index.php">Главная</a></li>
       <li><a href="news.html">Новости</a></li>
       <li><a href="aboutme">О нас</a></li>
</ul>

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

1. Удалить маркеры. Чтобы панель навигации не была похожа на маркированный список, удаляем маркеры, установив для свойства list-style-type значение none: ul .navigation { list-style-type: none; }
2. Убрать отступы и поля. Так как браузеры сами делают отступы для элементов списка, то мы также избавляемся от них. Однако одни браузеры используют для этих целей свойство padding, а другие - margin, поэтому нам нужно установить для обоих свойств значение 0:

             ul .navigation
             {
                list-style-type: none;
                padding-left: 0;
                margin-left: 0;
             }

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