< Return to Video

CSS floating elements

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

{'type': u'plain'}

more » « less
Video Language:
English
Duration:
03:09
Lech Mankiewicz edited Polish subtitles for CSS floating elements

Polish subtitles

Revisions