В данном фрагменте текста страницы моего сайта я хочу продавать контекстные ссылки

Координаты и размеры

14 октября 2010 - Администратор

Координаты и размеры   

Стандарт CSS-P позволяет с точностью до пикселя разместить блочный элемент разметки в рабочем поле окна браузера. При таком подходе возникает естественный вопрос о том, как устроена система координат, в которой автор страницы производит размещение компонентов страницы.

CSS-P определяет две системы координат: относительную и абсолютную. Это позволяет обеспечить гибкость размещения элементов как относительно границ рабочего поля окна браузера, так и относительно друг друга.

Блоки - это не абстрактные точки, которые не занимают на плоскости cтраницы места. Блоки - это прямоугольники, которые "заметают" площадь. Текст и другие компоненты страницы под блоком перестают быть доступными пользователю, поэтому линейные размеры блока имеют для создания HTML-страниц не меньшее значение, чем координаты блока.

Абсолютные координаты

При использовании "абсолютных" координат точка отсчета помещается в верхний левый угол окна браузера, а оси X и Y направлены вправо по горизонтали и вниз по вертикали, соответственно:

Если в этой системе координат некоторый блочный элемент должен быть размещен на 10px ниже верхнего обреза рабочей области браузера и на 20px правее правого края рабочей области браузера, то его описание будет выглядеть следующим образом:

.example {position:absolute;top:10px;left:20px;}

[Открыть окно примера]

В данной записи тип системы координат задан атрибутом position (значение - absolute), координата X задана атрибутом left (значение - 20px), координата Y задана атрибутом top (значение - 10px).

Атрибуты top и left определяют координаты верхнего левого угла блока в абсолютной системе координат.

Значения координат могут быть и отрицательными. Для того, чтобы убрать из отображаемой области блок с линейными размерами 100px (высота) на 200px(ширина) достаточно отпозиционировать его следующим образом:

.example {position:absolute;
top:-100px;left:-200px;
width:200px;height:100px;}

[Открыть окно примера]

Абсолютное позиционирование применяется тогда, когда либо все содержание страницы должно быть доступно без скроллинга ("прокрутки"), либо когда элементы разметки находятся в начале страницы и их взаимное размещение важно с точки зрения дизайна, например, для организации всплывающих меню.

Относительные координаты

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

В качестве точки отсчета в этой системе координат выбрана точка размещения текущего блока по умолчанию. Ось X при этом направлена горизонтально вправо, а ось Y - вертикально вниз.

Для задания координат блока в этой системе применяют запись типа:

<div style="border-width:1px;border-style:solid;
width:100%;height:100px;">
<div style="position:relative;top:0px;left:0px;
border-width:1px;">
Этот блок находится в точке отсчета относительных координат
</div>
<div style="position:relative;top:0px;left:50px;
border-width:1px;">
А этот блок смещен вправо на 50px
</div>
</div>

Этот блок находится в точке отсчета относительных координат
А этот блок смещен вправо на 50px

Для работы с относительной системой координат лучше пользоваться универсальными блоками DIV. Это связано с тем, что в NN, например, параграф не может содержать параграфов. Любой блок немедленно закрывает параграф, следовательно, вложить в него что-либо нельзя.

Следует отметить, что NN вообще непредсказуем в работе с относительными координатами, поэтому в нем их следует избегать.

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

<div
style="position:relative;
top:0;
left:50;
border-width:1px;
border-style:solid;
width:200px;">
<a class=doc
href="javascript:
if(flag==0)
{window.document.layers[2].left=-50;flag=1;}
else
{window.document.layers[2].left=50;flag=0;};
void(0);">
Сдвинуть слой
</a>
</div>

В данном примере слой, первоначально сдвинутый на 50 пикселей вправо, после нажатия на гипертекстовую ссылку смещается на 100 пикселей влево, получая отрицательную величину смещения по оси X (left:-50px). После повторного нажатия на ссылку положение блока восстанавливается.

Линейные размеры блока

Линейные размеры блока задаются двумя параметрами: шириной(width) и высотой(height) блока. В браузерах ширина и высота блока интерпретируется по разному.

В NN ширина и высота блока - это рекомендуемые параметры. Если текст выходит за эти ограничения, то блок увеличивается до необходимых размеров, если текста нет вообще, то блок сжимается до маленького квадрата:

<p style="width:200px;
height:100px;
background-color:darkred;
color:white;">
...
</p>

Текст размещен для того, чтобы блок был виден в Netscape Navigator

Приведенного в примере описания должно хватить для получения результата, но в NN для такого блока нужно применить некоторые дополнительные атрибуты:

<p style="width:200px;
height:100px;
background-color:darkred;
color:white;
border-width:1px;
border-color:white;">
<span style="color:white;">
...
</span>
</p>

Без границы блок не будет залит темно-красным цветом, а без span текст будет отображаться цветом умолчания для данной страницы. Никакому разумному объяснению такое поведение браузера не поддается, поэтому не стоит на этих атрибутах строить дизайн страниц.

далее

Рейтинг: 0 Голосов: 0 1753 просмотра
Комментарии (0)

Нет комментариев. Ваш будет первым!

Яндекс цитирования
В случае перепечатки материалов активная ссылка на cattus.ru обязательна
© 2004-2013 cattus.ru