Верстка блоками DIV в CSS

Категорії статей: CSS ; 16.04.2010

Верстка блоками DIV має ряд переваг у порівнянні з табличною версткою. Верстка блоками DIV забезпечує швидке завантаження сторінки сайту, вміст блоків DIV відображається у процессі завантаження (на відміну від таблиці, в якій вміст не відображуватиметься до тих пір, поки вся таблиця не завантажитися), код сторінки легкий для читання. Але і блокова верстка не ідеальна, є і недоліки. Так не можна отримати представлення даних як це робить таблиця. Тобто таблиці потрібно використовувати для відображення табличних даних. Табличну верстку також можна використовувати і для завдання структури сторінки, але зловживати всеж-таки не вариує. Давайте розглянемо, як можна управляти положенням блоку DIV на сторінці сайту.
Для початки розглянемо стильову властивість float, яке управляє позиціюванням блоку. Властивість float може приймати значения

  • left - елемент сторінки примусово вирівнюється по лівому краю;
  • right - елемент сторінки примусово вирівнюється по правому краю;
  • none - елемент сторінки відображається там, де він має бути (значення по замовчуванню).
Разом з float дуже часто використовується стильова властивість clear, регулююча правило, що визначає границі елемента сторінки які не повинні збігатися з попереднім, переміщуванним властивістю float, блоком . Властивість clear може приймати значения
  • left - елемент сторінки встановлюється нижче за будь-який попередній, переміщений вліво блок;
  • right - елемент сторінки встановлюється нижче за будь-який попередній, переміщений управо блок;
  • both - елемент сторінки встановлюється нижче за будь-який попередній переміщений блок;
  • none - обмежень на положення блоку відносно переміщуваних блоків не накладається.
Для ілюстрації роботи властивостей float і clear, а також для ознайомлення з основами, як здійснюється верстка блоками DIV, розглянемо наступний приклад: створимо три блоки DIV

Код
<div style="background:#FA911D;">1</div>
<div style="background:#0080C0;">2<br>text<br>text</div>
<div style="background:#80FF00;">3<br>текст</div>

У браузері цей HTML-код відображуватиметься наступним чином

1
2
text
text
3
текст

Всі три блоки розташовуються один під одним і мають ширину вікна браузеру (або шириу HTML-елемента сторінки, з цим кодом). Тепер змінимо ширину кожного блоку DIV.

Код
<div style="background:#FA911D; width:120px;">1</div>
<div style="background:#0080C0; width:75px;">2<br>text<br>text</div>
<div style="background:#80FF00; width:65px;">3<br>текст</div>

Отримаємо в браузері:

1
2
text
text
3
текст

Ширіна блоків буде в кожного своя, але розташовуватися вони будуть також один під одним. Далі кожному блоку вкажемо стильову властивість float із значення left:

Код
<div style="background:#FA911D; width:120px; float:left;">1</div>
<div style="background:#0080C0; width:75px; float:left; ">2<br>text<br>text</div>
<div style="background:#80FF00; width:65px; float:left;">3<br>текст</div>


Отримаємо в браузері:

1
2
text
text
3
текст

Ширіна в блоків залишилася така ж, як і в попередньому прикладі, але своє положення вони змінили: вистроїлися в один горизонтальний ряд. Якщо додати ще один блок, то він відображуватиметься не під записаними раніше блоками, а по-іншому. У загальному випадку визначити, як відображуватиметься його вміст, немає можливості.

Код
<div style="background:#FA911D; width:120px; float:left;">1</div>
<div style="background:#0080C0; width:75px; float:left; ">2<br>text<br>text</div>
<div style="background:#80FF00; width:65px; float:left;">3<br>текст</div>
<div style="background:#36E065;">4<br>контент<br>контент<br>контент</div>

Отримаємо в браузері:

1
2
text
text
3
текст
4
контент
контент
контент

Аби новий блок розташовувався нижче попередніх блоків, потрібно задати йому властивість clear, з відповідним значенням, в нашому випадку можна задати значення або both, або left:

