Фіксований дизайн. Розміщення трьох колонок

23.09.2010

Влад Мержевич

Альтернативний підхід до створення макету з трьома колонками за допомогою шарів полягає в застосуванні методів позиціонування. Це включає в себе використання властивостей position разом з left і top. Так само, як при верстці двоколонного макету, існують два підходи: з використанням абсолютного та відносного позиціонування елементів.

Абсолютне позиціонування

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

Основною перевагою абсолютного позиціонування є зручність визначення місця розташування елементів. Це нагадує аплікацію, коли ми точно знаємо, куди і як потрібно розмістити потрібний фрагмент малюнка.

До недоліків даного підходу можна віднести недостатню гнучкість та строгу прив'язку до координатної сітки. Щоб розмістити будь-який елемент, необхідно точно знати відстань від нього до краю браузера по горизонталі та вертикалі, що не завжди можна визначити. Тому доводиться вдались до скриптів на мові JavaScript, які дозволяють обчислювати потрібну відстань, що ускладнює код. Незважаючи на описані особливості, в певних ситуаціях вказаний метод досить раціонально застосовувати.

Розглянемо як створити три колонки, як показано на малюнку 1, використовуючи абсолютне позиціонування.

У модульній сітці на малюнку 1 задіяно шість шарів, виділених різним кольором. Стиль даного макету можна умовно поділити на дві частини — перша частина описує оформлення та вигляд елементів, а друга — їх положення. Заголовки до кожного блоку назвемо title1, title2, title3, де число позначає номер колонки, а col1, col2, col3 — відповідно назви саміх колонок з текстом. Положення шарів задається властивостями left і top, які визначають відстань по горизонталі та вертикалі від лівого верхнього кута вікна браузера до лівого верхнього кута шару. Значення цих властивостей вказуються з урахуванням ширини шарів та відстані між ними. При цьому обов'язково в стиль шару для властивості position слід додати значення absolute (приклад 1).

Приклад 1. Використання абсолютного позиціонування

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Абсолютне позиціонування</title>
  <style type="text/css">
   #title1, #title2, #title3, #col1, #col2, #col3 { /* 1 */ 
    font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
    font-weight: bold; /* Жирное начертание текста заголовка */
    font-size: 80%; /* Размер шрифта */
    color: white; /* Цвет текста заголовка */
    width: 200px; /* Ширина колонок */
    border: 1px solid black; /* Рамка вокруг слоя */
    position: absolute; /* Абсолютне позиціонування */
    top: 30px; /* Положение от верхнего края */
    padding: 5px; /* Поля вокруг текста */
   }
   #col1, #col2, #col3 { /* 2 */
    font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
    font-size: 100%; /* Размер шрифта */
    font-weight: normal; /* Нормальное начертание */
    color: black; /* Цвет текста */
    top: 60px; /* Положение от верхнего края */
   }  /* Цвет фона каждого слоя */
   #title1 { background: #b38541; }
   #title2 { background: #008159; }
   #title3 { background: #006077; }
   #col1 { background: #ebe0c5; }
   #col2 { background: #bbe1c4; }
   #col3 { background: #add0d9; }
   /* Положение каждого слоя */
   #title1 { left: 20px; }
   #title2 { left: 225px; }
   #title3 { left: 430px; }
   #col1 { left: 20px; }
   #col2 { left: 225px; }
   #col3 { left: 430px; }
  </style>
 </head>
 <body>
  <div id="title1">Заголовок 1</div>
  <div id="title2">Заголовок 2</div>
  <div id="title3">Заголовок 3</div>
  <div id="col1">Колонка 1</div>
  <div id="col2">Колонка 2</div>
  <div id="col3">Колонка 3</div>
 </body>
</html>

Стиль, позначений одиницею, встановлює параметри оформлення заголовків, а також ширину всіх шарів і тип позиціонування. Стиль, позначений двійкою, визначає шрифт та його начертання для основного тексту. Кожному шару присвоєно окремий колір та його положення.

Відносне позиціонування

При відносному позиціонуванні шари прив'язані один до одного, але їх загальне положення на сторінці може бути будь-яким. Таким чином, макет можна розмістити по центру сторінки або вирівняти по одному з країв браузера. Це дає широкі можливості для створення веб-сторінок. Фактично, верстка на основі шарів побудована переважно на використанні відносного позиціонування елементів.

При створенні двох колонок, лівому шару необхідно задати абсолютне положення, а правому — відносне. Це найбільш універсальний підхід, який гарантує, що шари будуть розміщені правильно відносно один одного та вікна браузера. Обов'язково слід зсунути другий шар по горизонталі за допомогою властивості left на величину, що дорівнює ширині лівого шару. У протилежному випадку шари будуть накладатися один на одного.

Описаний метод працює тільки з двома колонками, а додавання третьої колонки призводить до зсуву шару. Результат виходить зовсім непотрібним. Щоб виправити положення, необхідно знову повернутися до двох колонок. Для цього слід об'єднати дві ліві колонки, помістивши їх всередину додаткового шару. Результат маніпуляцій показаний на малюнку 2.

Новостворений шар з назвою tr виступає у ролі однієї колонки, тому можна скористатися тим самим методом, що і в разі макету з двома шарами. А саме, для шару tr слід задати абсолютне положення, а для шару col3 — відносне. Схема вкладеності шарів та спосіб позиціонування подано в прикладі 2.

Приклад 2. Розміщення шарів для створення трьох колонок

<div id="tr" style="position: absolute">
 <div id="col1" style="position: absolute">...</div>
 <div id="col2" style="position: relative">...</div>
</div>
<div id="col3" style="position: relative">...</div>

Зсув шарів по горизонталі та вертикалі відносно один одного керується значеннями властивостей left і top і залежить від ширини колонок та пропусків між ними (приклад 3).

Приклад 3. Використання відносного позиціонування

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Відносне позиціонування</title>
  <style type="text/css">
   #title1, #title2, #title3, #col1, #col2, #col3 { /* 1 */
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
    font-size: 80%;
    color: white;
    width: 200px;
    border: 1px solid black;
   }
   #col1, #col2, #col3 { /* 2 */
    font-family: "Times New Roman", Times, serif;
    font-size: 100%;
    font-weight: normal;
    color: black;
   }
   #col1, #title1 { /* 3 */
    position: absolute;
   }
   #col2, #title2 { /* 4 */
    position: relative;
    left: 205px;
   }
   #col3, #title3 { /* 5 */
    position: relative;
    left: 410px;
   }
   #col1, #col2, #col3 { /* 6 */
    top: 5px;
   }
   .tr { /* 7 */
    position: absolute;
   }
   p { margin: 5px; }
   #title1 { background: #b38541; }
   #title2 { background: #008159; }
   #title3 { background: #006077; }
   #col1 { background: #ebe0c5; }
   #col2 { background: #bbe1c4; }
   #col3 { background: #add0d9; }
  </style>
 </head>
 <body>
  <div class="tr">
   <div id="title1"><p>Чебурашка</p></div>
   <div


                
                    Часті запитання