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

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

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

4
00:00:15,516 --> 00:00:17,766
якщо розмістити його біля абзацу. 
Тому я збираюсь вирізати його

5
00:00:17,766 --> 00:00:19,991
і вставити ось тут.

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

7
00:00:23,795 --> 00:00:25,873
Текст починається знизу зображення.

8
00:00:26,038 --> 00:00:28,810
Я сподівалась, що текст буде
біля зображення,

9
00:00:28,810 --> 00:00:30,653
так як в газетах чи журналах.

10
00:00:31,108 --> 00:00:33,960
Для цього нам потрібна нова
властивість CSS: "float" (обтікання).


11
00:00:34,070 --> 00:00:37,250
Це спосіб розміщувати елементи
один навколо одного,

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

13
00:00:39,989 --> 00:00:43,957
Тому ми йдемо вгору до правила "pic"
і пишемо: "float:".

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

15
00:00:48,083 --> 00:00:50,422
справа чи зліва від тексту.

16
00:00:50,766 --> 00:00:52,009
Спробуймо зліва.

17
00:00:52,736 --> 00:00:54,467
Чудово. Ідеально!

18
00:00:54,590 --> 00:00:57,352
Хоча... не зовсім ідеально,

19
00:00:57,352 --> 00:01:00,207
тому що тест розміщений
надто близько до зображення.

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

21
00:01:02,431 --> 00:01:04,443
щоб відділити текст від зображення?

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

23
00:01:07,419 --> 00:01:08,607
Зовнішні відступи. (Margin).

24
00:01:08,901 --> 00:01:13,665
Додамо відступи справа та
відступи знизу до зображення,

25
00:01:13,665 --> 00:01:15,504
щоб дати йому трохи більше
вільного простору.

26
00:01:16,076 --> 00:01:21,978
Ах, добре, так значно краще.

27
00:01:22,272 --> 00:01:26,073
Не лише зображення можуть
обтікатися текстом.

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

29
00:01:29,077 --> 00:01:31,334
Як щодо цього списку посилань?

30
00:01:31,749 --> 00:01:34,850
Ми можемо взяти цей список
і розмістити його справа.

31
00:01:35,125 --> 00:01:38,098
Додаймо правило для #hopper-links

32
00:01:38,098 --> 00:01:40,751
і розмістімо його справа так, щоб його
обтікав інший текст.

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

34
00:01:44,370 --> 00:01:46,439
більше, ніж я б хотіла.

35
00:01:46,728 --> 00:01:50,515
Обмежмо ширину до 30%,

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

37
00:01:55,076 --> 00:01:59,263
а решта сторінки, 70%, була заповнена
іншими елементами.

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

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

40
00:02:04,983 --> 00:02:06,668
і жоден з елементів не зможе 
його обтікати.

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

42
00:02:11,413 --> 00:02:12,853
Добре.

43
00:02:13,402 --> 00:02:18,146
Тепер погляньте на нижній колонтитул
з контактами Хопера внизу сторінки.

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

45
00:02:22,118 --> 00:02:23,693
І це тому, що він обгортає інші елементи.

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

47
00:02:26,161 --> 00:02:28,203
Ми хочемо, щоб він завжди був
з самого низу,

48
00:02:28,203 --> 00:02:29,615
оскільки це нижній колонтитул.

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

50
00:02:34,456 --> 00:02:36,575
і напишемо "clear: both".

51
00:02:36,863 --> 00:02:37,879
Хах.

52
00:02:38,114 --> 00:02:40,226
Ми можемо використати
"clear: left" або "clear: right",

53
00:02:40,226 --> 00:02:42,086
якщо ми хочемо, щоб він не огортав

54
00:02:42,086 --> 00:02:44,442
лише елементи зліва чи справа.

55
00:02:44,519 --> 00:02:47,660
Але переважно нам потрібно,
щоб він взагалі нічого не огортав,

56
00:02:47,660 --> 00:02:49,054
тому ми кажемо "clear: both".

57
00:02:49,322 --> 00:02:52,127
Тепер це виглядає яксправжня веб-сторінка.

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

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

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

61
00:03:03,172 --> 00:03:04,732
обтікання текстом або його відміну,

62
00:03:04,732 --> 00:03:08,312
і всі види розміток сторінок
будуть до ваших послуг.

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