1
00:00:00,266 --> 00:00:03,858
Znacznika „div” używamy,
gdy chcemy podzielić stronę

2
00:00:03,858 --> 00:00:07,577
na segmenty, zmieniać rozmiar
tych segmentów i przestawiać je.

3
00:00:07,737 --> 00:00:11,565
Trzeba mieć oko do projektowania,
żeby zaplanować korzystny

4
00:00:11,565 --> 00:00:12,719
rozkład strony.

5
00:00:12,767 --> 00:00:16,484
Nie myślmy teraz o tym,
żeby było ładnie;

6
00:00:16,484 --> 00:00:18,701
pokażę wam, jak zmieniać rzeczy.

7
00:00:18,841 --> 00:00:21,652
Zmieńmy wielkość
segmentu „official-info”.

8
00:00:21,948 --> 00:00:25,539
Domyślnie segment zajmuje
100% dostępnej szerokości.

9
00:00:25,768 --> 00:00:29,054
Dlatego widzicie szare pole
na całej stronie.

10
00:00:29,242 --> 00:00:32,475
A gdybym chciała zająć
tylko 300 pikseli?

11
00:00:32,715 --> 00:00:36,700
Dodam kolejną właściwość
do reguły CSS:

12
00:00:36,700 --> 00:00:39,373
width: 300px
(szerokość: 300 pikseli).

13
00:00:40,179 --> 00:00:43,154
Udało się,
ale zróbmy coś ciekawszego.

14
00:00:43,380 --> 00:00:44,967
Zastosujmy procenty:

15
00:00:44,967 --> 00:00:49,320
określmy, że „div” zawsze ma zajmować
70% dostępnej szerokości.

16
00:00:50,287 --> 00:00:53,326
Teraz tekst zawiera się
w mniejszym polu,

17
00:00:53,326 --> 00:00:55,233
a „div” wyciągnął się w górę.

18
00:00:55,429 --> 00:00:59,136
Możemy także ograniczyć
wysokość segmentu,

19
00:00:59,136 --> 00:01:00,584
za pomocą właściwości:

20
00:01:01,028 --> 00:01:03,231
height: 180px
(wysokość: 180 pikseli).

21
00:01:03,778 --> 00:01:06,582
Aha… Stało się coś dziwnego.

22
00:01:06,807 --> 00:01:09,642
Szare pole ma 180 pikseli,

23
00:01:09,642 --> 00:01:13,425
ale tekst wystaje.

24
00:01:13,671 --> 00:01:15,507
Dlaczego?

25
00:01:15,794 --> 00:01:19,888
Z powodu właściwości „overflow”
(wypływanie zawartości).

26
00:01:20,335 --> 00:01:23,893
Jej domyślna wartość to „widoczna”,

27
00:01:23,893 --> 00:01:28,309
czyli, gdy element zmienia rozmiar,
zawartość wystaje.

28
00:01:28,309 --> 00:01:30,118
Wygląda to głupio.

29
00:01:30,455 --> 00:01:32,955
Jakie są inne możliwe wartości?

30
00:01:33,491 --> 00:01:36,489
Wypróbujmy „hidden” (ukrytą).

31
00:01:36,984 --> 00:01:40,144
Teraz zawartość
jest przycięta po bokach.

32
00:01:40,358 --> 00:01:42,095
Ale nie tego chcemy:

33
00:01:42,095 --> 00:01:45,824
użytkownicy nie przeczytają
wspaniałych informacji.

34
00:01:46,287 --> 00:01:48,771
Możemy też wybrać właściwość „auto”,

35
00:01:49,107 --> 00:01:52,896
która każe dodać paski przewijania.

36
00:01:53,078 --> 00:01:56,692
Teraz mogę przewijać,
żeby widzieć cały tekst.

37
00:01:57,070 --> 00:01:59,475
Możemy robić to jeszcze dokładniej:

38
00:01:59,475 --> 00:02:02,712
określać inne właściwości
dla każdego kierunku.

39
00:02:02,787 --> 00:02:04,177
Jeśli chcemy na przykład

40
00:02:04,177 --> 00:02:07,643
zrobić paski przewijania
w pionie, czyli wzdłuż osi Y,

41
00:02:07,643 --> 00:02:10,508
napiszemy: „overflow-y: auto”

42
00:02:10,832 --> 00:02:14,207
a żeby przyciąć tekst w poziomie,
wzdłuż osi X,

43
00:02:14,207 --> 00:02:16,765
damy: „overflow-x: hidden”.

44
00:02:18,500 --> 00:02:21,419
Nie przesadzajcie jednak
z paskami przewijania,

45
00:02:21,419 --> 00:02:24,434
bo irytują one użytkowników.

46
00:02:24,599 --> 00:02:27,215
Zwłaszcza pasek
w polu z innym paskiem.

47
00:02:27,215 --> 00:02:28,829
Tego unikajcie!

48
00:02:29,069 --> 00:02:33,974
Wróćmy do wysokości
i szerokości. Możemy je zmieniać

49
00:02:33,974 --> 00:02:37,102
w każdego rodzaju elementach,
np. w naszych obrazach.

50
00:02:37,702 --> 00:02:42,168
Znając CSS, możecie używać
własności wysokość/szerokość

51
00:02:42,168 --> 00:02:44,649
zamiast atrybutów.

52
00:02:44,946 --> 00:02:52,542
Powiększmy zdjęcie kota
i dajmy ID „cute-cat” (śliczny kot).

53
00:02:52,542 --> 00:02:55,415
Skasujmy atrybut,

54
00:02:55,415 --> 00:03:00,396
a w regule stylu napiszmy:
#cute-cat {

55
00:03:00,396 --> 00:03:03,128
width: 120px;
(szerokość 120 pikseli).

56
00:03:03,585 --> 00:03:06,328
Tak samo jak przy atrybutach,

57
00:03:06,328 --> 00:03:09,027
lepiej określić tylko szerokość
albo wysokość,

58
00:03:09,027 --> 00:03:12,548
niech przeglądarka obliczy
drugi wymiar.

59
00:03:12,618 --> 00:03:14,679
Inaczej kot nam się zgniecie!

60
00:03:14,743 --> 00:03:18,877
Brzmi to super. Spróbujmy:

61
00:03:18,877 --> 00:03:20,021
wysokość: 40 pikseli.

62
00:03:20,021 --> 00:03:21,726
Zgnieciony kot, tak!

63
00:03:22,059 --> 00:03:25,003
Nie mogłam się oprzeć!

64
00:03:25,077 --> 00:03:28,793
Teraz, jako odpowiedzialna
projektantka stron, wycofam to.

65
00:03:29,009 --> 00:03:30,689
Im większą macie wiedzę,

66
00:03:30,689 --> 00:03:33,077
tym większa odpowiedzialność.

67
00:03:33,238 --> 00:03:36,070
Możecie wszędzie dodać
paski przewijania

68
00:03:36,070 --> 00:03:39,400
i pozgniatać koty,
ale to nie znaczy, że powinniście.

69
00:03:39,497 --> 00:03:42,578
Zwykle projektujemy strony
dla innych ludzi.

70
00:03:42,578 --> 00:03:47,338
To, co bawi was, dla nich
może być niewygodne.

71
00:03:47,566 --> 00:03:52,323
Ale jeśli zrobicie coś śmiesznego
w Khan Academy, nie pogniewam się.