Код
<div style="background:#FA911D; width:120px; float:left;">1</div>
<div style="background:#0080C0; width:75px; float:left; ">2<br>text<br>text</div>
<div style="background:#80FF00; width:65px; float:left;">3<br>текст</div>
<div style="background:#36E065; clear:left;">4<br>контент<br>контент<br>контент</div>

Отримаємо в браузері:

1
2
text
text
3
текст
4
контент
контент
контент

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

Верстка блоками DIV передбачає також і центрування блоку div в якому-небудь елементі HTML-коду. Для центрування блоку в браузерах Opera і Firefox потрібно використовувати властивості margin-left і margin-top із значенням auto, наприклад

Код
<div style="margin-left: auto; margin-right: auto; width: 50%;">
содержимое блока DIV
</div>

Але подібний код не працює в браузері IE6, для цього браузеру потрібно центрований блок DIV помістити в додатковий блок DIV, в якому буде стильова властивість text-align із значенням center. Наприклад

Код
<div style="text-align:center;">
<div style="width: 50%;">
Вміст блоку DIV
</div>
</div>

Тобто в браузері IE6 можна управляти положенням блоку DIV властивістю text-align, використовуючи значення left, center, right. У браузерах Opera і Firefox управляти положенням блоку DIV за допомогою властивості text-align не можна, лише властивістю margin.
У загальному випадку для центрування блоку DIV отримаємо код, який однаково відображуватиметься в різних браузерах

Код
<div style="text-align: center;">
<div style="width: 50%; margin-left: auto; margin-right: auto; ">
Вміст блоку DIV
</div>
</div>

Верстка блоками DIV не обходиться без управління положенням HTML-елементів за допомогою стильової властивості position, яке визначає схему позиціювання блоку. Властивість position може приймати значения

  • static - задає звичайний блок, який не позиціює індивідуально, а позиціюється в звичайному потоці. Властивості top, left, bottom і right не враховуються.
  • relative - задає відносне позиціювання блоку. Полягає в наступному. Спочатку положення блоку розраховується як при звичайному потоці (тобто не береться до уваги відносне позиціювання). Потім блок зміщується відносно свого нормального положення відповідно до значень властивостей top, left, bottom і right. Подальший вміст виводиться в потік так, як ніби блок, відносно позіціонованний, не був зміщений;
  • absolute - задає абсолютне позиціювання блоку. Абсолютно позиціонованні блоки вилучаються із загального потоку і не впливають на виведення подальшого вмісту. Положення абсолютно позиціонованного блоку задається властивостями top, left, bottom, right відносно батьківського елементу (блоку);
  • fixed - задає фіксоване позиціювання блоку. При фіксованому позиціюванні положення блоку розраховується, як і при абсолютному позиціюванні, але надалі блок фіксується і відносно вікна браузеру та не прокручується разом з іншим вмістом сторінки. Дана властивість підтримується браузерами Opera і Firefox.
Для завдання положення блоків, в яких властивість position має значення relative, absolute або fixed, використовуються властивості top, left, bottom і left. Познайомимося з ними.
  • top - задає зсув верхньої границі позиціонованного блоку униз відносно верхньої границі батьківського елементу;
  • left - задає зсув лівої границі позиціонованного блоку вправо відносно лівого кордону батьківського елементу;
  • bottom - задає зсув нижнього кордону блоку, що позиціює, вгору відносно нижнього кордону батьківського елементу;
  • right - задає зсув правої границі позиціонованного блоку вліво відносно правого кордону батьківського елементу.
Задавати величини перерахованих вище властивостей можна в абсолютних значеннях (наприклад, пікселі), в процентних величинах відносно розмірів батьківського елементу, і також вони можуть набувати значення auto (значенням по замовчуванню).
При абсолютному, відносному і фіксованому позиціюванні блоки можуть накладатися один на одного, і в цьому випадку може виникнути питання - який з них виявиться "вище"? Тобто, який елемент відображуватиметься, а який перекриватиметься таким, що знаходиться "вище" блоком. Вирішити це питання допоможе властивість z-index. Вона визначає позицію рівня, яку займатиме блок. Його значенням може бути будь-яке позитивне або негативне ціле число. При цьому елементи з великим значенням z-index перекриватимуть блоки з меншим значенням цієї властивості.
Для ілюстрації описаних вище властивостей розглянемо приклад. Створимо декілька блоків без властивостей позиціювання.

