Вертикальные линии, или на типографский манер вертикальные линейки, прекрасный декоративный элемент, который находит применение в множестве разных случаев. Помещенная возле текста вертикальная линия привлекает к нему внимание читателя, позволяя тем самым выделять нужные абзацы или блоки текста. Вертикальные линии могут также служить для разделения колонок текста, чтобы взгляд читателя не перескакивал с одной колонки на другую и четко отделить одну колонку от другой.
Для
создания вертикальной линии фиксированной высоты можно использовать
изображение необходимого цвета размером 1 на 1 пиксел. Почему именно
1 на 1? Да это очень удобно. Размер файла ничтожно мал, зато его
можно масштабировать как угодно.
Для изменения цвета такой линии придется делать новый рисунок в каком-нибудь графическом редакторе. Кроме того, высота линии фиксирована и ее сложно привязать к тексту, чтобы она изменялась вместе с ним. В этом случае, на помощь нам придет таблица.
Создаем таблицу, одна из ячеек которой имеет ширину 1-2 пиксела.
Параметры cellpadding и border
должны быть равны нулю, а cellspacing
определяет расстояние от текста до линии. А затем в этой ячейке
указываем фон нужного цвета: <td width=1
bgcolor=#ff0000>
Чтобы такая линия была видна в Netscape, в ячейку нужно что-нибудь
поместить. Неразделяемый пробел
для этой цели не очень годится, он может сделать линию слишком толстой,
что нам не нужно. Самое идеальное — прозрачный рисунок размером
1 на 1 пиксел.
Этим же самым способом можно воспользоваться для создания декоративных
линий, например, как на рис. 1 или 2.
 |
 |
| Рис. 1 | Рис. 2 |
Для этого в ячейку таблицы помещаем фоновый рисунок с помощью параметра
background тега TD.
Так, для рисунка 1, это, например, будет вот такое фоновое изображение:
Рамка вокруг изображения не создается и приведена лишь для наглядности.
Пример 3. Декоративные вертикальные линии с помощью таблицыДля создания вертикальных линий привязанных к блоку текста и зависящих от его высоты, можно воспользоваться стилями.
Спецификация CSS описывает несколько свойств, с помощью которых можно установить вертикальную линию у блочных элементов. border-right — задает линию справа от блока, border-left — слева. Это универсальные свойства, они определяет одновременно толщину, стиль и цвет линии, которые описываются через пробел (пример 4).
Пример 4. Создание линии с помощью стилейПервый параметр определяет толщину линии в пикселах, второй —
стиль линии, возможные значения и их вид приведены на рис. 3, последний
параметр задает цвет линии, в данном случае — темно-красный.
Рис.3. Стили линий
Первые два стиля — dotted и dashed стали поддерживаться браузерами Netscape и Internet Explorer только со старших версий.
Параметр padding-left, используемый в примере, добавлен для создания отступа между линией и текстом. Без него текст «налипает» на линию, что ухудшает его вид и читабельность.