WEBVTT

00:00:00.266 --> 00:00:03.858
Znacznika „div” używamy,
gdy chcemy podzielić stronę

00:00:03.858 --> 00:00:07.577
na segmenty, zmieniać rozmiar
tych segmentów i przestawiać je.

00:00:07.737 --> 00:00:11.565
Trzeba mieć oko do projektowania,
żeby zaplanować korzystny

00:00:11.565 --> 00:00:12.719
rozkład strony.

00:00:12.767 --> 00:00:16.484
Nie myślmy teraz o tym,
żeby było ładnie;

00:00:16.484 --> 00:00:18.701
pokażę wam, jak zmieniać rzeczy.

00:00:18.841 --> 00:00:21.652
Zmieńmy wielkość
segmentu „official-info”.

00:00:21.948 --> 00:00:25.539
Domyślnie segment zajmuje
100% dostępnej szerokości.

00:00:25.768 --> 00:00:29.054
Dlatego widzicie szare pole
na całej stronie.

00:00:29.242 --> 00:00:32.475
A gdybym chciała zająć
tylko 300 pikseli?

00:00:32.715 --> 00:00:36.700
Dodam kolejną właściwość
do reguły CSS:

00:00:36.700 --> 00:00:39.373
width: 300px
(szerokość: 300 pikseli).

00:00:40.179 --> 00:00:43.154
Udało się,
ale zróbmy coś ciekawszego.

00:00:43.380 --> 00:00:44.967
Zastosujmy procenty:

00:00:44.967 --> 00:00:49.320
określmy, że „div” zawsze ma zajmować
70% dostępnej szerokości.

00:00:50.287 --> 00:00:53.326
Teraz tekst zawiera się
w mniejszym polu,

00:00:53.326 --> 00:00:55.233
a „div” wyciągnął się w górę.

00:00:55.429 --> 00:00:59.136
Możemy także ograniczyć
wysokość segmentu,

00:00:59.136 --> 00:01:00.584
za pomocą właściwości:

00:01:01.028 --> 00:01:03.231
height: 180px
(wysokość: 180 pikseli).

00:01:03.778 --> 00:01:06.582
Aha… Stało się coś dziwnego.

00:01:06.807 --> 00:01:09.642
Szare pole ma 180 pikseli,

00:01:09.642 --> 00:01:13.425
ale tekst wystaje.

00:01:13.671 --> 00:01:15.507
Dlaczego?

00:01:15.794 --> 00:01:19.888
Z powodu właściwości „overflow”
(wypływanie zawartości).

00:01:20.335 --> 00:01:23.893
Jej domyślna wartość to „widoczna”,

00:01:23.893 --> 00:01:28.309
czyli, gdy element zmienia rozmiar,
zawartość wystaje.

00:01:28.309 --> 00:01:30.118
Wygląda to głupio.

00:01:30.455 --> 00:01:32.955
Jakie są inne możliwe wartości?

00:01:33.491 --> 00:01:36.489
Wypróbujmy „hidden” (ukrytą).

00:01:36.984 --> 00:01:40.144
Teraz zawartość
jest przycięta po bokach.

00:01:40.358 --> 00:01:42.095
Ale nie tego chcemy:

00:01:42.095 --> 00:01:45.824
użytkownicy nie przeczytają
wspaniałych informacji.

00:01:46.287 --> 00:01:48.771
Możemy też wybrać właściwość „auto”,

00:01:49.107 --> 00:01:52.896
która każe dodać paski przewijania.

00:01:53.078 --> 00:01:56.692
Teraz mogę przewijać,
żeby widzieć cały tekst.

00:01:57.070 --> 00:01:59.475
Możemy robić to jeszcze dokładniej:

00:01:59.475 --> 00:02:02.712
określać inne właściwości
dla każdego kierunku.

00:02:02.787 --> 00:02:04.177
Jeśli chcemy na przykład

00:02:04.177 --> 00:02:07.643
zrobić paski przewijania
w pionie, czyli wzdłuż osi Y,

00:02:07.643 --> 00:02:10.508
napiszemy: „overflow-y: auto”

00:02:10.832 --> 00:02:14.207
a żeby przyciąć tekst w poziomie,
wzdłuż osi X,

00:02:14.207 --> 00:02:16.765
damy: „overflow-x: hidden”.

00:02:18.500 --> 00:02:21.419
Nie przesadzajcie jednak
z paskami przewijania,

00:02:21.419 --> 00:02:24.434
bo irytują one użytkowników.

00:02:24.599 --> 00:02:27.215
Zwłaszcza pasek
w polu z innym paskiem.

00:02:27.215 --> 00:02:28.829
Tego unikajcie!

00:02:29.069 --> 00:02:33.974
Wróćmy do wysokości
i szerokości. Możemy je zmieniać

00:02:33.974 --> 00:02:37.102
w każdego rodzaju elementach,
np. w naszych obrazach.

00:02:37.702 --> 00:02:42.168
Znając CSS, możecie używać
własności wysokość/szerokość

00:02:42.168 --> 00:02:44.649
zamiast atrybutów.

00:02:44.946 --> 00:02:52.542
Powiększmy zdjęcie kota
i dajmy ID „cute-cat” (śliczny kot).

00:02:52.542 --> 00:02:55.415
Skasujmy atrybut,

00:02:55.415 --> 00:03:00.396
a w regule stylu napiszmy:
#cute-cat {

00:03:00.396 --> 00:03:03.128
width: 120px;
(szerokość 120 pikseli).

00:03:03.585 --> 00:03:06.328
Tak samo jak przy atrybutach,

00:03:06.328 --> 00:03:09.027
lepiej określić tylko szerokość
albo wysokość,

00:03:09.027 --> 00:03:12.548
niech przeglądarka obliczy
drugi wymiar.

00:03:12.618 --> 00:03:14.679
Inaczej kot nam się zgniecie!

00:03:14.743 --> 00:03:18.877
Brzmi to super. Spróbujmy:

00:03:18.877 --> 00:03:20.021
wysokość: 40 pikseli.

00:03:20.021 --> 00:03:21.726
Zgnieciony kot, tak!

00:03:22.059 --> 00:03:25.003
Nie mogłam się oprzeć!

00:03:25.077 --> 00:03:28.793
Teraz, jako odpowiedzialna
projektantka stron, wycofam to.

00:03:29.009 --> 00:03:30.689
Im większą macie wiedzę,

00:03:30.689 --> 00:03:33.077
tym większa odpowiedzialność.

00:03:33.238 --> 00:03:36.070
Możecie wszędzie dodać
paski przewijania

00:03:36.070 --> 00:03:39.400
i pozgniatać koty,
ale to nie znaczy, że powinniście.

00:03:39.497 --> 00:03:42.578
Zwykle projektujemy strony
dla innych ludzi.

00:03:42.578 --> 00:03:47.338
To, co bawi was, dla nich
może być niewygodne.

00:03:47.566 --> 00:03:52.323
Ale jeśli zrobicie coś śmiesznego
w Khan Academy, nie pogniewam się.