Css design приборкання списків, комп'ютерна документація від а до я

. У ньому знаходиться абзац, потім стандартний список UL, і за ним - ще один абзац. Список UL був відредагований таким чином, щоб після кожного пункту була кома, а за останнім пунктом йшла точка.

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

A bit of text before the list appears. Perhaps the context is something about a husband getting a call from his wife to pick up a few things on the way home from work. It does not really matter, for our purposes we just need some preceding text before the list:

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

And then there is the text that follows the list in the paragraph. One or two sentences is sufficient for the example.

Як і в прикладі вище з маркером ми можемо за допомогою CSS автоматично генерувати коми і крапки. Якщо ваші відвідувачі користуються тільки броузерами Opera і Gecko, вам нема про що турбуватися. Стильові правила будуть виглядати ось так:

# Inline-list-gen ul li: after content: ",";
>

# Inline-list-gen ul li.last: after content: ".";
>

Тут ми використовуємо псевдо-елемент: after для додавання коми в кінці кожного пункту списку, а точку ставимо за допомогою класу class = "last". Результат буде таким (пам'ятаєте, він працює тільки в Opera або Mozilla / Netscape):

A bit of text before the list appears. Perhaps the context is something about a husband getting a call from his wife to pick up a few things on the way home from work. It does not really matter, for our purposes we just need some preceding text before the list:

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

And then there is the text that follows the list in the paragraph. One or two sentences is sufficient for the example.

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

Ось приклади горизонтальних списків, вміщених в один і той же базовий DIV з наступними правилами.

# H-contain padding: 5px;
border: 1px solid # 000;
margin-bottom: 25px;
>

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

символ | часто використовується для позначення різних варіантів вибору. Цілком природно використовувати його в меню. Симітіруем цей символ за допомогою кордонів у LI.

#pipe ul margin-left: 0;
padding-left: 0;
display: inline;
>

#pipe ul li margin-left: 0;
padding: 3px 15px;
border-left: 1px solid # 000;
list-style: none;
display: inline;
>

#pipe ul li.first margin-left: 0;
border-left: none;
list-style: none;
display: inline;
>

Ми додали клас class = "first" до першого LI, щоб у нього зліва не з'являлася непотрібна межа.

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

#button width: 12em;
border-right: 1px solid # 000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: # 90bade;
color: # 333;
>

#button ul list-style: none;
margin: 0;
padding: 0;
border: none;
>

#button li border-bottom: 1px solid # 90bade;
margin: 0;
>

#button li a display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid # 1958b7;
border-right: 10px solid # 508fc4;
background-color: # 2175bc;
color: #fff;
text-decoration: none;
width: 100%;
>

html> body #button li a width: auto;
>

#button li a: hover border-left: 10px solid # 1c64d1;
border-right: 10px solid # 5ba3e0;
background-color: # 2586d7;
color: #fff;
>

Нарешті, я дійшов до посилань. У вихідному дизайні зліва і справа були кордону по 10 пікселів кожен. Ці кордони міняли свій колір разом з фоном при наведенні мишки. Це поведінка досить просто отримати за допомогою псевдо-класу: hover. тому ефект зміни кольору кордонів і фону застосований до елементів .

Тут скористався одним трюком: щоб поведінка посилань поширювалося на весь блок (по ширині і висоті), я присвоїв їм правило display: block ;. Це спрацювало у всіх броузерах, крім IE для Windows. Якщо ви явно вкажіть ширину в 100%, IE для Windows все зрозуміє. Але при цьому ви отримуєте проблеми в браузерах IE5 для Mac і Netscape / Mozilla. Тому я схитрував: за допомогою дочірнього селектора ">" я присвоїв ширині значення "auto". Так як броузер IE для Windows не розуміє дочірніх селектор, він ігнорує це правило. IE5 для Mac, Opera і Netscape / Mozilla розуміють це правило, і всі залишилися задоволеними.

Правило для псевдо-класу: hover змінює колір фону і кордонів при наведенні мишки на посилання.

вершина айсберга

Марк Ньюхаус (Mark Newhouse) веде блог gnuhaus.com. працює в noao.edu. і пише статті для realworldstyle.com.