WEBVTT

00:00:00.143 --> 00:00:04.498
Projektuję stronę dla Hopper,
naszej postaci z Khan Academy.

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

00:00:10.365 --> 00:00:15.516
Obrazek wyglądałby lepiej
obok akapitu,

00:00:15.516 --> 00:00:17.766
więc wytnę go

00:00:17.766 --> 00:00:19.991
i wkleję tutaj.

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

00:00:23.795 --> 00:00:25.873
Tekst zaczyna się u dołu obrazka.

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

00:00:28.810 --> 00:00:30.653
jak w gazetach i magazynach.

00:00:31.108 --> 00:00:33.960
Skorzystamy z nowej
właściwości CSS: „float”.

00:00:34.070 --> 00:00:37.250
Elementy opływają się
i wpływają w siebie.

00:00:37.250 --> 00:00:39.825
To idealne do otoczenia
obrazu tekstem.

00:00:39.989 --> 00:00:43.957
Idziemy do reguły „pic”
i piszemy: „float”.

00:00:44.297 --> 00:00:48.083
I wartość. Zdecydujmy,
czy obraz ma być

00:00:48.083 --> 00:00:50.422
po lewej, czy prawej stronie.

00:00:50.766 --> 00:00:52.009
Spróbujmy po lewej.

00:00:52.736 --> 00:00:54.467
Świetnie. Doskonale.

00:00:54.590 --> 00:00:57.352
No, nie całkiem,

00:00:57.352 --> 00:01:00.207
bo tekst jest za blisko obrazu.

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

00:01:02.431 --> 00:01:04.443
oddzielić tekst od obrazu?

00:01:04.763 --> 00:01:07.216
To część modelu pola.

00:01:07.419 --> 00:01:08.607
Margines.

00:01:08.901 --> 00:01:13.665
Dodajmy „margin-right”
i „margin-bottom”,

00:01:13.665 --> 00:01:15.504
żeby obraz zyskał trochę miejsca.

00:01:16.076 --> 00:01:21.978
Tak, znacznie lepiej.

00:01:22.272 --> 00:01:26.073
Pływać mogą nie tylko obrazy.

00:01:26.610 --> 00:01:28.592
Zróbmy pasek z boku.

00:01:29.077 --> 00:01:31.334
A może weźmy tę listę linków?

00:01:31.749 --> 00:01:34.850
I niech przepłynie w prawo.

00:01:35.125 --> 00:01:38.098
Dodajmy regułę dla „hopper-links”

00:01:38.098 --> 00:01:40.751
i przenieśmy je w prawo.

00:01:41.290 --> 00:01:44.370
Rozpływają się,
ale zajmują dużo miejsca.

00:01:44.370 --> 00:01:46.439
Więcej, niż przewidywałam.

00:01:46.728 --> 00:01:50.515
Ograniczmy szerokość do 30%,

00:01:50.515 --> 00:01:55.076
żeby linki zajmowały
tylko 30% strony,

00:01:55.076 --> 00:01:59.263
a reszta treści
wypełni pozostałe 70%.

00:01:59.447 --> 00:02:01.934
„Div” musi mieć
określoną szerokość.

00:02:02.115 --> 00:02:04.983
Inaczej spróbuje zająć całe miejsce

00:02:04.983 --> 00:02:06.668
i już nic go nie otoczy.

00:02:07.113 --> 00:02:10.966
I przydałby się margines,
„margin-left”.

00:02:11.413 --> 00:02:12.853
No dobrze.

00:02:13.402 --> 00:02:18.146
Zwróćcie uwagę na stopkę
z informacjami kontaktowymi.

00:02:18.544 --> 00:02:21.670
Przy bocznym pasku jest dziwnie.

00:02:22.118 --> 00:02:23.693
Ponieważ się owija.

00:02:24.080 --> 00:02:25.948
A my tego nie chcemy.

00:02:26.161 --> 00:02:28.203
Zawsze ma być na samym dole.

00:02:28.203 --> 00:02:29.615
bo to stopka.

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

00:02:34.456 --> 00:02:36.575
i wpiszmy: „clear: both”.

00:02:36.863 --> 00:02:37.879
Ha!

00:02:38.114 --> 00:02:40.226
Dzięki „clear: left”
lub „”clear: right”

00:02:40.226 --> 00:02:42.086
tekst nie będzie się owijał

00:02:42.086 --> 00:02:44.442
wokół pływających elementów
po danej stronie.

00:02:44.519 --> 00:02:47.660
Wcale nie powinien się owijać
wokół takich elementów,

00:02:47.660 --> 00:02:49.054
więc piszemy „clear: both”.

00:02:49.322 --> 00:02:52.127
Zaczyna to wyglądać
jak prawdziwa strona.

00:02:52.322 --> 00:02:54.819
Obszar główny, pasek boczny, stopka.

00:02:55.034 --> 00:03:00.021
Znacie już właściwości CSS
używane w większości stron.

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

00:03:04.732 --> 00:03:08.379
a uzyskacie każdy układ strony!