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ę.