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