Znacznika „div” używamy,
gdy chcemy podzielić stronę

na segmenty, zmieniać rozmiar
tych segmentów i przestawiać je.

Trzeba mieć oko do projektowania,
żeby zaplanować korzystny

rozkład strony.

Nie myślmy teraz o tym,
żeby było ładnie;

pokażę wam, jak zmieniać rzeczy.

Zmieńmy wielkość
segmentu „official-info”.

Domyślnie segment zajmuje
100% dostępnej szerokości.

Dlatego widzicie szare pole
na całej stronie.

A gdybym chciała zająć
tylko 300 pikseli?

Dodam kolejną właściwość
do reguły CSS:

width: 300px
(szerokość: 300 pikseli).

Udało się,
ale zróbmy coś ciekawszego.

Zastosujmy procenty:

określmy, że „div” zawsze ma zajmować
70% dostępnej szerokości.

Teraz tekst zawiera się
w mniejszym polu,

a „div” wyciągnął się w górę.

Możemy także ograniczyć
wysokość segmentu,

za pomocą właściwości:

height: 180px
(wysokość: 180 pikseli).

Aha… Stało się coś dziwnego.

Szare pole ma 180 pikseli,

ale tekst wystaje.

Dlaczego?

Z powodu właściwości „overflow”
(wypływanie zawartości).

Jej domyślna wartość to „widoczna”,

czyli, gdy element zmienia rozmiar,
zawartość wystaje.

Wygląda to głupio.

Jakie są inne możliwe wartości?

Wypróbujmy „hidden” (ukrytą).

Teraz zawartość
jest przycięta po bokach.

Ale nie tego chcemy:

użytkownicy nie przeczytają
wspaniałych informacji.

Możemy też wybrać właściwość „auto”,

która każe dodać paski przewijania.

Teraz mogę przewijać,
żeby widzieć cały tekst.

Możemy robić to jeszcze dokładniej:

określać inne właściwości
dla każdego kierunku.

Jeśli chcemy na przykład

zrobić paski przewijania
w pionie, czyli wzdłuż osi Y,

napiszemy: „overflow-y: auto”

a żeby przyciąć tekst w poziomie,
wzdłuż osi X,

damy: „overflow-x: hidden”.

Nie przesadzajcie jednak
z paskami przewijania,

bo irytują one użytkowników.

Zwłaszcza pasek
w polu z innym paskiem.

Tego unikajcie!

Wróćmy do wysokości
i szerokości. Możemy je zmieniać

w każdego rodzaju elementach,
np. w naszych obrazach.

Znając CSS, możecie używać
własności wysokość/szerokość

zamiast atrybutów.

Powiększmy zdjęcie kota
i dajmy ID „cute-cat” (śliczny kot).

Skasujmy atrybut,

a w regule stylu napiszmy:
#cute-cat {

width: 120px;
(szerokość 120 pikseli).

Tak samo jak przy atrybutach,

lepiej określić tylko szerokość
albo wysokość,

niech przeglądarka obliczy
drugi wymiar.

Inaczej kot nam się zgniecie!

Brzmi to super. Spróbujmy:

wysokość: 40 pikseli.

Zgnieciony kot, tak!

Nie mogłam się oprzeć!

Teraz, jako odpowiedzialna
projektantka stron, wycofam to.

Im większą macie wiedzę,

tym większa odpowiedzialność.

Możecie wszędzie dodać
paski przewijania

i pozgniatać koty,
ale to nie znaczy, że powinniście.

Zwykle projektujemy strony
dla innych ludzi.

To, co bawi was, dla nich
może być niewygodne.

Ale jeśli zrobicie coś śmiesznego
w Khan Academy, nie pogniewam się.