Відносні координати

Дана координатна система дозволяє розмістити блоки на сторінці в координатах охоплює їхнього блоку. Переваги такої системи координат очевидні: вона дозволяє зберігати взаємне розташування елементів розмітки при будь-якому розмірі вікна браузера і його налаштуваннях за умовчанням.

В якості точки відліку в цій системі координат обрана точка розміщення поточного блоку за замовчуванням. Вісь 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>

Рис. 12.8. Відносні координати

Для роботи з відносною системою координат краще користуватися універсальними блоками DIV. Це пов'язано з тим, що в Netscape Navigator, наприклад, параграф не може містити параграфів. Будь-який блок негайно закриває параграф, отже, вкласти в нього що-небудь не можна.

У відносної системі координат можна користуватися негативними зміщеннями:

<DIV STYLE = "position: relative;

top: 0; left: 50; border-width: 1px;

border- style: solid; width: 200px; ">

<A 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>

Рис. 12.9. Відносні координати

Рис. 12.10. Відносні координати

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

Лінійні розміри блоку

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

У Netscape Navigator ширина і висота блоку - рекомендовані параметри. Якщо текст виходить за ці обмеження, то блок збільшується до необхідних розмірів, а якщо тексту немає взагалі, то блок стискається до маленького квадрата:

<P STYLE = "width: 200px; height: 100px;

background-color: black; color: white; ">

...

</ P>

Наведеного в прикладі опису достатньо для отримання результату, але в Netscape Navigator для такого блоку потрібно застосувати деякі додаткові атрибути:

<P STYLE =" width: 200px; height: 100px;

background-color: black; color: white;

border-width: 1px; border-color: white; ">

<SPAN STYLE="color:white;">

...

</ SPAN>

</ P>

Рис. 12.11. Лінійні розміри блоку

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