WEBVTT

00:00:00.143 --> 00:00:04.498
Я створюю сторінку для Хопера, одного з
анімаційних персонажів сайту Khan Academy.

00:00:04.715 --> 00:00:09.518
Вона містить в собі зображення, кілька класних
посилань та абзац.

00:00:10.365 --> 00:00:15.516
Я думаю, що це зображення Хопера 
матиме кращий вигляд,

00:00:15.516 --> 00:00:17.766
якщо розмістити його біля абзацу. 
Тому я збираюсь вирізати його

00:00:17.766 --> 00:00:19.991
і вставити ось тут.

00:00:20.295 --> 00:00:23.561
Хм. Добре, це виглядає не настільки добре,
наскільки я очікувала.

00:00:23.795 --> 00:00:25.873
Текст починається знизу зображення.

00:00:26.038 --> 00:00:28.810
Я сподівалась, що текст буде
біля зображення,

00:00:28.810 --> 00:00:30.653
так як в газетах чи журналах.

00:00:31.108 --> 00:00:33.960
Для цього нам потрібна нова
властивість CSS: "float" (обтікання).


00:00:34.070 --> 00:00:37.250
Це спосіб розміщувати елементи
один навколо одного,

00:00:37.250 --> 00:00:39.825
і він просто ідеальний, для того щоб
зробити обтікання зображення текстом.

00:00:39.989 --> 00:00:43.957
Тому ми йдемо вгору до правила "pic"
і пишемо: "float:".

00:00:44.297 --> 00:00:48.083
Щоб написати значення, нам потрібно
вирішити, з якого боку буде зображення:

00:00:48.083 --> 00:00:50.422
справа чи зліва від тексту.

00:00:50.766 --> 00:00:52.009
Спробуймо зліва.

00:00:52.736 --> 00:00:54.467
Чудово. Ідеально!

00:00:54.590 --> 00:00:57.352
Хоча... не зовсім ідеально,

00:00:57.352 --> 00:01:00.207
тому що тест розміщений
надто близько до зображення.

00:01:00.317 --> 00:01:02.431
Ви пам'ятаєте, яку властивість 
ми маємо використати,

00:01:02.431 --> 00:01:04.443
щоб відділити текст від зображення?

00:01:04.763 --> 00:01:07.216
Це частина блокової моделі,
яку ми щойно вивчили.

00:01:07.419 --> 00:01:08.607
Зовнішні відступи. (Margin).

00:01:08.901 --> 00:01:13.665
Додамо відступи справа та
відступи знизу до зображення,

00:01:13.665 --> 00:01:15.504
щоб дати йому трохи більше
вільного простору.

00:01:16.076 --> 00:01:21.978
Ах, добре, так значно краще.

00:01:22.272 --> 00:01:26.073
Не лише зображення можуть
обтікатися текстом.

00:01:26.610 --> 00:01:28.592
Наприклад, нам потрібно щось таке,
як бокова панель.

00:01:29.077 --> 00:01:31.334
Як щодо цього списку посилань?

00:01:31.749 --> 00:01:34.850
Ми можемо взяти цей список
і розмістити його справа.

00:01:35.125 --> 00:01:38.098
Додаймо правило для #hopper-links

00:01:38.098 --> 00:01:40.751
і розмістімо його справа так, щоб його
обтікав інший текст.

00:01:41.290 --> 00:01:44.370
Добре, текст його обтікає, але
посилання забирають надто багато місця,

00:01:44.370 --> 00:01:46.439
більше, ніж я б хотіла.

00:01:46.728 --> 00:01:50.515
Обмежмо ширину до 30%,

00:01:50.515 --> 00:01:55.076
щоб посилання завжди займали 30%
сторінки,

00:01:55.076 --> 00:01:59.263
а решта сторінки, 70%, була заповнена
іншими елементами.

00:01:59.447 --> 00:02:01.934
Загалом, щоразу, як ви використовуєте
властивість float для , ви мусите додавати ширину.

00:02:02.115 --> 00:02:04.983
Оскільки в іншому випадку 
займатиме все вільне місце,

00:02:04.983 --> 00:02:06.668
і жоден з елементів не зможе 
його обтікати.

00:02:07.113 --> 00:02:10.966
Здається, тут також потрібний 
відступ зліва.

00:02:11.413 --> 00:02:12.853
Добре.

00:02:13.402 --> 00:02:18.146
Тепер погляньте на нижній колонтитул
з контактами Хопера внизу сторінки.

00:02:18.544 --> 00:02:21.670
Сталось щось дивне, оскільки він
перекриває нашу бокову панель.

00:02:22.118 --> 00:02:23.693
І це тому, що він обгортає інші елементи.

00:02:24.080 --> 00:02:25.948
Однак ми не хочемо, щоб колонтитул
щось обгортав.

00:02:26.161 --> 00:02:28.203
Ми хочемо, щоб він завжди був
з самого низу,

00:02:28.203 --> 00:02:29.615
оскільки це нижній колонтитул.

00:02:30.042 --> 00:02:34.069
Щоб він нічого не обгортав, ми використаємо
властивість "clear" (очищення).

00:02:34.456 --> 00:02:36.575
і напишемо "clear: both".

00:02:36.863 --> 00:02:37.879
Хах.

00:02:38.114 --> 00:02:40.226
Ми можемо використати
"clear: left" або "clear: right",

00:02:40.226 --> 00:02:42.086
якщо ми хочемо, щоб він не огортав

00:02:42.086 --> 00:02:44.442
лише елементи зліва чи справа.

00:02:44.519 --> 00:02:47.660
Але переважно нам потрібно,
щоб він взагалі нічого не огортав,

00:02:47.660 --> 00:02:49.054
тому ми кажемо "clear: both".

00:02:49.322 --> 00:02:52.127
Тепер це виглядає яксправжня веб-сторінка.

00:02:52.322 --> 00:02:54.819
Ми маємо основну частину, бокову панель
та нижній колонтитул.

00:02:55.034 --> 00:03:00.021
Насправді, тепер ви вже знаєте властивості
CSS, які створюють розмітку більшості сторінок.

00:03:00.283 --> 00:03:03.172
Додайте до  ширину, висоту,
зовнішні та внутрішні відступи,

00:03:03.172 --> 00:03:04.732
обтікання текстом або його відміну,

00:03:04.732 --> 00:03:08.312
і всі види розміток сторінок
будуть до ваших послуг.

00:03:08.312 --> 00:03:12.402
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"