1
00:00:00,143 --> 00:00:04,498
Projektuję stronę dla Hopper,
naszej postaci z Khan Academy.

2
00:00:04,715 --> 00:00:09,518
Jest zdjęcie, fajne linki i akapit.

3
00:00:10,365 --> 00:00:15,516
Obrazek wyglądałby lepiej
obok akapitu,

4
00:00:15,516 --> 00:00:17,766
więc wytnę go

5
00:00:17,766 --> 00:00:19,991
i wkleję tutaj.

6
00:00:20,295 --> 00:00:23,561
Nie jest tak dobrze, jak chciałam.

7
00:00:23,795 --> 00:00:25,873
Tekst zaczyna się u dołu obrazka.

8
00:00:26,038 --> 00:00:28,810
Miałam nadzieję, że go otoczy,

9
00:00:28,810 --> 00:00:30,653
jak w gazetach i magazynach.

10
00:00:31,108 --> 00:00:33,960
Skorzystamy z nowej
właściwości CSS: „float”.

11
00:00:34,070 --> 00:00:37,250
Elementy opływają się
i wpływają w siebie.

12
00:00:37,250 --> 00:00:39,825
To idealne do otoczenia
obrazu tekstem.

13
00:00:39,989 --> 00:00:43,957
Idziemy do reguły „pic”
i piszemy: „float”.

14
00:00:44,297 --> 00:00:48,083
I wartość. Zdecydujmy,
czy obraz ma być

15
00:00:48,083 --> 00:00:50,422
po lewej, czy prawej stronie.

16
00:00:50,766 --> 00:00:52,009
Spróbujmy po lewej.

17
00:00:52,736 --> 00:00:54,467
Świetnie. Doskonale.

18
00:00:54,590 --> 00:00:57,352
No, nie całkiem,

19
00:00:57,352 --> 00:01:00,207
bo tekst jest za blisko obrazu.

20
00:01:00,317 --> 00:01:02,431
Pamiętacie, która własność pomaga

21
00:01:02,431 --> 00:01:04,443
oddzielić tekst od obrazu?

22
00:01:04,763 --> 00:01:07,216
To część modelu pola.

23
00:01:07,419 --> 00:01:08,607
Margines.

24
00:01:08,901 --> 00:01:13,665
Dodajmy „margin-right”
i „margin-bottom”,

25
00:01:13,665 --> 00:01:15,504
żeby obraz zyskał trochę miejsca.

26
00:01:16,076 --> 00:01:21,978
Tak, znacznie lepiej.

27
00:01:22,272 --> 00:01:26,073
Pływać mogą nie tylko obrazy.

28
00:01:26,610 --> 00:01:28,592
Zróbmy pasek z boku.

29
00:01:29,077 --> 00:01:31,334
A może weźmy tę listę linków?

30
00:01:31,749 --> 00:01:34,850
I niech przepłynie w prawo.

31
00:01:35,125 --> 00:01:38,098
Dodajmy regułę dla „hopper-links”

32
00:01:38,098 --> 00:01:40,751
i przenieśmy je w prawo.

33
00:01:41,290 --> 00:01:44,370
Rozpływają się,
ale zajmują dużo miejsca.

34
00:01:44,370 --> 00:01:46,439
Więcej, niż przewidywałam.

35
00:01:46,728 --> 00:01:50,515
Ograniczmy szerokość do 30%,

36
00:01:50,515 --> 00:01:55,076
żeby linki zajmowały
tylko 30% strony,

37
00:01:55,076 --> 00:01:59,263
a reszta treści
wypełni pozostałe 70%.

38
00:01:59,447 --> 00:02:01,934
„Div” musi mieć
określoną szerokość.

39
00:02:02,115 --> 00:02:04,983
Inaczej spróbuje zająć całe miejsce

40
00:02:04,983 --> 00:02:06,668
i już nic go nie otoczy.

41
00:02:07,113 --> 00:02:10,966
I przydałby się margines,
„margin-left”.

42
00:02:11,413 --> 00:02:12,853
No dobrze.

43
00:02:13,402 --> 00:02:18,146
Zwróćcie uwagę na stopkę
z informacjami kontaktowymi.

44
00:02:18,544 --> 00:02:21,670
Przy bocznym pasku jest dziwnie.

45
00:02:22,118 --> 00:02:23,693
Ponieważ się owija.

46
00:02:24,080 --> 00:02:25,948
A my tego nie chcemy.

47
00:02:26,161 --> 00:02:28,203
Zawsze ma być na samym dole.

48
00:02:28,203 --> 00:02:29,615
bo to stopka.

49
00:02:30,042 --> 00:02:34,456
Użyjmy właściwości „clear” (czyść)

50
00:02:34,456 --> 00:02:36,575
i wpiszmy: „clear: both”.

51
00:02:36,863 --> 00:02:37,879
Ha!

52
00:02:38,114 --> 00:02:40,226
Dzięki „clear: left”
lub „”clear: right”

53
00:02:40,226 --> 00:02:42,086
tekst nie będzie się owijał

54
00:02:42,086 --> 00:02:44,442
wokół pływających elementów
po danej stronie.

55
00:02:44,519 --> 00:02:47,660
Wcale nie powinien się owijać
wokół takich elementów,

56
00:02:47,660 --> 00:02:49,054
więc piszemy „clear: both”.

57
00:02:49,322 --> 00:02:52,127
Zaczyna to wyglądać
jak prawdziwa strona.

58
00:02:52,322 --> 00:02:54,819
Obszar główny, pasek boczny, stopka.

59
00:02:55,034 --> 00:03:00,021
Znacie już właściwości CSS
używane w większości stron.

60
00:03:00,283 --> 00:03:04,732
Połączcie „div” z własnościami width,
height, padding, margin, float i clear,

61
00:03:04,732 --> 00:03:08,379
a uzyskacie każdy układ strony!