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

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

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

0:00:15.516,0:00:17.766
якщо розмістити його біля абзацу. [br]Тому я збираюсь вирізати його

0:00:17.766,0:00:19.991
і вставити ось тут.

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

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

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

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

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

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

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

0:00:39.989,0:00:43.957
Тому ми йдемо вгору до правила "pic"[br]і пишемо: "float:".

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

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

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

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

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

0:00:57.352,0:01:00.207
тому що тест розміщений[br]надто близько до зображення.

0:01:00.317,0:01:02.431
Ви пам'ятаєте, яку властивість [br]ми маємо використати,

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

0:01:04.763,0:01:07.216
Це частина блокової моделі,[br]яку ми щойно вивчили.

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

0:01:08.901,0:01:13.665
Додамо відступи справа та[br]відступи знизу до зображення,

0:01:13.665,0:01:15.504
щоб дати йому трохи більше[br]вільного простору.

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

0:01:22.272,0:01:26.073
Не лише зображення можуть[br]обтікатися текстом.

0:01:26.610,0:01:28.592
Наприклад, нам потрібно щось таке,[br]як бокова панель.

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

0:01:31.749,0:01:34.850
Ми можемо взяти цей список[br]і розмістити його справа.

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

0:01:38.098,0:01:40.751
і розмістімо його справа так, щоб його[br]обтікав інший текст.

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

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

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

0:01:50.515,0:01:55.076
щоб посилання завжди займали 30%[br]сторінки,

0:01:55.076,0:01:59.263
а решта сторінки, 70%, була заповнена[br]іншими елементами.

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

0:02:02.115,0:02:04.983
Оскільки в іншому випадку [br]займатиме все вільне місце,

0:02:04.983,0:02:06.668
і жоден з елементів не зможе [br]його обтікати.

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

0:02:11.413,0:02:12.853
Добре.

0:02:13.402,0:02:18.146
Тепер погляньте на нижній колонтитул[br]з контактами Хопера внизу сторінки.

0:02:18.544,0:02:21.670
Сталось щось дивне, оскільки він[br]перекриває нашу бокову панель.

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

0:02:24.080,0:02:25.948
Однак ми не хочемо, щоб колонтитул[br]щось обгортав.

0:02:26.161,0:02:28.203
Ми хочемо, щоб він завжди був[br]з самого низу,

0:02:28.203,0:02:29.615
оскільки це нижній колонтитул.

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

0:02:34.456,0:02:36.575
і напишемо "clear: both".

0:02:36.863,0:02:37.879
Хах.

0:02:38.114,0:02:40.226
Ми можемо використати[br]"clear: left" або "clear: right",

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

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

0:02:44.519,0:02:47.660
Але переважно нам потрібно,[br]щоб він взагалі нічого не огортав,

0:02:47.660,0:02:49.054
тому ми кажемо "clear: both".

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

0:02:52.322,0:02:54.819
Ми маємо основну частину, бокову панель[br]та нижній колонтитул.

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

0:03:00.283,0:03:03.172
Додайте до  ширину, висоту,[br]зовнішні та внутрішні відступи,

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

0:03:04.732,0:03:08.312
і всі види розміток сторінок[br]будуть до ваших послуг.

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