Це не складно – підготувати розкладку сторінки за допомогою CSS. Багато людей використовують для створення розкладки сторінки таблиці, тому на перший погляд використання CSS може здатися складним. Однак насправді це не так. Цей спосіб просто інший і, що важливо, має більше сенсу.
Важливо сприймати кожну частину вашої сторінки як окремий фрагмент, який можна переміщати і трансформувати за своїм бажанням. Ці фрагменти можуть бути розміщені абсолютно чи відносно іншого фрагмента.
Позиціонування
Властивість position застосовується для опису елемента, коли він позиційований (розміщений) абсолютно (absolute), щодо (relative), статично (static) або фіксовано (fixed).
Значення static – це значення за замовчуванням для всіх елементів. Воно визначає нормальне розташування елементів, як вони зазвичай зустрічаються в HTML-документі.
Значення relative дуже схоже з static, з тією лише різницею, що ви можете змістити елементи з його колишнього розташування за допомогою значень top, right, bottom і left.
Значення absolute витягує елемент зі стандартного потоку HTML-документа і трансформує його у повністю новий світ. У цьому маленькому і божевільному світі можна розміщувати абсолютно позиційовані елемент у будь-якій частині сторінки, якщо використовувати значення top, right, bottom та left.
Значення fixed діє схожим чином, що і absolute. Різниця в тому, що елемент позиціонується щодо вікна браузера, а не сторінки. У результаті елемент, позиційовані за допомогою fixed завжди знаходиться на одному і тому ж місці, навіть якщо ви прокручуєте вікно в браузері. Це в теорії. На практиці техніка ідеально працює в браузерах Mozilla і Opera, але в IE ви можете зіткнутися з проблемами.
Розкладка сторінки з використанням абсолютного позиціонування
Ви можете підготувати розкладку типової сторінки з двома колонками, використовуючи абсолютне позиціонування. Для цього буде потрібно HTML-код, подібний цьому:
<div id="navigation"> <ul> <li><a href="this.html">This</a></li> <li><a href="that.html">That</a></li> <li><a href="theOther.html">The Other</a></li> </ul> </div> <div id="content"> <h1>Ra ra banjo banjo</h1> <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p> <p>(Ra ra banjo banjo)</p> </div>
Досягнемо бажаного за допомогою цих значень CSS:
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}
Цей фрагмент коду розміщує панель навігації на лівій стороні і задає ширину колонки в 10 em. Оскільки навігація позиційована абсолютно, вона не зачіпається потоком решти сторінки. Отже, все, що потрібно, це встановити ліве поле (left margin) області контенту рівним ширині панелі навігації.
Нескладно. Зрозуміло, двухколоночною технікою це не обмежується. Використовуючи позиціонування з розумом, ви можете розставити практично необмежену кількість колонок. Коли потрібно додати третю колонку, ви просто додаєте в HTML-документ новий фрагмент “navigation2″ і змінюєте CSS:
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}
Єдиний недолік абсолютно позиційованих елементів пов’язаний з маленьким світом, який вони населяють – неможливо сказати, де вони закінчуються. Тим з вас, хто вирішить скористатися наведеними вище прикладами на своїх сторінках з невеликою навігацією і великою зоною контенту, рішення підійде відмінно, особливо у разі використання відносних значень для завдання ширини і розмірів. Однак ви повинні залишити надії розмістити що-небудь, наприклад, підвал, під цими елементами. Для досягнення цієї мети треба використовувати float для розміщення фрагментів, а не абсолютне позиціонування.
Floating
Елемент з атрибутом float буде переміщений на праву чи ліву сторону, а навколишній контент буде його обтікати.
Floating (обтікання) зазвичай застосовується для позиціонування маленьких елементів на сторінці, але ви також можете застосовувати його до великих фрагментів, наприклад колонкам навігації.
Розглянемо HTML-приклад. Можна додати такі правила CSS:
#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
Якщо наступний елемент не повинен «огинати» float-об’єкти, можна додати властивість clear . clear: left очищає float-елементи ліворуч, clear: right – праворуч, а clear: both робить так, щоб float-елементів не було з обох сторін – зліва і справа. Таким чином, щоб, наприклад, додати підвал на сторінку, вам буде потрібно помістити HTML-фрагмент id “footer” і додати цей рядок в CSS-файл:
#footer {
clear: both;
}
Ось і все. У вас буде підвал (футер), який завжди буде показуватися під колонками, незалежно від їх довжини.
Це було лише коротке введення в позиціонування і розстановку елементів за допомогою float, де розміщення великих елементів на сторінці може обернутися стресом. Але треба завжди пам’ятати, що такі техніки можуть бути застосовні до всіх елементів, всередині цих фрагментів. Використовуючи значення Float, позиціонування, padding, marging та межі ви можете реалізувати будь-який проект. І все, що можна досягти за допомогою таблиць, можна зробити за допомогою CSS.
Єдиним виправданням використання таблиць в розкладці сторінки можна вважати ситуацію, коли сторінка створюється для дуже старих браузерів. Ось чому CSS – це сучасне рішення: воно надає вам доступні сторінки, які важать менше, ніж такі ж, але зверстані за допомогою таблиць.