Випуск №13. Блокова верстка сайту

17

Всім доброго дня!

На зв’язку Бернацький Андрій!

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

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

Відео версія 13 уроку

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

Отже, властивість float призначено для вирівнювання елементів на сторінці. Це щось схоже на параметр align в HTML теги.

Властивість float:

Значення:

left – вирівнює елемент по лівому краю.

right — вирівнює елемент по правому краю.

inherit – використовує стиль вирівнювання батьківського елемента.

none – без вирівнювання.

Припустимо нам потрібно вирівняти по правому краю. Для нього ми повинні прописати:

Випуск №13. Блокова верстка сайту

Це буде один до одного, як якщо б ми вказали:

Зображення вирівнюється по правому краю, а текст, який йде після зображення, буде обтікати його праворуч. Якщо нам потрібно заборонити обтікання тексту, використовуємо властивість clear.

Властивість clear:

Значення:

left – скасовує обтікання ліворуч.

right — скасовує обтікання праворуч.

inherit – скасовує обтікання, яке було батьківського елемента.

none – без обтікання.

both – скасовує будь вирівнювання.

Але, частіше, властивість float використовується для розташування елементів на сторінці.

Подивіться на малюнок:

Випуск №13. Блокова верстка сайту

Це каркас сайту. Здавалося б, звичайна таблиця, але немає! Для реалізації таке розмітки не використовувалася жодна таблиця! Всі елементи – це теги

.

Подивимося, як це можна легко реалізувати.

Для початку створюємо чотири блоки div.

div class=»main» – основний блок. Він містить всі інші блоки, які у нас будуть використовуватися.

div class=»content» – блок, в якому буде основний вміст сторінки (зелений зліва).

div class=»righter» – правий блок. У прикладі в ньому міститися текст, але в реальній ситуації, там може бути навігація, рекламні банери, і т. д.

div class=»foot» – жовтий нижній блок. У ньому, зазвичай, розташована контактна інформація, різні посилання і т. д.

Тепер Давайте наповнимо наші блоки вмістом.

Загалом, без завдання стилів ми нічого особливого не побачимо:

Випуск №13. Блокова верстка сайту

Тепер призначимо стилі для блоків:

.main{
background-color:#000099; width:600px; margin:0 auto;
}
.content{
background-color:#00CC00; width:400px;
}
.righter{
background-color:#660033; width:200px;
}
.foot{
background-color:#FFFF00;
}
color:#FFFF00;
}

Поки, думаю, все зрозуміло. Все вищевикладене описано в попередніх випусках розсилки.

Побачити ми повинні приблизно наступне:

Випуск №13. Блокова верстка сайту

А тепер проаналізуємо код сторінки.

Головному блоку у нас задана ширина в 600px, блоку з вмістом 400рх, а для лівого блоку 200рх. Але два останніх блоку не стали в один ряд, а розташувалися одна за одною.

Настав час використати властивість float. В стилях дописуємо следуюшее:

.content{
background-color:#00CC00; width:400px; float:left;
}
.righter{
background-color:#660033; width:200px; float: left;
}

Інші стилі поки не чіпаємо. Отримали таку річ:

Випуск №13. Блокова верстка сайту

Щось отримали, але не зовсім те, що потрібно. Але якщо розібратися в теорії, то всі властивості спрацювали коректно. Ми поставили float:left для лівого і правого блоку, вони вибилися з потоку слідування елементів, і все, що було за ними, зайняв вільне місце навколо цих блоків (аналогічно як текст обтікає зображення, якщо їй поставити це властивість).

Відповідно, щоб нижній блок став на своє місце пропишемо наступне:

.foot{
background-color:#FFFF00; clear:both; float:left; width:100%;
}

clear:both – для відміни вирівнювання від попередніх блоків.

float:left – для власного вирівнювання блоку.

width:100% — щоб блок зайняв усю ширину основного блоку.

Отримали:

Випуск №13. Блокова верстка сайту

Майже те, що треба, тільки блоки не рівної висоти, і це видно, так як фон у них різний.

Одним з рішень даної проблеми (найбільш простою і універсальною, на мій погляд) є завдання відступів знизу.

Робимо їх наступним чином:

.main{
background-color:#000099; width:600px; margin:0 auto; overflow:hidden;
}
.content{
background-color:#00CC00; width:400px; float:left; padding-bottom:32000px; margin-bottom:-32000px;
}
.righter{
background-color:#660033; width:200px; float: left; padding-bottom:32000px; margin-bottom:-32000px;
}

Після додавання цього коду отримаємо:

Випуск №13. Блокова верстка сайту

Фон лівого блоку дотягнувся до низу сторінки. Тепер якщо ми будемо змінювати вміст блоків, то фон буде тягнутися до низу, так як це і потрібно. Власне для цього і потрібні відступи padding-bottom:32000px; margin-bottom:-32000px; для обох блоків.

overflow:hidden; в класі main для того, щоб приховати великий відступ вниз без вмісту блоків.

Загалом-то все, що потрібно ми отримали. Залишилося тільки додати відступів до блоків і вирівняти текст в нижньому блоці по центру. Але це я залишу вам на самостійну доопрацювання.

На цьому, випуск присвячений блокової верстки сайтів і сторінок, завершимо.

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

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

Відео версія 13 уроку

Випуск №13. Блокова верстка сайту