0:00:00.266,0:00:03.858
Znacznika „div” używamy,[br]gdy chcemy podzielić stronę

0:00:03.858,0:00:07.577
na segmenty, zmieniać rozmiar[br]tych segmentów i przestawiać je.

0:00:07.737,0:00:11.565
Trzeba mieć oko do projektowania,[br]żeby zaplanować korzystny

0:00:11.565,0:00:12.719
rozkład strony.

0:00:12.767,0:00:16.484
Nie myślmy teraz o tym,[br]żeby było ładnie;

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

0:00:18.841,0:00:21.652
Zmieńmy wielkość[br]segmentu „official-info”.

0:00:21.948,0:00:25.539
Domyślnie segment zajmuje[br]100% dostępnej szerokości.

0:00:25.768,0:00:29.054
Dlatego widzicie szare pole[br]na całej stronie.

0:00:29.242,0:00:32.475
A gdybym chciała zająć[br]tylko 300 pikseli?

0:00:32.715,0:00:36.700
Dodam kolejną właściwość[br]do reguły CSS:

0:00:36.700,0:00:39.373
width: 300px[br](szerokość: 300 pikseli).

0:00:40.179,0:00:43.154
Udało się,[br]ale zróbmy coś ciekawszego.

0:00:43.380,0:00:44.967
Zastosujmy procenty:

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

0:00:50.287,0:00:53.326
Teraz tekst zawiera się[br]w mniejszym polu,

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

0:00:55.429,0:00:59.136
Możemy także ograniczyć[br]wysokość segmentu,

0:00:59.136,0:01:00.584
za pomocą właściwości:

0:01:01.028,0:01:03.231
height: 180px[br](wysokość: 180 pikseli).

0:01:03.778,0:01:06.582
Aha… Stało się coś dziwnego.

0:01:06.807,0:01:09.642
Szare pole ma 180 pikseli,

0:01:09.642,0:01:13.425
ale tekst wystaje.

0:01:13.671,0:01:15.507
Dlaczego?

0:01:15.794,0:01:19.888
Z powodu właściwości „overflow”[br](wypływanie zawartości).

0:01:20.335,0:01:23.893
Jej domyślna wartość to „widoczna”,

0:01:23.893,0:01:28.309
czyli, gdy element zmienia rozmiar,[br]zawartość wystaje.

0:01:28.309,0:01:30.118
Wygląda to głupio.

0:01:30.455,0:01:32.955
Jakie są inne możliwe wartości?

0:01:33.491,0:01:36.489
Wypróbujmy „hidden” (ukrytą).

0:01:36.984,0:01:40.144
Teraz zawartość[br]jest przycięta po bokach.

0:01:40.358,0:01:42.095
Ale nie tego chcemy:

0:01:42.095,0:01:45.824
użytkownicy nie przeczytają[br]wspaniałych informacji.

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

0:01:49.107,0:01:52.896
która każe dodać paski przewijania.

0:01:53.078,0:01:56.692
Teraz mogę przewijać,[br]żeby widzieć cały tekst.

0:01:57.070,0:01:59.475
Możemy robić to jeszcze dokładniej:

0:01:59.475,0:02:02.712
określać inne właściwości[br]dla każdego kierunku.

0:02:02.787,0:02:04.177
Jeśli chcemy na przykład

0:02:04.177,0:02:07.643
zrobić paski przewijania[br]w pionie, czyli wzdłuż osi Y,

0:02:07.643,0:02:10.508
napiszemy: „overflow-y: auto”

0:02:10.832,0:02:14.207
a żeby przyciąć tekst w poziomie,[br]wzdłuż osi X,

0:02:14.207,0:02:16.765
damy: „overflow-x: hidden”.

0:02:18.500,0:02:21.419
Nie przesadzajcie jednak[br]z paskami przewijania,

0:02:21.419,0:02:24.434
bo irytują one użytkowników.

0:02:24.599,0:02:27.215
Zwłaszcza pasek[br]w polu z innym paskiem.

0:02:27.215,0:02:28.829
Tego unikajcie!

0:02:29.069,0:02:33.974
Wróćmy do wysokości[br]i szerokości. Możemy je zmieniać

0:02:33.974,0:02:37.102
w każdego rodzaju elementach,[br]np. w naszych obrazach.

0:02:37.702,0:02:42.168
Znając CSS, możecie używać[br]własności wysokość/szerokość

0:02:42.168,0:02:44.649
zamiast atrybutów.

0:02:44.946,0:02:52.542
Powiększmy zdjęcie kota[br]i dajmy ID „cute-cat” (śliczny kot).

0:02:52.542,0:02:55.415
Skasujmy atrybut,

0:02:55.415,0:03:00.396
a w regule stylu napiszmy:[br]#cute-cat {

0:03:00.396,0:03:03.128
width: 120px;[br](szerokość 120 pikseli).

0:03:03.585,0:03:06.328
Tak samo jak przy atrybutach,

0:03:06.328,0:03:09.027
lepiej określić tylko szerokość[br]albo wysokość,

0:03:09.027,0:03:12.548
niech przeglądarka obliczy[br]drugi wymiar.

0:03:12.618,0:03:14.679
Inaczej kot nam się zgniecie!

0:03:14.743,0:03:18.877
Brzmi to super. Spróbujmy:

0:03:18.877,0:03:20.021
wysokość: 40 pikseli.

0:03:20.021,0:03:21.726
Zgnieciony kot, tak!

0:03:22.059,0:03:25.003
Nie mogłam się oprzeć!

0:03:25.077,0:03:28.793
Teraz, jako odpowiedzialna[br]projektantka stron, wycofam to.

0:03:29.009,0:03:30.689
Im większą macie wiedzę,

0:03:30.689,0:03:33.077
tym większa odpowiedzialność.

0:03:33.238,0:03:36.070
Możecie wszędzie dodać[br]paski przewijania

0:03:36.070,0:03:39.400
i pozgniatać koty,[br]ale to nie znaczy, że powinniście.

0:03:39.497,0:03:42.578
Zwykle projektujemy strony[br]dla innych ludzi.

0:03:42.578,0:03:47.338
To, co bawi was, dla nich[br]może być niewygodne.

0:03:47.566,0:03:52.323
Ale jeśli zrobicie coś śmiesznego[br]w Khan Academy, nie pogniewam się.