[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.23,Default,,0000,0000,0000,,Nauczymy się, jak używać CSS
Dialogue: 0,0:00:02.23,0:00:04.23,Default,,0000,0000,0000,,do przemieszczania elementów.
Dialogue: 0,0:00:04.23,0:00:06.00,Default,,0000,0000,0000,,Nie tylko do szeregowania.
Dialogue: 0,0:00:06.00,0:00:07.64,Default,,0000,0000,0000,,Będziemy nakładać
Dialogue: 0,0:00:07.64,0:00:09.03,Default,,0000,0000,0000,,jedne na drugie.
Dialogue: 0,0:00:09.03,0:00:11.61,Default,,0000,0000,0000,,Tu mamy stronę
Dialogue: 0,0:00:11.61,0:00:16.04,Default,,0000,0000,0000,,z paroma nagłówkami, obrazkami
Dialogue: 0,0:00:16.04,0:00:18.07,Default,,0000,0000,0000,,i akapitami.
Dialogue: 0,0:00:18.07,0:00:20.16,Default,,0000,0000,0000,,Na razie są ułożone
Dialogue: 0,0:00:20.16,0:00:22.18,Default,,0000,0000,0000,,wg pozycjonowania domyślnego,
Dialogue: 0,0:00:22.18,0:00:24.21,Default,,0000,0000,0000,,którego używa przeglądarka.
Dialogue: 0,0:00:24.21,0:00:26.96,Default,,0000,0000,0000,,To tzw. pozycjonowanie\Nstatyczne lub normalne.
Dialogue: 0,0:00:26.96,0:00:29.39,Default,,0000,0000,0000,,Elementy śródliniowe,
Dialogue: 0,0:00:29.39,0:00:30.70,Default,,0000,0000,0000,,np. obrazy,
Dialogue: 0,0:00:30.70,0:00:32.30,Default,,0000,0000,0000,,są ustawione od lewej do prawej,
Dialogue: 0,0:00:32.30,0:00:33.80,Default,,0000,0000,0000,,A elementy blokowe,
Dialogue: 0,0:00:33.80,0:00:35.49,Default,,0000,0000,0000,,np. nagłówki i akapity,
Dialogue: 0,0:00:35.49,0:00:37.56,Default,,0000,0000,0000,,są ułożone pionowo.
Dialogue: 0,0:00:37.56,0:00:39.92,Default,,0000,0000,0000,,Możemy zmienić ten układ,
Dialogue: 0,0:00:39.92,0:00:42.67,Default,,0000,0000,0000,,korzystając z własności CSS\N„position” (pozycja).
Dialogue: 0,0:00:42.67,0:00:45.62,Default,,0000,0000,0000,,Wypróbujmy to przy zdjęciu.
Dialogue: 0,0:00:45.62,0:00:49.66,Default,,0000,0000,0000,,Piszemy „position:”,
Dialogue: 0,0:00:49.66,0:00:51.45,Default,,0000,0000,0000,,a potem wartość względną.
Dialogue: 0,0:00:51.45,0:00:53.41,Default,,0000,0000,0000,,W metodzie pozycji względnej
Dialogue: 0,0:00:53.41,0:00:55.41,Default,,0000,0000,0000,,rozmieszczacie elementy normalnie,
Dialogue: 0,0:00:55.41,0:00:57.79,Default,,0000,0000,0000,,a potem przesuwacie o jakąś wartość.
Dialogue: 0,0:00:57.79,0:01:00.16,Default,,0000,0000,0000,,Żeby zawiadomić przeglądarkę
Dialogue: 0,0:01:00.16,0:01:01.50,Default,,0000,0000,0000,,o tej wartości,
Dialogue: 0,0:01:01.50,0:01:03.14,Default,,0000,0000,0000,,użyjemy jakiejś kombinacji
Dialogue: 0,0:01:03.14,0:01:05.18,Default,,0000,0000,0000,,czterech nowych właściwości CSS:
Dialogue: 0,0:01:05.18,0:01:07.42,Default,,0000,0000,0000,,góra, dół, lewo, prawo.
Dialogue: 0,0:01:07.42,0:01:09.44,Default,,0000,0000,0000,,Powiedzmy, że chcemy mieć\Nnasz element
Dialogue: 0,0:01:09.44,0:01:11.88,Default,,0000,0000,0000,,20 pikseli niżej.
Dialogue: 0,0:01:11.88,0:01:13.63,Default,,0000,0000,0000,,Napiszemy top: 20 pikseli.
Dialogue: 0,0:01:13.63,0:01:15.22,Default,,0000,0000,0000,,Przesuniemy 10 pikseli w bok.
Dialogue: 0,0:01:15.22,0:01:16.68,Default,,0000,0000,0000,,Piszemy: 10 pikseli w lewo.
Dialogue: 0,0:01:16.68,0:01:18.67,Default,,0000,0000,0000,,To jest fajne,
Dialogue: 0,0:01:18.67,0:01:20.89,Default,,0000,0000,0000,,ale nie aż tak.
Dialogue: 0,0:01:20.89,0:01:23.47,Default,,0000,0000,0000,,Pokażę wam coś znacznie lepszego:
Dialogue: 0,0:01:23.47,0:01:25.08,Default,,0000,0000,0000,,pozycjonowanie bezwzględne.
Dialogue: 0,0:01:25.08,0:01:26.58,Default,,0000,0000,0000,,Możemy wyciągnąć element
Dialogue: 0,0:01:26.58,0:01:28.52,Default,,0000,0000,0000,,z układu
Dialogue: 0,0:01:28.52,0:01:30.61,Default,,0000,0000,0000,,i umieścić go gdziekolwiek.
Dialogue: 0,0:01:30.61,0:01:31.66,Default,,0000,0000,0000,,W tym celu
Dialogue: 0,0:01:31.66,0:01:32.94,Default,,0000,0000,0000,,zmienię „relative” (względne)
Dialogue: 0,0:01:32.94,0:01:34.04,Default,,0000,0000,0000,,na „absolute” (bezwzględne)
Dialogue: 0,0:01:34.04,0:01:35.20,Default,,0000,0000,0000,,przy naszym krajobrazie.
Dialogue: 0,0:01:35.20,0:01:36.58,Default,,0000,0000,0000,,Górę i lewą stronę zachowam.
Dialogue: 0,0:01:36.58,0:01:37.78,Default,,0000,0000,0000,,Jak widzicie,
Dialogue: 0,0:01:37.78,0:01:39.21,Default,,0000,0000,0000,,krajobraz zasłania
Dialogue: 0,0:01:39.21,0:01:41.70,Default,,0000,0000,0000,,obrazek i nagłówek\N„Impreza taneczna”.
Dialogue: 0,0:01:41.70,0:01:42.77,Default,,0000,0000,0000,,Poprawmy to.
Dialogue: 0,0:01:42.77,0:01:44.79,Default,,0000,0000,0000,,Zacznijmy od Winstona.
Dialogue: 0,0:01:44.79,0:01:48.46,Default,,0000,0000,0000,,Dodamy regułę
Dialogue: 0,0:01:48.46,0:01:52.10,Default,,0000,0000,0000,,pozycjonowania bezwzględnego.
Dialogue: 0,0:01:52.10,0:01:54.30,Default,,0000,0000,0000,,Dajmy, powiedzmy,
Dialogue: 0,0:01:54.30,0:01:56.11,Default,,0000,0000,0000,,„góra: 40 pikseli”.
Dialogue: 0,0:01:56.11,0:01:58.39,Default,,0000,0000,0000,,Albo niech będzie 50.
Dialogue: 0,0:01:58.39,0:02:00.06,Default,,0000,0000,0000,,I lewa 50.
Dialogue: 0,0:02:00.06,0:02:02.20,Default,,0000,0000,0000,,Dobrze to wygląda.
Dialogue: 0,0:02:02.20,0:02:04.30,Default,,0000,0000,0000,,Hopper (Skacząca)\Nchce być na wierzchu.
Dialogue: 0,0:02:04.30,0:02:05.62,Default,,0000,0000,0000,,Ona także.
Dialogue: 0,0:02:05.62,0:02:07.30,Default,,0000,0000,0000,,Jej też określimy
Dialogue: 0,0:02:07.30,0:02:11.66,Default,,0000,0000,0000,,pozycję bezwzględną.
Dialogue: 0,0:02:11.66,0:02:15.22,Default,,0000,0000,0000,,Powiedzmy, góra: 30 pikseli,
Dialogue: 0,0:02:15.22,0:02:17.81,Default,,0000,0000,0000,,a lewa: 60 pikseli.
Dialogue: 0,0:02:17.81,0:02:19.61,Default,,0000,0000,0000,,Niech to sprawia wrażenie,
Dialogue: 0,0:02:19.61,0:02:21.22,Default,,0000,0000,0000,,jakby Hopper
Dialogue: 0,0:02:21.22,0:02:23.74,Default,,0000,0000,0000,,tańczyła przed Winstonem.
Dialogue: 0,0:02:23.74,0:02:26.64,Default,,0000,0000,0000,,Na razie tak to nie wygląda,
Dialogue: 0,0:02:26.64,0:02:28.24,Default,,0000,0000,0000,,bo Winston znajduje się
Dialogue: 0,0:02:28.24,0:02:30.36,Default,,0000,0000,0000,,na wierzchu.
Dialogue: 0,0:02:30.36,0:02:31.95,Default,,0000,0000,0000,,Żeby to poprawić,
Dialogue: 0,0:02:31.95,0:02:33.62,Default,,0000,0000,0000,,mogłabym zmienić kolejność
Dialogue: 0,0:02:33.62,0:02:35.14,Default,,0000,0000,0000,,znaczników „image”
Dialogue: 0,0:02:35.14,0:02:36.68,Default,,0000,0000,0000,,w HTML-u,
Dialogue: 0,0:02:36.68,0:02:38.70,Default,,0000,0000,0000,,lepiej jednak będzie
Dialogue: 0,0:02:38.70,0:02:42.26,Default,,0000,0000,0000,,skorzystać z właściwości CSS\N„z-index”.
Dialogue: 0,0:02:42.26,0:02:43.94,Default,,0000,0000,0000,,Powiemy przeglądarce,
Dialogue: 0,0:02:43.94,0:02:45.24,Default,,0000,0000,0000,,w jakiej kolejności
Dialogue: 0,0:02:45.24,0:02:46.04,Default,,0000,0000,0000,,ustawiać elementy,
Dialogue: 0,0:02:46.04,0:02:47.38,Default,,0000,0000,0000,,nadając im
Dialogue: 0,0:02:47.38,0:02:48.25,Default,,0000,0000,0000,,z-indeksy.
Dialogue: 0,0:02:48.25,0:02:50.69,Default,,0000,0000,0000,,Zacznijmy od krajobrazu
Dialogue: 0,0:02:50.69,0:02:53.27,Default,,0000,0000,0000,,i nadajmy mu numer 1.
Dialogue: 0,0:02:53.27,0:02:56.34,Default,,0000,0000,0000,,Na to - Winston z dwójką,
Dialogue: 0,0:02:56.34,0:02:59.05,Default,,0000,0000,0000,,a na wierzch Hopper, trzecia.
Dialogue: 0,0:02:59.05,0:03:00.08,Default,,0000,0000,0000,,Dobrze!
Dialogue: 0,0:03:00.08,0:03:02.64,Default,,0000,0000,0000,,Teraz Hopper\Ntańczy przed Winstonem,
Dialogue: 0,0:03:02.64,0:03:04.18,Default,,0000,0000,0000,,chociaż nie ma ochoty.
Dialogue: 0,0:03:04.18,0:03:05.24,Default,,0000,0000,0000,,Trudno, musi!
Dialogue: 0,0:03:05.24,0:03:07.80,Default,,0000,0000,0000,,Jednak niektóre nagłówki
Dialogue: 0,0:03:07.80,0:03:09.99,Default,,0000,0000,0000,,i kolumny są ukryte.
Dialogue: 0,0:03:09.99,0:03:12.45,Default,,0000,0000,0000,,Spróbujmy…
Dialogue: 0,0:03:12.45,0:03:13.94,Default,,0000,0000,0000,,chcę umieścić nagłówek
Dialogue: 0,0:03:13.94,0:03:16.89,Default,,0000,0000,0000,,„Impreza taneczna” na wierzchu.
Dialogue: 0,0:03:16.89,0:03:19.08,Default,,0000,0000,0000,,Określę więc dla niego
Dialogue: 0,0:03:19.08,0:03:20.70,Default,,0000,0000,0000,,pozycję bezwzględną
Dialogue: 0,0:03:20.70,0:03:21.76,Default,,0000,0000,0000,,i nadam mu numer 4.
Dialogue: 0,0:03:21.76,0:03:22.100,Default,,0000,0000,0000,,Dobrze.
Dialogue: 0,0:03:22.100,0:03:24.42,Default,,0000,0000,0000,,Może 10 pikseli w lewo.
Dialogue: 0,0:03:24.42,0:03:25.25,Default,,0000,0000,0000,,Przesunę.
Dialogue: 0,0:03:25.25,0:03:26.91,Default,,0000,0000,0000,,Może jeszcze trochę.
Dialogue: 0,0:03:26.91,0:03:28.52,Default,,0000,0000,0000,,Teraz dobrze.
Dialogue: 0,0:03:28.52,0:03:29.69,Default,,0000,0000,0000,,A tekst piosenki
Dialogue: 0,0:03:29.69,0:03:31.11,Default,,0000,0000,0000,,niech wyświetla się
Dialogue: 0,0:03:31.11,0:03:32.82,Default,,0000,0000,0000,,poniżej całej reszty.
Dialogue: 0,0:03:32.82,0:03:35.52,Default,,0000,0000,0000,,Dla tych elementów
Dialogue: 0,0:03:35.52,0:03:38.22,Default,,0000,0000,0000,,określę pozycję bezwzględną.
Dialogue: 0,0:03:38.22,0:03:39.47,Default,,0000,0000,0000,,Można określić tylko górę,
Dialogue: 0,0:03:39.47,0:03:40.68,Default,,0000,0000,0000,,która, jak wiecie,
Dialogue: 0,0:03:40.68,0:03:42.57,Default,,0000,0000,0000,,będzie równa wysokości obrazka.
Dialogue: 0,0:03:42.57,0:03:45.12,Default,,0000,0000,0000,,To 220 pikseli.
Dialogue: 0,0:03:45.12,0:03:48.42,Default,,0000,0000,0000,,Teraz wygląda to dobrze.
Dialogue: 0,0:03:48.42,0:03:50.13,Default,,0000,0000,0000,,Szalona impreza taneczna
Dialogue: 0,0:03:50.13,0:03:52.18,Default,,0000,0000,0000,,na całego!
Dialogue: 0,0:03:52.18,0:03:53.82,Default,,0000,0000,0000,,Zatrzymajcie teraz film
Dialogue: 0,0:03:53.82,0:03:55.77,Default,,0000,0000,0000,,i spróbujcie przewinąć w dół.
Dialogue: 0,0:03:55.77,0:03:58.05,Default,,0000,0000,0000,,Zobaczycie, że wszystko
Dialogue: 0,0:03:58.05,0:03:59.21,Default,,0000,0000,0000,,przewija się razem.
Dialogue: 0,0:03:59.21,0:04:00.99,Default,,0000,0000,0000,,Ważna sprawa:
Dialogue: 0,0:04:00.99,0:04:02.62,Default,,0000,0000,0000,,pozycjonowanie absolutne
Dialogue: 0,0:04:02.62,0:04:04.05,Default,,0000,0000,0000,,odnosi się do góry strony.
Dialogue: 0,0:04:04.05,0:04:06.02,Default,,0000,0000,0000,,Gdy więc przewijacie,
Dialogue: 0,0:04:06.04,0:04:07.73,Default,,0000,0000,0000,,to, co było 10 pikseli od góry,
Dialogue: 0,0:04:07.73,0:04:10.55,Default,,0000,0000,0000,,zniknie z ekranu,
Dialogue: 0,0:04:10.55,0:04:11.92,Default,,0000,0000,0000,,bo oddalacie się
Dialogue: 0,0:04:11.92,0:04:14.64,Default,,0000,0000,0000,,od góry strony.
Dialogue: 0,0:04:14.64,0:04:15.81,Default,,0000,0000,0000,,Inna możliwość
Dialogue: 0,0:04:15.81,0:04:17.11,Default,,0000,0000,0000,,to pozycjonowanie ustalone.
Dialogue: 0,0:04:17.11,0:04:18.76,Default,,0000,0000,0000,,Będzie wyglądało tak,
Dialogue: 0,0:04:18.76,0:04:20.35,Default,,0000,0000,0000,,jakby elementy się nie ruszały.
Dialogue: 0,0:04:20.35,0:04:22.10,Default,,0000,0000,0000,,Żeby to wypróbować,
Dialogue: 0,0:04:22.10,0:04:23.05,Default,,0000,0000,0000,,zmienimy
Dialogue: 0,0:04:23.05,0:04:25.69,Default,,0000,0000,0000,,„absolute” na „fixed”\Nw nagłówku „h1”.
Dialogue: 0,0:04:25.69,0:04:29.07,Default,,0000,0000,0000,,Zatrzymajcie film\Ni spróbujcie przewijać.
Dialogue: 0,0:04:29.07,0:04:31.08,Default,,0000,0000,0000,,Zobaczycie,
Dialogue: 0,0:04:31.08,0:04:33.68,Default,,0000,0000,0000,,że „Impreza taneczna”\Nnie zmienia miejsca.
Dialogue: 0,0:04:33.68,0:04:35.67,Default,,0000,0000,0000,,Bo teraz jej pozycja
Dialogue: 0,0:04:35.67,0:04:39.22,Default,,0000,0000,0000,,odnosi się do góry ekranu,
Dialogue: 0,0:04:39.22,0:04:40.85,Default,,0000,0000,0000,,okna.
Dialogue: 0,0:04:40.85,0:04:43.92,Default,,0000,0000,0000,,No dobrze. Wykorzystaliśmy
Dialogue: 0,0:04:43.92,0:04:45.94,Default,,0000,0000,0000,,trzy właściwości pozycjonowania
Dialogue: 0,0:04:45.94,0:04:47.70,Default,,0000,0000,0000,,i zrobiliśmy fajne rzeczy.
Dialogue: 0,0:04:47.70,0:04:48.52,Default,,0000,0000,0000,,Kiedy używamy
Dialogue: 0,0:04:48.52,0:04:51.07,Default,,0000,0000,0000,,pozycjonowania bezwzlędnego\Nlub ustalonego?
Dialogue: 0,0:04:51.07,0:04:53.11,Default,,0000,0000,0000,,Można je zastosować,
Dialogue: 0,0:04:53.11,0:04:54.18,Default,,0000,0000,0000,,robiąc grę,
Dialogue: 0,0:04:54.18,0:04:55.69,Default,,0000,0000,0000,,jak ja tutaj,
Dialogue: 0,0:04:55.69,0:04:57.22,Default,,0000,0000,0000,,żeby rozłożyć elementy
Dialogue: 0,0:04:57.22,0:04:58.86,Default,,0000,0000,0000,,scenki w przeglądarce.
Dialogue: 0,0:04:58.86,0:05:00.23,Default,,0000,0000,0000,,Można też stosować to
Dialogue: 0,0:05:00.23,0:05:01.63,Default,,0000,0000,0000,,do zwyczajnych stron,
Dialogue: 0,0:05:01.63,0:05:03.03,Default,,0000,0000,0000,,np. w Khan Academy.
Dialogue: 0,0:05:03.03,0:05:04.38,Default,,0000,0000,0000,,Pozycjonowanie bezwzględne
Dialogue: 0,0:05:04.38,0:05:06.28,Default,,0000,0000,0000,,stosujemy do modeli na środku,
Dialogue: 0,0:05:06.28,0:05:07.65,Default,,0000,0000,0000,,a pozycjonowanie ustalone
Dialogue: 0,0:05:07.65,0:05:08.75,Default,,0000,0000,0000,,do pola przeszukiwania.
Dialogue: 0,0:05:08.75,0:05:11.81,Default,,0000,0000,0000,,Zawsze będzie widoczne.
Dialogue: 0,0:05:11.81,0:05:14.23,Default,,0000,0000,0000,,Nie będziecie używać\Npozycjonowania
Dialogue: 0,0:05:14.23,0:05:15.43,Default,,0000,0000,0000,,na każdej stronie,
Dialogue: 0,0:05:15.43,0:05:16.70,Default,,0000,0000,0000,,ale jeśli już,
Dialogue: 0,0:05:16.70,0:05:18.97,Default,,0000,0000,0000,,to będziecie zadowoleni, że można.