0:00:00.143,0:00:04.498
Projektuję stronę dla Hopper,[br]naszej postaci z Khan Academy.

0:00:04.715,0:00:09.518
Jest zdjęcie, fajne linki i akapit.

0:00:10.365,0:00:15.516
Obrazek wyglądałby lepiej[br]obok akapitu,

0:00:15.516,0:00:17.766
więc wytnę go

0:00:17.766,0:00:19.991
i wkleję tutaj.

0:00:20.295,0:00:23.561
Nie jest tak dobrze, jak chciałam.

0:00:23.795,0:00:25.873
Tekst zaczyna się u dołu obrazka.

0:00:26.038,0:00:28.810
Miałam nadzieję, że go otoczy,

0:00:28.810,0:00:30.653
jak w gazetach i magazynach.

0:00:31.108,0:00:33.960
Skorzystamy z nowej[br]właściwości CSS: „float”.

0:00:34.070,0:00:37.250
Elementy opływają się[br]i wpływają w siebie.

0:00:37.250,0:00:39.825
To idealne do otoczenia[br]obrazu tekstem.

0:00:39.989,0:00:43.957
Idziemy do reguły „pic”[br]i piszemy: „float”.

0:00:44.297,0:00:48.083
I wartość. Zdecydujmy,[br]czy obraz ma być

0:00:48.083,0:00:50.422
po lewej, czy prawej stronie.

0:00:50.766,0:00:52.009
Spróbujmy po lewej.

0:00:52.736,0:00:54.467
Świetnie. Doskonale.

0:00:54.590,0:00:57.352
No, nie całkiem,

0:00:57.352,0:01:00.207
bo tekst jest za blisko obrazu.

0:01:00.317,0:01:02.431
Pamiętacie, która własność pomaga

0:01:02.431,0:01:04.443
oddzielić tekst od obrazu?

0:01:04.763,0:01:07.216
To część modelu pola.

0:01:07.419,0:01:08.607
Margines.

0:01:08.901,0:01:13.665
Dodajmy „margin-right”[br]i „margin-bottom”,

0:01:13.665,0:01:15.504
żeby obraz zyskał trochę miejsca.

0:01:16.076,0:01:21.978
Tak, znacznie lepiej.

0:01:22.272,0:01:26.073
Pływać mogą nie tylko obrazy.

0:01:26.610,0:01:28.592
Zróbmy pasek z boku.

0:01:29.077,0:01:31.334
A może weźmy tę listę linków?

0:01:31.749,0:01:34.850
I niech przepłynie w prawo.

0:01:35.125,0:01:38.098
Dodajmy regułę dla „hopper-links”

0:01:38.098,0:01:40.751
i przenieśmy je w prawo.

0:01:41.290,0:01:44.370
Rozpływają się,[br]ale zajmują dużo miejsca.

0:01:44.370,0:01:46.439
Więcej, niż przewidywałam.

0:01:46.728,0:01:50.515
Ograniczmy szerokość do 30%,

0:01:50.515,0:01:55.076
żeby linki zajmowały[br]tylko 30% strony,

0:01:55.076,0:01:59.263
a reszta treści[br]wypełni pozostałe 70%.

0:01:59.447,0:02:01.934
„Div” musi mieć[br]określoną szerokość.

0:02:02.115,0:02:04.983
Inaczej spróbuje zająć całe miejsce

0:02:04.983,0:02:06.668
i już nic go nie otoczy.

0:02:07.113,0:02:10.966
I przydałby się margines,[br]„margin-left”.

0:02:11.413,0:02:12.853
No dobrze.

0:02:13.402,0:02:18.146
Zwróćcie uwagę na stopkę[br]z informacjami kontaktowymi.

0:02:18.544,0:02:21.670
Przy bocznym pasku jest dziwnie.

0:02:22.118,0:02:23.693
Ponieważ się owija.

0:02:24.080,0:02:25.948
A my tego nie chcemy.

0:02:26.161,0:02:28.203
Zawsze ma być na samym dole.

0:02:28.203,0:02:29.615
bo to stopka.

0:02:30.042,0:02:34.456
Użyjmy właściwości „clear” (czyść)

0:02:34.456,0:02:36.575
i wpiszmy: „clear: both”.

0:02:36.863,0:02:37.879
Ha!

0:02:38.114,0:02:40.226
Dzięki „clear: left”[br]lub „”clear: right”

0:02:40.226,0:02:42.086
tekst nie będzie się owijał

0:02:42.086,0:02:44.442
wokół pływających elementów[br]po danej stronie.

0:02:44.519,0:02:47.660
Wcale nie powinien się owijać[br]wokół takich elementów,

0:02:47.660,0:02:49.054
więc piszemy „clear: both”.

0:02:49.322,0:02:52.127
Zaczyna to wyglądać[br]jak prawdziwa strona.

0:02:52.322,0:02:54.819
Obszar główny, pasek boczny, stopka.

0:02:55.034,0:03:00.021
Znacie już właściwości CSS[br]używane w większości stron.

0:03:00.283,0:03:04.732
Połączcie „div” z własnościami width,[br]height, padding, margin, float i clear,

0:03:04.732,0:03:08.379
a uzyskacie każdy układ strony!