[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:01.93,Default,,0000,0000,0000,,ახლა ჩვენ ვისწავლით, \Nროგორ გამოვიყენოთ CSS
Dialogue: 0,0:00:01.93,0:00:03.84,Default,,0000,0000,0000,,ელემენტების გადაადგილებისთვის.
Dialogue: 0,0:00:03.84,0:00:06.00,Default,,0000,0000,0000,,არა უბრალოდ ერთმანეთის გვერდით\Nდასალაგებლად,
Dialogue: 0,0:00:06.00,0:00:07.54,Default,,0000,0000,0000,,არამედ ერთმანეთის მიყოლებით\N
Dialogue: 0,0:00:07.54,0:00:09.03,Default,,0000,0000,0000,,ერთი მეორეს შემდეგ დასაწყობად.
Dialogue: 0,0:00:09.03,0:00:11.61,Default,,0000,0000,0000,,აქ გვაქვს ვებ-გვერდი
Dialogue: 0,0:00:11.61,0:00:16.04,Default,,0000,0000,0000,,რამდენიმე სათაურითა და სურათებით და
Dialogue: 0,0:00:16.04,0:00:18.07,Default,,0000,0000,0000,,კიდევ გვაქვს რამდენიმე აბზაცი
Dialogue: 0,0:00:18.07,0:00:20.16,Default,,0000,0000,0000,,ეს ყველაფერი ახლა განლაგებულია
Dialogue: 0,0:00:20.16,0:00:22.18,Default,,0000,0000,0000,,სტანდარტული წყობის მიხედვით.
Dialogue: 0,0:00:22.18,0:00:24.21,Default,,0000,0000,0000,,რასაც ძირითადად იყენებს ბრაუზერი.
Dialogue: 0,0:00:24.21,0:00:26.96,Default,,0000,0000,0000,,ჩვენ მას სტატიკურ ან ჩვეულებრივ\Nგანლაგებას ვუწოდებთ,
Dialogue: 0,0:00:26.96,0:00:29.39,Default,,0000,0000,0000,,რაც ნიშნავს, რომ ერთ ხაზის ელეენტები,
Dialogue: 0,0:00:29.39,0:00:30.70,Default,,0000,0000,0000,,მაგალითად, სურათები,
Dialogue: 0,0:00:30.70,0:00:32.30,Default,,0000,0000,0000,,განლაგებულია მარცხნიდან მარჯვნივ
Dialogue: 0,0:00:32.30,0:00:33.80,Default,,0000,0000,0000,,ბლოკები კი, ისეთები, როგორც\N
Dialogue: 0,0:00:33.80,0:00:35.49,Default,,0000,0000,0000,,სათაურები(ჰედერები) და აბზაცები
Dialogue: 0,0:00:35.49,0:00:37.56,Default,,0000,0000,0000,,განლაგებულია ზემოდან ქვემოთ.
Dialogue: 0,0:00:37.56,0:00:39.92,Default,,0000,0000,0000,,შეგვიძლია, შევცვალოთ განლაგების სტრატეგია
Dialogue: 0,0:00:39.92,0:00:42.67,Default,,0000,0000,0000,,CSS-ის პოზიციონირების თვისების გამოყენებით
Dialogue: 0,0:00:42.67,0:00:45.62,Default,,0000,0000,0000,,მოდი ვცადოთ ეს ამ სურათის მაგალითზე.
Dialogue: 0,0:00:45.62,0:00:49.18,Default,,0000,0000,0000,,დავწეროთ: position:
Dialogue: 0,0:00:49.18,0:00:51.45,Default,,0000,0000,0000,,და შემდეგ მნიშვნელობად მივუთითოთ\Nrelative
Dialogue: 0,0:00:51.45,0:00:53.41,Default,,0000,0000,0000,,relative განლაგების სტრატეგია
Dialogue: 0,0:00:53.41,0:00:55.41,Default,,0000,0000,0000,,ნიშნავს, რომ ელემენტს ჩვეულებრივად ვსვამთ
Dialogue: 0,0:00:55.41,0:00:57.79,Default,,0000,0000,0000,,შემდეგ კი რაღაც მანძილით დავაშოროთ
Dialogue: 0,0:00:57.79,0:01:00.16,Default,,0000,0000,0000,,ახლა მივუთითოთ ბრაუზერს,\N
Dialogue: 0,0:01:00.16,0:01:01.50,Default,,0000,0000,0000,,რა მანძილით გვინდა დაშორება
Dialogue: 0,0:01:01.50,0:01:03.14,Default,,0000,0000,0000,,ამისთვის უნდა გამოვიყენოთ
Dialogue: 0,0:01:03.14,0:01:05.18,Default,,0000,0000,0000,,CSS-ის ოთხი ახალი\Nთვისების კომბინაცია
Dialogue: 0,0:01:05.18,0:01:07.42,Default,,0000,0000,0000,,ზედა, ქვედა, მარცხენა და მარჯვენა.
Dialogue: 0,0:01:07.42,0:01:09.44,Default,,0000,0000,0000,,მაგალითად, გვინდა დავაშოროთ
Dialogue: 0,0:01:09.44,0:01:13.58,Default,,0000,0000,0000,,ოცი პიქსელით ქვემოდან
Dialogue: 0,0:01:13.63,0:01:15.22,Default,,0000,0000,0000,,და კიდევ ათით...
Dialogue: 0,0:01:15.22,0:01:16.68,Default,,0000,0000,0000,,დავუშვათ, ათით მარცხნიდან.
Dialogue: 0,0:01:16.68,0:01:18.67,Default,,0000,0000,0000,,კარგია, არა?
Dialogue: 0,0:01:18.67,0:01:20.89,Default,,0000,0000,0000,,მაგრამ კიდევ უფრო მაგარი რამე
Dialogue: 0,0:01:20.89,0:01:23.47,Default,,0000,0000,0000,,შემიძლია გაჩენოთ.
Dialogue: 0,0:01:23.47,0:01:25.08,Default,,0000,0000,0000,,კერძოდ, აბსოლუტური განლაგება.
Dialogue: 0,0:01:25.08,0:01:26.27,Default,,0000,0000,0000,,ეს შეგვიძლია გამოვიყენოთ
Dialogue: 0,0:01:26.27,0:01:28.52,Default,,0000,0000,0000,,თუ გვინდა ამოვიღოთ ელემენტი\Nსტანდარტული წყობიდან
Dialogue: 0,0:01:28.52,0:01:30.61,Default,,0000,0000,0000,,და ეკრანზე რომელიმე სხვა\Nადგილას დავსვათ.
Dialogue: 0,0:01:30.61,0:01:31.66,Default,,0000,0000,0000,,ამისთვის
Dialogue: 0,0:01:31.66,0:01:32.94,Default,,0000,0000,0000,,შევცვალოთ relative მნიშვნელობა
Dialogue: 0,0:01:32.94,0:01:34.04,Default,,0000,0000,0000,,ჩავწეროთ absolute
Dialogue: 0,0:01:34.04,0:01:35.20,Default,,0000,0000,0000,,მაგრამ დავტოვოთ
Dialogue: 0,0:01:35.20,0:01:36.58,Default,,0000,0000,0000,,ზემოთა და მარცხენა თვისებები
Dialogue: 0,0:01:36.58,0:01:37.78,Default,,0000,0000,0000,,როგორც ხედავთ
Dialogue: 0,0:01:37.78,0:01:39.21,Default,,0000,0000,0000,,ახლა ჩვენი სურათი
Dialogue: 0,0:01:39.21,0:01:41.34,Default,,0000,0000,0000,,ფარავს როგორც სხვა სურათებს, \Nასევე ჰედერს.
Dialogue: 0,0:01:41.34,0:01:42.77,Default,,0000,0000,0000,,ეს არ გვაწყობს, გამოვასწოროთ.
Dialogue: 0,0:01:42.77,0:01:44.79,Default,,0000,0000,0000,,დავიწყოთ უინსტონით.
Dialogue: 0,0:01:44.79,0:01:48.46,Default,,0000,0000,0000,,დავამატოთ მისთვის წესი
Dialogue: 0,0:01:48.46,0:01:52.10,Default,,0000,0000,0000,,position: absolute
Dialogue: 0,0:01:52.10,0:01:54.30,Default,,0000,0000,0000,,და, დავუშვათ,
Dialogue: 0,0:01:54.30,0:01:56.11,Default,,0000,0000,0000,,ზემოდან 40 პიქსელი
Dialogue: 0,0:01:56.11,0:01:58.39,Default,,0000,0000,0000,,არა, 50 იყოს
Dialogue: 0,0:01:58.39,0:02:00.06,Default,,0000,0000,0000,,და 50 მარცხნივ
Dialogue: 0,0:02:00.06,0:02:02.20,Default,,0000,0000,0000,,აი, ახლა კარგია.
Dialogue: 0,0:02:02.20,0:02:04.30,Default,,0000,0000,0000,,ჰუპერსაც უნდა ზემოთ
Dialogue: 0,0:02:04.30,0:02:05.62,Default,,0000,0000,0000,,ამიტომ
Dialogue: 0,0:02:05.62,0:02:07.30,Default,,0000,0000,0000,,მასაც მივანიჭოთ
Dialogue: 0,0:02:07.30,0:02:11.66,Default,,0000,0000,0000,,position: absolute
Dialogue: 0,0:02:11.66,0:02:15.22,Default,,0000,0000,0000,,თვისებები: top: 30
Dialogue: 0,0:02:15.22,0:02:17.81,Default,,0000,0000,0000,,left:70
Dialogue: 0,0:02:17.81,0:02:19.61,Default,,0000,0000,0000,,ჩემი მიზანია
Dialogue: 0,0:02:19.61,0:02:21.22,Default,,0000,0000,0000,,ჩანდეს ისე, თითქოს ჰუპერი
Dialogue: 0,0:02:21.22,0:02:23.74,Default,,0000,0000,0000,,უინსტონის ირგვლივ ცეკვავს.
Dialogue: 0,0:02:23.74,0:02:26.17,Default,,0000,0000,0000,,მაგრამ ჯერ–ჯერობით კომპოზიცია\Nასე არ გამოიიყურება
Dialogue: 0,0:02:26.17,0:02:28.24,Default,,0000,0000,0000,,იმიტომ რომ უინსტონი
Dialogue: 0,0:02:28.24,0:02:30.36,Default,,0000,0000,0000,,ჰოპერის ზემოდან ხატია.
Dialogue: 0,0:02:30.36,0:02:31.95,Default,,0000,0000,0000,,ამის გამოსასწორებლად
Dialogue: 0,0:02:31.95,0:02:33.62,Default,,0000,0000,0000,,შემიძლია ან შევცვალო
Dialogue: 0,0:02:33.62,0:02:35.14,Default,,0000,0000,0000,,სურათების თეგების თანმიმდევრობა
Dialogue: 0,0:02:35.14,0:02:36.68,Default,,0000,0000,0000,,HTML-ში
Dialogue: 0,0:02:36.68,0:02:38.70,Default,,0000,0000,0000,,მაგრამ აჯობებს გამოვიყენოთ CSS თვისებები
Dialogue: 0,0:02:38.70,0:02:42.26,Default,,0000,0000,0000,,CSS–ის z ინდექსის გამოყენებით
Dialogue: 0,0:02:42.26,0:02:43.94,Default,,0000,0000,0000,,შეგვიძლია ვუთხრათ ბრაუზერს
Dialogue: 0,0:02:43.94,0:02:44.86,Default,,0000,0000,0000,,რა თანმიმდევრობით
Dialogue: 0,0:02:44.86,0:02:46.04,Default,,0000,0000,0000,,უნდა ჩახატოს ელემენტები
Dialogue: 0,0:02:46.04,0:02:47.04,Default,,0000,0000,0000,,ამისთვის მათ სხვაობის
Dialogue: 0,0:02:47.04,0:02:48.25,Default,,0000,0000,0000,,ინდექსები უნდა მიანიჭოს.
Dialogue: 0,0:02:48.25,0:02:50.69,Default,,0000,0000,0000,,დავიწყოთ ლანდშაფტით.
Dialogue: 0,0:02:50.69,0:02:53.27,Default,,0000,0000,0000,,მისი z ინდექსი იქნება 1
Dialogue: 0,0:02:53.27,0:02:56.34,Default,,0000,0000,0000,,უინსტონის - 2
Dialogue: 0,0:02:56.34,0:02:59.05,Default,,0000,0000,0000,,ჰოპერის – 3
Dialogue: 0,0:02:59.05,0:03:00.08,Default,,0000,0000,0000,,კარგია!
Dialogue: 0,0:03:00.08,0:03:02.64,Default,,0000,0000,0000,,ახლა ჰოპერი უინსტონის წინ ცეკვავს
Dialogue: 0,0:03:02.64,0:03:04.18,Default,,0000,0000,0000,,მოსწონს ეს თუ არა
Dialogue: 0,0:03:04.18,0:03:05.24,Default,,0000,0000,0000,,უწევს;
Dialogue: 0,0:03:05.24,0:03:07.80,Default,,0000,0000,0000,,ახლა ვნახოთ, რა შეიძლება ვუყოთ დამალულ
Dialogue: 0,0:03:07.80,0:03:09.99,Default,,0000,0000,0000,,ჰედერებსა და სვეტებს
Dialogue: 0,0:03:09.99,0:03:12.45,Default,,0000,0000,0000,,აბა..
Dialogue: 0,0:03:12.45,0:03:13.94,Default,,0000,0000,0000,,მინდა, რომ ეს ცეკვა
Dialogue: 0,0:03:13.94,0:03:16.89,Default,,0000,0000,0000,,ყველაფერზე მაღლა იყოს განლაგებული
Dialogue: 0,0:03:16.89,0:03:19.08,Default,,0000,0000,0000,,ამიტომ მივანიჭებ
Dialogue: 0,0:03:19.08,0:03:20.70,Default,,0000,0000,0000,,აბსოლურ პოზიციას
Dialogue: 0,0:03:20.70,0:03:21.76,Default,,0000,0000,0000,,და z ინდექს 4–ს
Dialogue: 0,0:03:21.76,0:03:22.100,Default,,0000,0000,0000,,კარგია.
Dialogue: 0,0:03:22.100,0:03:25.25,Default,,0000,0000,0000,,ასე ათი პიქსელით მარცხნივ რომ გადავიტანოთ
Dialogue: 0,0:03:25.25,0:03:26.91,Default,,0000,0000,0000,,ან კიდევ ოდნავ მეტით
Dialogue: 0,0:03:26.91,0:03:28.52,Default,,0000,0000,0000,,აჰა, ასე კარგია.
Dialogue: 0,0:03:28.52,0:03:29.69,Default,,0000,0000,0000,,ახლა სიმღერის ტექსტს მივადგეთ.
Dialogue: 0,0:03:29.69,0:03:31.11,Default,,0000,0000,0000,,მინდა, რომ ის ყველაფრის
Dialogue: 0,0:03:31.11,0:03:32.82,Default,,0000,0000,0000,,ქვემოთ ჩანდეს უბრალოდ.
Dialogue: 0,0:03:32.82,0:03:35.52,Default,,0000,0000,0000,,ამიტომ, მივანიჭოთ
Dialogue: 0,0:03:35.52,0:03:38.22,Default,,0000,0000,0000,,შედარებითი პოზიცია
Dialogue: 0,0:03:38.22,0:03:39.47,Default,,0000,0000,0000,,და დავაყენოთ ზედა ზღვარი
Dialogue: 0,0:03:39.47,0:03:40.68,Default,,0000,0000,0000,,რომელიც სურათის სიმაღლეს \N
Dialogue: 0,0:03:40.68,0:03:42.57,Default,,0000,0000,0000,,უნდა უდრიდეს;
Dialogue: 0,0:03:42.57,0:03:45.12,Default,,0000,0000,0000,,რაც 220 პიქსელია
Dialogue: 0,0:03:45.12,0:03:48.42,Default,,0000,0000,0000,,მშვენიერია, მომწონს, როგორც გამოვიდა
Dialogue: 0,0:03:48.42,0:03:50.13,Default,,0000,0000,0000,,მშვენიერი წვეულება
Dialogue: 0,0:03:50.13,0:03:52.18,Default,,0000,0000,0000,,მოგვიწყვია.
Dialogue: 0,0:03:52.18,0:03:53.82,Default,,0000,0000,0000,,ახლა თუ დააპაუზებთ ვიდეოს
Dialogue: 0,0:03:53.82,0:03:55.77,Default,,0000,0000,0000,,და ჩამოწევთ გვერდს
Dialogue: 0,0:03:55.77,0:03:58.05,Default,,0000,0000,0000,,დაინახავთ, რომ ყველაფერი\N
Dialogue: 0,0:03:58.05,0:03:59.21,Default,,0000,0000,0000,,ერთად მოძრაობს
Dialogue: 0,0:03:59.21,0:04:00.99,Default,,0000,0000,0000,,მნიშვნელოვანი კი ის არის,
Dialogue: 0,0:04:00.99,0:04:02.84,Default,,0000,0000,0000,,რომ აბსოლუტური პოზიცია დამოკიდებულია
Dialogue: 0,0:04:02.84,0:04:04.05,Default,,0000,0000,0000,,გვერის ზემოთა ზღვარზე
Dialogue: 0,0:04:04.05,0:04:06.02,Default,,0000,0000,0000,,ამიტომ, როცა გვერდს სქროლავთ
Dialogue: 0,0:04:06.04,0:04:07.73,Default,,0000,0000,0000,,ყველაფერი, რაც ზემოთ იყო
Dialogue: 0,0:04:07.73,0:04:10.55,Default,,0000,0000,0000,,ნელ–ნელა ქრება,
Dialogue: 0,0:04:10.55,0:04:11.92,Default,,0000,0000,0000,,იმიტომ რომ თქვენ შორდებით
Dialogue: 0,0:04:11.92,0:04:14.64,Default,,0000,0000,0000,,გვერდის ზემოთა ნაწილს
Dialogue: 0,0:04:14.64,0:04:15.81,Default,,0000,0000,0000,,მეორე ვარიანტია
Dialogue: 0,0:04:15.81,0:04:17.11,Default,,0000,0000,0000,,ფიქსირებული პოზიცია,
Dialogue: 0,0:04:17.11,0:04:18.76,Default,,0000,0000,0000,,ამ შემთხვევაში გამოჩნდება თითქოს
Dialogue: 0,0:04:18.76,0:04:20.35,Default,,0000,0000,0000,,არაფერი არ მოძრაობს საერთოდ
Dialogue: 0,0:04:20.35,0:04:22.10,Default,,0000,0000,0000,,თუ გინდათ სცადოთ,
Dialogue: 0,0:04:22.10,0:04:23.05,Default,,0000,0000,0000,,უბრალოდ შეცვალეთ
Dialogue: 0,0:04:23.05,0:04:25.69,Default,,0000,0000,0000,,h1 აბსოლუტურიდან ფიქსირებულზე
Dialogue: 0,0:04:25.69,0:04:29.07,Default,,0000,0000,0000,,მერე კი დააპაუზეთ და ჩამოსქროლეთ
Dialogue: 0,0:04:29.07,0:04:31.08,Default,,0000,0000,0000,,დაინახავთ, რომ
Dialogue: 0,0:04:31.08,0:04:33.68,Default,,0000,0000,0000,,ჩვენი წვეულება იმავე ადგილას რჩება
Dialogue: 0,0:04:33.68,0:04:35.67,Default,,0000,0000,0000,,იმიტომ რომ ახლა ის დამოკიდებულია
Dialogue: 0,0:04:35.67,0:04:39.22,Default,,0000,0000,0000,,ეკრანის ზედა ზღვარზე,
Dialogue: 0,0:04:39.22,0:04:40.85,Default,,0000,0000,0000,,ბრაუზერის ფანჯარაზე.
Dialogue: 0,0:04:40.85,0:04:43.92,Default,,0000,0000,0000,,აი, ასევ ისწავლეთ
Dialogue: 0,0:04:43.92,0:04:45.94,Default,,0000,0000,0000,,სამი სხვადასხვა პოზიციის გამოყენება.
Dialogue: 0,0:04:45.94,0:04:47.70,Default,,0000,0000,0000,,და შეგვიძლია ბევრი მაგარი რამის გაკეთება
Dialogue: 0,0:04:47.70,0:04:48.52,Default,,0000,0000,0000,,შეიძლება გაინტერესებთ,
Dialogue: 0,0:04:48.52,0:04:51.07,Default,,0000,0000,0000,,როდის ვიყენებთ აბსოლუტურ\Nდა ფიქსირებულ პოზიციებს?
Dialogue: 0,0:04:51.07,0:04:53.11,Default,,0000,0000,0000,,ჰმ.. მაგალითად,
Dialogue: 0,0:04:53.11,0:04:54.18,Default,,0000,0000,0000,,თამაშის შექმნისას
Dialogue: 0,0:04:54.18,0:04:55.69,Default,,0000,0000,0000,,როგორც აქ გავაკეთე ეს
Dialogue: 0,0:04:55.69,0:04:57.22,Default,,0000,0000,0000,,როცა სცენის ყველა ნაწილის
Dialogue: 0,0:04:57.22,0:04:58.86,Default,,0000,0000,0000,,გამოჩენა გინდათ ბრაუზერში
Dialogue: 0,0:04:58.86,0:05:00.23,Default,,0000,0000,0000,,მაგრამ ასევე გამოიყენეთ
Dialogue: 0,0:05:00.23,0:05:01.63,Default,,0000,0000,0000,,ჩვეულებრივი ვებ–გვერდებისთვის
Dialogue: 0,0:05:01.63,0:05:02.94,Default,,0000,0000,0000,,მაგალითად, ხანის აკადემიაზე
Dialogue: 0,0:05:02.94,0:05:04.91,Default,,0000,0000,0000,,იმ მოდულებისთვის, გვერდის შუაში\Nრომ ხტება
Dialogue: 0,0:05:04.91,0:05:06.28,Default,,0000,0000,0000,,აბსოლუტურ პოზიციას ვიყენებთ.
Dialogue: 0,0:05:06.28,0:05:07.38,Default,,0000,0000,0000,,ფიქსირებულს კი ვიყენებთ
Dialogue: 0,0:05:07.38,0:05:08.79,Default,,0000,0000,0000,,ძებნის ველისთვის ზოგ გვერდზე
Dialogue: 0,0:05:08.79,0:05:11.81,Default,,0000,0000,0000,,რომ ყოველთვის ჩანდეს და ყოველთვის შეძლო\Nმისი გამოყენება
Dialogue: 0,0:05:11.81,0:05:14.23,Default,,0000,0000,0000,,პოზიციები შეიძლება არ გამოიყენო
Dialogue: 0,0:05:14.23,0:05:15.43,Default,,0000,0000,0000,,ყოველ გვერდზე
Dialogue: 0,0:05:15.43,0:05:16.70,Default,,0000,0000,0000,,მაგრამ როცა გამოიყენებ,
Dialogue: 0,0:05:16.70,0:05:18.97,Default,,0000,0000,0000,,ძალიან გაგიხარდება მათი არსებობა.