. Структурно ж вони є списки посилань, і отже повинні оформлятися як такі.

Причина, за якою ми не оформляємо їх як списки, полягає в тому, що нам не дуже хочеться перед кожною посиланням у меню бачити маркер. У попередній статті я розповів про деякі прийоми верстки сторінок за допомогою CSS. В одному з тих прийомів ми навчилися виводити списки в рядок, а не вертикально.

В даній же статті я покажу, як за допомогою CSS можна приборкати ці неповороткі і незграбні списки. Чи вистачить їм безпритульне хитатися по ваших веб-сторінках. Настав ваш час командувати їм, як себе вести.

Готуємо арену

В Як предмет дресирування я вибрав прості ненумерованого списку. Всі згадані тут правила CSS можна застосувати і до нумерований списками з тим же результатом. У всіх прикладах (крім спеціально обумовлених випадків) використовується наступний список:

• Item 1

• Item 2

• Item 3

• Item 4

• Item 5 зробимо цей пункт трохи довше,

  щоб він переходив на наступний рядок

  Кожен список просто поміщений всередину окремого елемента

  , і поведінка списку визначається з допомогою цього DIV-а. Базове правило, що діє на всі DIV-и, таке:

  # base (

  border: 1px solid # 000;

  margin: 2em;

  width: 10em;

  padding: 5px;

  )

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

  Item 1

  Item 2

  Item 3

  Item 4

  Item 5 зробимо цей пункт трохи довше, щоб він переходив на наступний рядок

  Позиціонування

  Іноді для вашого дизайну відступ у списку прийнятий за замовчуванням може виявитися занадто великим. Але зміна тільки властивості margin або padding для елемента

  спрацьовує не для всіх браузерів. Для того, щоб список повністю пересунувся скажімо вліво, вам необхідно поміняти обидві властивості: і margin, і padding. Пов'язано це з тим, що Internet Explorer і Opera створюють відступ зліва у списку за допомогою лівого margin, а Mozilla/Netscape використовують для цього лівий padding. Докладніше про це читайте у статті Consistent List Indentation на сайті DevEdge.

  В наступному прикладі властивостям margin-left і padding-left у елементу UL присвоєно значення 0:

  Item 1

  Item 2

  Item 3

  Item 4

  Item 5 зробимо цей пункт трохи довше, щоб він переходив на наступний рядок

  Зверніть увагу, що маркери лежать за кордоном DIV-а. Якби контейнером був не DIV, а документа, маркери опинилися б за межами вікна броузера, тобто пропали б з очей геть. Якщо ви хочете, щоб маркери лежали всередині кордонів DIV-а, вздовж лівого його краю, надайте або властивості left-padding або властивості left-margin значення "1em".

  Item 1

  Item 2

  Item 3

  Item 4

  Item 5 зробимо цей пункт трохи довше, щоб він переходив на наступний рядок

  Маркери

  Скажімо, вам знадобився список з особливими маркерами. Як ви робили раніше? Створювали таблицю, в одній колонці розміщували gif-картинку маркера і зміщує її в комірці вгору і вправо. В іншій колонці розміщували текст, який повинен був би знаходиться в елементах

  . Тепер CSS дозволяє використовувати зображення в якості маркера. Якщо броузер не підтримує цю функцію CSS (або не підтримує висновок графіки), буде використаний маркер за замовчуванням (або той, який ви вкажете на цей випадок).

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

  ul (

  list-style-image: url (bullet.gif);

  )

  А броузер покаже список так:

  Item 1

  Item 2

  Item 3

  Item 4

  Item 5 зробимо цей пункт трохи довше, щоб він переходив на наступний рядок

  Для тих броузерів, які не підтримують висновок графіки, додайте до правил наступну рядок:

  list-style-type: disc;

  Зображення, вибране вами в якості маркера, може "виповзти" за кордону списку. Щоб цього не сталося, помістіть зображення всередину блоку

  . Для цього додайте наступний рядок:

  list-style-position: inside;

  Всі три декларації можна об'єднати в одне коротке правило:

  ul (

  list-style: disc url (bullet.gif) inside;

  )

  що еквівалентно

  ul (

  list-style-type: disc;

  list-style-image: url (bullet.gif);

  list-style-position: inside;

  )

  Список в результаті буде виглядати так:

  Item 1

  Item 2

  Item 3

  Item 4

  Item 5 зробимо цей пункт трохи довше, щоб він переходив на наступний рядок

  Буває так, що у вас є список, але вам не потрібні маркери, або ви хочете використовувати в якості маркера якийсь інший символ. Знову ж таки CSS поспішає до вас на допомогу. Додайте правило list-style: none; і зробіть елементи

  "надвісающімі". Всі правило цілком буде виглядати так:

  ul (

  list-style: none;

  margin-left: 0;

  padding-left: 1em;

  text-indent:-1em;

  )

  Або властивість лівий padding, або властивість лівий margin повинно мати значення 0, а інше - значення 1em. Змінюючи цю властивість ви можете підігнати розмір відступу від вашого маркера до прийнятного. Негативне значення в властивість text-indent призводить до того, що перший рядок кожного пункту списку зсувається вліво і "надвісает" над іншим текстом.

  Наступний наш список буде звичайним, тільки в якості маркера буде використаний стандартний HML-символ, наприклад », який відповідає закриває друкарською лапки: ".

  » Item 1

  » Item 2

  » Item 3

  » Item 4

  » Item 5 зробимо цей пункт трохи довше, щоб він переходив на наступний рядок

  Тут слід зазначити, що Netscape6/7/Mozilla (і інші похідні Gecko-броузери), а також Opera вміють генерувати контент з допомогою псевдо елементи: before з стандарту CSS2. Скористаємося цією функцією і згенеруємо автоматично символ "або якийсь інший символ в якості маркера. Таким чином нам не треба буде вписувати його вручну в кожен LI елемент. Якщо ви працює з браузером Opera або з сімейством броузерів Gecko, нижченаведений CSS створить такий же список, що і попередній, при цьому в сам список нічого додатково додавати не потрібно.

  # custom-gen ul li: before (

  content: "? сіх броузерах, крім 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 і приверне вашу увагу до ідеї структурної верстки.

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

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