Добавить в избранное  ||  Выравнивание элементов  ||  Начало  ||  Создание горизонтальных линий

7. Вертикальные линии

Вертикальные линии или как их еще называют на типографский манер, вертикальные линейки, прекрасный декоративный элемент, который находит применение в множестве разных случаев. Помещенная возле текста вертикальная линия привлекает к нему внимание читателя, позволяя тем самым выделять нужные абзацы или блоки текста. Вертикальные линии могут также служить для разделения колонок текста, чтобы взгляд читателя не перескакивал с одной колонки на другую и четко отделить одну колонку от другой.
Для создания вертикальной линии фиксированной высоты можно использовать изображение необходимого цвета размером 1 на 1 пиксел. Почему именно 1 на 1? Да это очень удобно. Размер файла ничтожно мал, зато его можно масштабировать как угодно (Пример 7.1).

Пример 7.1. Линия сделанная с помощью рисунка 1 на 1 пиксел

<img src="red1x1.gif" width="1" height="100" hspace="10"
align="left">

или для указания относительной высоты можно указать ее в процентах

<img src="red1x1.gif" width="1" height="50%" hspace="10" align="left">

В примере, файл с именем red1x1.gif представляет собой рисунок, состоящий из одного пиксела красного цвета.
Для изменения цвета такой линии придется делать новый рисунок в каком-нибудь графическом редакторе. Кроме того, высота линии фиксирована и ее сложно привязать к тексту, чтобы она изменялась вместе с ним. В этом случае, на помощь нам придет таблица. Создаем таблицу, одна из ячеек которой имеет ширину 1-2 пиксела. Параметры cellpadding и border должны быть равны нулю, а cellspacing определяет расстояние от текста до линии. А затем в этой ячейке указываем фон нужного цвета: <td width="1" bgcolor="#ff0000">
Чтобы такая линия была видна в браузере Netscape, в ячейку нужно что-нибудь поместить. Неразделяемый пробел & nbsp; для этой цели не очень годится, он может сделать линию слишком толстой, что нам не нужно. Самое идеальное – прозрачный рисунок размером 1 на 1 пиксел (в примере 7.2 он именуется spacer.gif).

Пример 7.2. Линия созданная с помощью таблицы

<table width="600" cellpadding="0" cellspacing="12" border="0"
align="center">
<tr>
<td width="4" bgcolor="#990000"><img src="spacer.gif" width="4"
height="1"></td>
<td>Каждый из рефлексирующих субъектов виртуального мира может
находиться в двух основных состояниях: стационарном и мобильном, при
котором они или сводят передвижение в трехмерном Евклидовом
пространстве с декартовой системой координат к абстрактному
минимуму, или ограничиваются формальными перемещениями массы в
некоторой части пространственного континуума.</td>
</tr>
</table>

Рис. 7.1. Результат выполнения примера 7.2.

Этим же самым способом можно воспользоваться для создания декоративных линий, например, как на рисунке 7.2 или 7.3.

Рис. 7.2.

Рис. 7.3.

Для этого в ячейку таблицы помещаем фоновый рисунок с помощью параметра background тега TD.

Пример 7.3. Декоративные вертикальные линии с помощью таблицы

<table width="600" cellpadding="0" cellspacing="12" border="0"
align="center">
<tr>
<td width="4" background="line.gif"><img src="spacer.gif" width="4"
height="1"></td>
<td>Каждый рефлексирующий субъект обладает набором знаний и имеет
позитивные возможности оказания влияния на информационное поле для
взаимодействия с субъектами виртуального мира, но в то же время
наделен плюралистическим мировоззрением, позволяющим ему при
необходимости достижения или сохранения собственных материальных
благ пренебрегать законами логики и здравого смысла.</td>
</tr>
</table>

Файл line.gif представляет собой изображение линии, как, например, показанное на рис. 2.5.

Добавить в избранное  ||  Выравнивание элементов  ||  Начало  ||  Создание горизонтальных линий

top