Всім доброго дня!
На зв’язку Бернацький Андрій!
У цьому випуску мова піде про створення сайту за допомогою блоків, тобто блокова верстка сайтів.
До речі кажучи, цей випуск має відео версію, можете скачати за посиланням:
Відео версія 13 уроку
Для цього, нам необхідно познайомитися з CSS-властивість float, яке є одним з найбільш частоіспользуемих, при блокової верстки сторінок сайту.
Отже, властивість float призначено для вирівнювання елементів на сторінці. Це щось схоже на параметр align в HTML теги.
Властивість float:
Значення:
left – вирівнює елемент по лівому краю.
right – вирівнює елемент по правому краю.
inherit – використовує стиль вирівнювання батьківського елемента.
none – без вирівнювання.
Припустимо нам потрібно вирівняти по правому краю. Для нього ми повинні прописати:
Це буде один до одного, як якщо б ми вказали:
Зображення вирівнюється по правому краю, а текст, який йде після зображення, буде обтікати його праворуч. Якщо нам потрібно заборонити обтікання тексту, використовуємо властивість clear.
Властивість clear:
Значення:
left – скасовує обтікання ліворуч.
right — скасовує обтікання праворуч.
inherit – скасовує обтікання, яке було батьківського елемента.
none – без обтікання.
both – скасовує будь вирівнювання.
Але, частіше, властивість float використовується для розташування елементів на сторінці.
Подивіться на малюнок:
Це каркас сайту. Здавалося б, звичайна таблиця, але немає! Для реалізації таке розмітки не використовувалася жодна таблиця! Всі елементи – це теги
.
Подивимося, як це можна легко реалізувати.
Для початку створюємо чотири блоки div.
div class=”main” – основний блок. Він містить всі інші блоки, які у нас будуть використовуватися.
div class=”content” – блок, в якому буде основний вміст сторінки (зелений зліва).
div class=”righter” – правий блок. У прикладі в ньому міститися текст, але в реальній ситуації, там може бути навігація, рекламні банери, і т. д.
div class=”foot” – жовтий нижній блок. У ньому, зазвичай, розташована контактна інформація, різні посилання і т. д.
Тепер Давайте наповнимо наші блоки вмістом.
Загалом, без завдання стилів ми нічого особливого не побачимо:
Тепер призначимо стилі для блоків:
.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;
}
Поки, думаю, все зрозуміло. Все вищевикладене описано в попередніх випусках розсилки.
Побачити ми повинні приблизно наступне:
А тепер проаналізуємо код сторінки.
Головному блоку у нас задана ширина в 600px, блоку з вмістом 400рх, а для лівого блоку 200рх. Але два останніх блоку не стали в один ряд, а розташувалися одна за одною.
Настав час використати властивість float. В стилях дописуємо следуюшее:
.content{
background-color:#00CC00; width:400px; float:left;
}
.righter{
background-color:#660033; width:200px; float: left;
}
Інші стилі поки не чіпаємо. Отримали таку річ:
Щось отримали, але не зовсім те, що потрібно. Але якщо розібратися в теорії, то всі властивості спрацювали коректно. Ми поставили float:left для лівого і правого блоку, вони вибилися з потоку слідування елементів, і все, що було за ними, зайняв вільне місце навколо цих блоків (аналогічно як текст обтікає зображення, якщо їй поставити це властивість).
Відповідно, щоб нижній блок став на своє місце пропишемо наступне:
.foot{
background-color:#FFFF00; clear:both; float:left; width:100%;
}
clear:both – для відміни вирівнювання від попередніх блоків.
float:left – для власного вирівнювання блоку.
width:100% — щоб блок зайняв усю ширину основного блоку.
Отримали:
Майже те, що треба, тільки блоки не рівної висоти, і це видно, так як фон у них різний.
Одним з рішень даної проблеми (найбільш простою і універсальною, на мій погляд) є завдання відступів знизу.
Робимо їх наступним чином:
.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;
}
Після додавання цього коду отримаємо:
Фон лівого блоку дотягнувся до низу сторінки. Тепер якщо ми будемо змінювати вміст блоків, то фон буде тягнутися до низу, так як це і потрібно. Власне для цього і потрібні відступи padding-bottom:32000px; margin-bottom:-32000px; для обох блоків.
overflow:hidden; в класі main для того, щоб приховати великий відступ вниз без вмісту блоків.
Загалом-то все, що потрібно ми отримали. Залишилося тільки додати відступів до блоків і вирівняти текст в нижньому блоці по центру. Але це я залишу вам на самостійну доопрацювання.
На цьому, випуск присвячений блокової верстки сайтів і сторінок, завершимо.
Прохання надсилати з питанням ваш код того, що ви робите. Так буде простіше і мені зрозуміти, що у вас не вийшло і дати вам чітку відповідь. І вам менше пояснювати в листі, що у вас не виходить.
Даний урок має відео версію, яку Ви мо бюджет завантажити за посиланням:
Відео версія 13 уроку
