Projektuję stronę dla Hopper, naszej postaci z Khan Academy.
Jest zdjęcie, fajne linki i akapit.
Obrazek wyglądałby lepiej obok akapitu,
więc wytnę go
i wkleję tutaj.
Nie jest tak dobrze, jak chciałam.
Tekst zaczyna się u dołu obrazka.
Miałam nadzieję, że go otoczy,
jak w gazetach i magazynach.
Skorzystamy z nowej właściwości CSS: „float”.
Elementy opływają się i wpływają w siebie.
To idealne do otoczenia obrazu tekstem.
Idziemy do reguły „pic” i piszemy: „float”.
I wartość. Zdecydujmy, czy obraz ma być
po lewej, czy prawej stronie.
Spróbujmy po lewej.
Świetnie. Doskonale.
No, nie całkiem,
bo tekst jest za blisko obrazu.
Pamiętacie, która własność pomaga
oddzielić tekst od obrazu?
To część modelu pola.
Margines.
Dodajmy „margin-right” i „margin-bottom”,
żeby obraz zyskał trochę miejsca.
Tak, znacznie lepiej.
Pływać mogą nie tylko obrazy.
Zróbmy pasek z boku.
A może weźmy tę listę linków?
I niech przepłynie w prawo.
Dodajmy regułę dla „hopper-links”
i przenieśmy je w prawo.
Rozpływają się, ale zajmują dużo miejsca.
Więcej, niż przewidywałam.
Ograniczmy szerokość do 30%,
żeby linki zajmowały tylko 30% strony,
a reszta treści wypełni pozostałe 70%.
„Div” musi mieć określoną szerokość.
Inaczej spróbuje zająć całe miejsce
i już nic go nie otoczy.
I przydałby się margines, „margin-left”.
No dobrze.
Zwróćcie uwagę na stopkę z informacjami kontaktowymi.
Przy bocznym pasku jest dziwnie.
Ponieważ się owija.
A my tego nie chcemy.
Zawsze ma być na samym dole.
bo to stopka.
Użyjmy właściwości „clear” (czyść)
i wpiszmy: „clear: both”.
Ha!
Dzięki „clear: left” lub „”clear: right”
tekst nie będzie się owijał
wokół pływających elementów po danej stronie.
Wcale nie powinien się owijać wokół takich elementów,
więc piszemy „clear: both”.
Zaczyna to wyglądać jak prawdziwa strona.
Obszar główny, pasek boczny, stopka.
Znacie już właściwości CSS używane w większości stron.
Połączcie „div” z własnościami width, height, padding, margin, float i clear,
a uzyskacie każdy układ strony!