Код
<div style="background:#A485B8;">1<br>text</div>
<div id="dopoln_block">
<div style="background:#66AAD7; width:200px;">2<br>текст</div>
</div>
<div style="background:#C6C600;">3<br>содержимое</div>

Для ознайомлення з відносним позиціюванням додамо в один блок властивості відносного позиціювання

Код
<div style="background:#A485B8;">1<br>text</div>
<div id="dopoln_block">
<div style="background:#66AAD7; width:200px; position: relative; top:10px; left:10px;">2<br>текст</div>
</div>
<div style="background:#C6C600;">3<br>содержимое</div>

Для ознайомлення з абсолютним позиціюванням поглянете, як відображуватиметься наступний код в браузері

Код
<div style="background:#A485B8;">1<br>text</div>
<div style="position:relative;" id="dopoln_block">
<div style="background:#66AAD7; width:200px; position: absolute; top:10px; left:10px;">2<br>текст</div>
</div>
<div style="background:#C6C600;">3<br>содержимое</div>

В останньому прикладі, для того, щоб положення абсолютно позиціонованного блоку можна було задавати властивостями top і left відносно того місця де він був би розташований при звичайному позиціюванні, в код був доданий відносно позиціонованний блок з id="dopoln_block".
На завершення теми "Верстка блоками DIV", приведу шаблон, який дозволяє отримати дуже поширену схему верстки: вверху сторінки заголовок, далі три колонки з основним вмістом сторінки і внизу сторінки блок, що зазвичай містить інформацію про копірайт. Причому нижній блок знаходитиметься внизу сторінки, навіть при малій кількості вмісту на сторінці. Також дві колонки (ліва і права), з трьох з основним вмістом, будуть з фіксованими розмірами, а середня буде "гумова", тобто вона мінятиме ширину залежно від розширення екрану монітора. Приклад можна поглянути на сторінці <а
href='http://www.linedmk.com/primers/css/hablon3k.html'>шаблон.

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Шаблон верстки страницы из 3 колонок</title>
<style type="text/css">

* { margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
#header { background:#9393FF; height:70px; width:100%; }

#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 800 ? "100%" : "800px"); overflow:hidden; }

#container1 { width:100%; float:left; margin-right:-180px; }
#container2 { background:#000000; margin-right:180px; }
#container3 { width:100%; float:right; margin-left:-200px; }

#left { background:#AEAE00; width:200px; float:left; }
#center { background:#D86927; margin-left:200px; }
#right { background:#C0C0C0; float:right; width:180px; }

#min_width { width:800px; }

#footer { position:absolute; bottom:0px; background:#8F9EB1; width:100%; height:60px; }

</style>
</head>
<body>
<div id="header">Заголовок страницы</div>

<div id="content">
<div id="container1">
<div id="container2">
<div id="container3">
<div id="center">Центральная колонка</div>
</div>
<div id="left">Левая колонка</div>
</div>
</div>

<div id="right">Правая колонка</div>

</div>

<div id="footer">Копирайт</div>
</body>
</html>

Верстка блоками DIV дозволяє верстати різні по складності сайти з використанням приведених вище властивостей каскадних таблиць стилів. Сподіваюся, ця стаття допоможе Вам розібратися з версткою і зробити багато якісних і красивих сайтів. Успіхів!

По зовнішнім джерелам

Подписаться на RSS комментариев к этой записи

Раніше Спливаюча підказка за допомогою CSS | Пізніше Блочна модель документа - Частина 2

Один комментарий на запись “Верстка блоками DIV в CSS”

  1. Ruslan пишет:

    Дякую вам. трохи зрозуміло)

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.57MB | 0.02Sec ad Google