Основні методи позиціонування

Трохи інформації з власного досвіду. Як робити, чого чекати. На цьому сайті всі блоки «зафіксовані» абсолютно, але всі розміри задані у відсотках від екрану. Що ми з цього маємо – все «тягнеться» незалежно від розмірів екрану.

Але! Зверніть увагу! Подібне можливе лише у випадку з заповненням блоків текстом, при деякому коректуванні параметрів. Наприклад, блоки головного меню – всім їм задали фіксовану висоту у відсотках і додали властивість overflow: auto;. Нагадую, про що мова – якщо явно задати блоку висоту, а тексту буде більше, ніж розраховували, частина блоку просто «зріжеться», блок свого розміру не змінить. Якщо ми ставимо overflow: auto;, то при переповненні блоку в нього просто виникне свій скроллер для прокрутки вмісту.

Блоки, які знаходяться нижче, у висоті не обмежені – витягуються в залежності від «маси» тексту.

Якщо використовується графіка, має сенс ставити блокам з картинками або фіксовану ширину, або встановлювати мінімальну ширину блоку.
Мінімальна і максимальна ширина та висота блоку.

  • min-width і max-width – мінімальне та максимальне значення ширини блоку, задається як у відсотках, так і в пікселях, наприклад.
  • min-height і max-height – мінімальне та максимальне значення висоти.
    Якщо спрощено, то блок з описом
  • width: 70%; min-width: 500px; буде змінювати свою ширину в залежності від ширини екрана, але його ширина становить не менше 500 пікселів.

Позиціонування блоків

  • Перший варіант – позиціонування блоків, задаючи їм точні координати і розміри в пікселях. При врахуванні різночитань можна розмістити блоки в будь-якому порядку і в будь-якому місці сторінки. Але блоки мають фіксований розмір, що треба враховувати.
  • Другий варіант – позиціонування блоків, задаючи їм координати і розміри у відсотках. Дуже гнучка структура сторінки не залежить від розмірів екрану, але сильно залежить від вмісту блоків, від можливості розтягувати або стискати його.
  • Варіант третій – позиціонування блоків у залежності від їх функціонального призначення, суміш першого і другого методів з використанням усіх можливих доповнень. Під доповненнями слід розуміти завдання максимальних і мінімальних значень ширини і висоти блоків, застосування властивості overflow, врахування різночитань.

Якщо розібратися, поекспериментувати, то на справі застосовується тільки третій варіант – створити сторінку з перших двох методів можна тільки в особливо простих випадках.

Наприклад, створення стандартної горизонтальної «шапки» можливо, як мінімум, двома способами. Якщо шапка повинна мати певну висоту, то ми просто ставимо цю висоту в пікселях, а ширину у відсотках, в результаті отримуємо горизонтальну смугу шириною в екран.

При багатоблоковій структурі сторінки варто мати на увазі, що блоки виводяться в тому порядку, в якому вони розташовані в коді сторінки. Наприклад, ми створили шапку:

<DIV id=shapka >
зміст шапки
</DIV>

з описом:

body {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
background-color: #ffffff;
}

#shapka {
width:100%;
background:#A8C228;
border:2px solid #000000;
height: 100px;
margin:0px 0px 0px 0px;
}

Ми маємо блок жорстко не зафіксований, але розтяжний по горизонталі. Тепер додамо ще один опис блоку, розташованого по центру.

#centercontent {
width:60%;
background:#A8C228;
border:2px solid #000000;
margin:5px 0px 5px 0px;
left:0px;
}

Зверніть увагу! Ми поставили блоку зовнішній відступ зверху і знизу по 5 пікселів.

Тепер у body пишемо:

<DIV id=shapka>
зміст шапки
</DIV>

<DIV id=centercontent>
зміст блоку
</DIV>

<DIV id=centercontent>
зміст блоку
</DIV>

Отже, у нас не вказані точно координати жодного блоку, але структура цілком простежується. У блоки centercontent ми можемо заносити абзаци тексту, які будуть розташовуватися один під одним. Таких блоків у нас може бути скільки завгодно, тільки називай їх centercontent, і розташовуй в потрібному порядку. Крім того, всі блоки розтягуються по висоті, так що нас нічого особливо не повинно турбувати…

На що варто звернути увагу в даному прикладі.

  • По-перше padding: 0px 0px 0px 0px; і margin: 0px 0px 0px 0px; в описі BODY. Таке відчуття, що Explorer видає для BODY не тільки внутрішній, але і зовнішній відступ. У Netscape і Opera нічого подібного не спостерігається.
  • По-друге, зверніть увагу на вертикальну відстань між блоками centercontent у прикладі. Задані відступи і зверху і знизу по 5 пікселів, а між блоками всього п’ять, а не десять, як можна було очікувати. Це вам приклад взаємодії відступів, які перекриваються. Варто запам’ятати.

***

Це переклад статті.