CSS floating elements

{'type': u'plain'}

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!