Вибір стандартних маркерів в списках в загальному невеликий, особливо якщо вести мову про ненумерованих списках. Як бути, якщо стоїть завдання створити і використовувати свої власні маркери, текстові або графічні? Завдання це цілком вирішувана ....
Правда відразу обмовлюся, що для початку ми розберемо швидше теоретичні основи, оскільки існує браузер названІЕкоторого все знають. Нормальне рішення засноване на використанні автоматично генерується контенту, а вищезгаданий браузер (будемо чесними до кінця - не тільки він один) не підтримує цю можливість. Зате це прекрасно працює в Mozilla, FireFox, Netscape 6, Opera і Safari. А потім розберемо і універсальне рішення. На жаль, не таке витончене.
Подивіться на цей CSS-код:
Для початку приховуємо маркер списку, який є за замовчуванням за допомогою list-style: none; потім встановлюємо лівий відступ 1em, але при цьому зрушуємо текст вліво на ту ж величину, тобто -1em для того, щоб «виштовхнути» стандартний маркер з блоку елемента списку. За допомогою псевдоелемента: before генеруємо текстовий маркер. У властивості content потрібні символи вказані за допомогою шістнадцятирічного escape-еквівалента Unicode, як того вимагає специфікація CSS2.1. У прикладі згенерована послідовність символів з подвійної стрілки-ялинки і пробілу. Витончено, просто і красиво, але не для IE ...
... і рішення, яке підійде для всіх браузерів. На жаль, вже не таке гарне. Текстовий маркер доведеться просто вставляти перед кожним елементом списку. Як показано нижче:
а таблицю стилів для цього варіанту треба трохи змінити. Ось так:
Однак і в цьому способі є недолік, правда не дуже критичний. Якщо в браузері користувача відключена підтримка CSS, він побачить два маркера для кожного елемента списку - маркер, що генерується браузером і маркер, який ми додали вручну.
Розберемо інше питання: як зробити маркер, використовуючи картинку?
Для того, щоб застосувати графічний маркер використовується властивість list-style-image. як показано в прикладі нижче
Властивість list-style-type використовується тут про всяк випадок, якщо браузер користувача не має можливості використовувати зображення. А у властивості list-style-image задається шлях до потрібної картинці. Управляти розміром картинки, яка використовується як маркер списку, з таблиці CSS ми не зможемо і тому треба переконатися в тому, що картинка має відповідні розміри. Ще один нюанс полягає в тому, що значення графічних маркерів успадковуються і якщо Ви створюєте вкладені списки і хочете відмовитися від маркера зображення в них, треба знову використовувати властивість list-style-image. Ось таким чином:
А ось якщо хочеться в якості маркера списку мати досить велику картинку, такий спосіб вже не підійде, оскільки частина картинки може бути просто «обрізана». Щоб обійти це обмеження потрібно вчинити трохи інакше:
Спочатку ставимо значення і для лівого поля і для лівого відступу списку (чому саме так, я пояснював в одній з попередніх статей). Потім видаляємо маркер, який використовується за умовчанням. Тепер головне: padding: 0.5em 0 0.5em 54px; - ми звільняємо місце зліва від елемента списку, для того, щоб вставити туди нашу велику картинку (наприклад 54х54 пікселя), потім задаємо властивість font таким чином, щоб текст елемента списку не дисонували із розміром картинки-маркера і нарешті використовуємо властивість background. щоб цю картинку вставити в якості маркера списку.