[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.14,0:00:04.50,Default,,0000,0000,0000,,მე ვაკეთებ გვერდს ჰუპერისთვის,\Nხან აკადემის ერთ–ერთი ავატარისთვის.
Dialogue: 0,0:00:04.72,0:00:09.52,Default,,0000,0000,0000,,უკვე გვაქვს სურათი, რამდენიმე მაგარი ბმული\Nდა პარაგრაფი.
Dialogue: 0,0:00:10.36,0:00:15.52,Default,,0000,0000,0000,,მე ვფიქრობ, რომ უკეთესი იქნება, თუ \Nჰუპერის სურათს პარაგრაფის გვერდით დავდებთ
Dialogue: 0,0:00:15.52,0:00:17.77,Default,,0000,0000,0000,,ამიტომ ამოვჭრი მას აქედან
Dialogue: 0,0:00:17.77,0:00:19.99,Default,,0000,0000,0000,,და ჩავსვამ აქ.
Dialogue: 0,0:00:20.30,0:00:23.56,Default,,0000,0000,0000,,ჰმ. არც ისე კარგად გამოიყურება.
Dialogue: 0,0:00:23.80,0:00:25.87,Default,,0000,0000,0000,,ტექსტი სურათის შემდეგ იწყება,
Dialogue: 0,0:00:26.04,0:00:28.81,Default,,0000,0000,0000,,მე კი იმედი მქონდა, რომ ის\Nსურათის ირგვლივ განთავსდება,
Dialogue: 0,0:00:28.81,0:00:30.65,Default,,0000,0000,0000,,როგორც ეს გაზეთებშია ხოლმე.
Dialogue: 0,0:00:30.70,0:00:33.27,Default,,0000,0000,0000,,ამისთვის CSS–ის \Nახალი თვისება გვინდა, float
Dialogue: 0,0:00:33.27,0:00:36.54,Default,,0000,0000,0000,,მისი მეშვეობით ერთი ელემენტი მეორეში \Nან მეორეს ირგვლივ თავსდება
Dialogue: 0,0:00:36.54,0:00:40.06,Default,,0000,0000,0000,,მოკლედ, მშვენივრად გამოგვადგება ამ ტექსტის\Nსურათის ირგვლივ განსალაგებლად.
Dialogue: 0,0:00:40.06,0:00:43.96,Default,,0000,0000,0000,,გადავიდეთ წესზე pic და დავურთოთ \Nfloat:
Dialogue: 0,0:00:44.30,0:00:48.08,Default,,0000,0000,0000,,მნიშვნელობის ჩასაწერად უნდა გადავწყვიტოთ,
Dialogue: 0,0:00:48.08,0:00:50.42,Default,,0000,0000,0000,,სურათი მარჯვნივ გვინდა რომ იყოს, \Nთუ მარცხნივ.
Dialogue: 0,0:00:50.77,0:00:52.01,Default,,0000,0000,0000,,ვცადოთ მარცხენა მხარე.
Dialogue: 0,0:00:52.74,0:00:54.47,Default,,0000,0000,0000,,მშვენიერია.
Dialogue: 0,0:00:54.59,0:00:57.35,Default,,0000,0000,0000,,სინამდვილეში, არც ისე მშვენიერია
Dialogue: 0,0:00:57.35,0:01:00.21,Default,,0000,0000,0000,,იმიტომ რომ ტექსტი ძალიან ახლოსაა\Nსურათთან.
Dialogue: 0,0:01:00.32,0:01:02.43,Default,,0000,0000,0000,,გახსოვთ, რომელ თვისებას ვიყენებთ
Dialogue: 0,0:01:02.43,0:01:04.44,Default,,0000,0000,0000,,ტექსტისა და სურათის განსაცალკავებლად?
Dialogue: 0,0:01:04.76,0:01:07.22,Default,,0000,0000,0000,,ყუთის მოდელში ვისწავლეთ:
Dialogue: 0,0:01:07.42,0:01:08.61,Default,,0000,0000,0000,,არშია.
Dialogue: 0,0:01:08.90,0:01:13.66,Default,,0000,0000,0000,,დავუმათოთ სურათს margin: right\Nდა margin: bottom
Dialogue: 0,0:01:13.66,0:01:15.50,Default,,0000,0000,0000,,რომ ცოტა სივრცე დაიმკვიდროს.
Dialogue: 0,0:01:16.08,0:01:21.98,Default,,0000,0000,0000,,აი, ასე სჯობს.
Dialogue: 0,0:01:22.27,0:01:26.07,Default,,0000,0000,0000,,float გამოიეყენება არა მხოლოდ სურათებთან.
Dialogue: 0,0:01:26.61,0:01:28.59,Default,,0000,0000,0000,,მაგალითად, გვერდითი მენიუ გვინდა
Dialogue: 0,0:01:29.08,0:01:31.33,Default,,0000,0000,0000,,მოდით..\Nაი, დავუშვათ, ეს ბმულები ავიღოთ.
Dialogue: 0,0:01:31.75,0:01:34.85,Default,,0000,0000,0000,,ავიღონ ეს სია და მივანიჭოთ მას float: right
Dialogue: 0,0:01:35.12,0:01:38.10,Default,,0000,0000,0000,,ამისთვის ჯერ შევქმნათ წესი #hopper-links
Dialogue: 0,0:01:38.10,0:01:40.75,Default,,0000,0000,0000,,და შემდეგ თვისება float: right
Dialogue: 0,0:01:41.29,0:01:44.37,Default,,0000,0000,0000,,მარჯვნივ კი განთავსდა, ამგრამ
Dialogue: 0,0:01:44.37,0:01:46.44,Default,,0000,0000,0000,,მეტი ადგილი მიაქვს, ვიდრე მეგონა.
Dialogue: 0,0:01:46.73,0:01:50.52,Default,,0000,0000,0000,,შევზღუდოთ განი 30 პროცენტით.
Dialogue: 0,0:01:50.52,0:01:55.08,Default,,0000,0000,0000,,რომ გვერდის 30 პროცენტზე მეტი არ დაიკავოს
Dialogue: 0,0:01:55.08,0:01:59.26,Default,,0000,0000,0000,,და დანარენი 70 პროცენტი\Nგვერდის დარჩენილ შიგთავსს დაუთმოს.
Dialogue: 0,0:01:59.45,0:02:01.93,Default,,0000,0000,0000,,ზოგადად, ყოველთვის როცა ვათავსებთ div–ს\Nუნდა განვსაზღვროთ მისი განი.
Dialogue: 0,0:02:02.12,0:02:04.98,Default,,0000,0000,0000,,თორემ div ცდის დაიკავოს მთელი ადგილი
Dialogue: 0,0:02:04.98,0:02:06.67,Default,,0000,0000,0000,,და მის ირგვლივ ვერაფერი ვერ განთავსდება.
Dialogue: 0,0:02:07.11,0:02:10.97,Default,,0000,0000,0000,,როგორც ჩანს ცოტა margin: left არის საჭირო
Dialogue: 0,0:02:11.41,0:02:12.85,Default,,0000,0000,0000,,აი, ასე კარგია.
Dialogue: 0,0:02:13.40,0:02:18.15,Default,,0000,0000,0000,,ახლა შეხედეთ ფუტერს, ჰუპერის საკონტაქტო\Nინფორმაციის ქვემოთ
Dialogue: 0,0:02:18.16,0:02:21.36,Default,,0000,0000,0000,,რაღაც უცნაურად ედება ზემოდან გვერდით მენიუს
Dialogue: 0,0:02:21.36,0:02:24.23,Default,,0000,0000,0000,,და ეს იმიტომ ხდება, რომ wrapping \Nპარამეტრი გვაქვს მითითებული
Dialogue: 0,0:02:24.23,0:02:25.93,Default,,0000,0000,0000,,არადა, არ გვინდა, რომ ასე ედებოდეს
Dialogue: 0,0:02:25.93,0:02:28.20,Default,,0000,0000,0000,,გვინდა, რომ ყოველთვის ყველაფრის \Nქვემოთ იყოს
Dialogue: 0,0:02:28.20,0:02:30.00,Default,,0000,0000,0000,,იმიტომ რომ ფუტერია, ბოლოს და ბოლოს
Dialogue: 0,0:02:30.04,0:02:32.25,Default,,0000,0000,0000,,იმისთვის, რომ არ ეხვეოდეს გარს,
Dialogue: 0,0:02:32.25,0:02:34.46,Default,,0000,0000,0000,,შეგივძლია გამოვიყენოთ თვისება\Nclear
Dialogue: 0,0:02:34.46,0:02:36.58,Default,,0000,0000,0000,,ჩავწეროთ: clear: both
Dialogue: 0,0:02:36.73,0:02:37.74,Default,,0000,0000,0000,,აი, გამოვიდა.
Dialogue: 0,0:02:37.74,0:02:40.23,Default,,0000,0000,0000,,შეგვიძლია, გამოვიყენოთ \Nclear: left ან clear: right
Dialogue: 0,0:02:40.23,0:02:42.77,Default,,0000,0000,0000,,თუ გვინდა, რომ მხოლოდ მარჯვნიდან ან \Nმხოლოდ მაცხნიდან
Dialogue: 0,0:02:42.77,0:02:44.44,Default,,0000,0000,0000,,გარს მოხვეული ელემენტები მოვხსნათ.
Dialogue: 0,0:02:44.52,0:02:47.66,Default,,0000,0000,0000,,მაგრამ თუ გვინდა, რომ არც ერთი ელემენტი\Nარ ეხვეოდეს გარს მეორეს,
Dialogue: 0,0:02:47.66,0:02:49.05,Default,,0000,0000,0000,,მაშინ ვწერთ clear: both
Dialogue: 0,0:02:49.32,0:02:52.13,Default,,0000,0000,0000,,ახლა ეს უკვე ჰგავს ნამდვილ \Nვებ–გვერდს.
Dialogue: 0,0:02:52.32,0:02:54.82,Default,,0000,0000,0000,,გვაქვს მთავარი სივრცე, გვერდითი მენიუ,\Nფუტერი.
Dialogue: 0,0:02:55.03,0:03:00.02,Default,,0000,0000,0000,,ახლა უყკვე იცი CSS–ის ის თვისებები, რაც\Nყველა ხშირად შეგხვდება ვებ–გვერდებზე
Dialogue: 0,0:03:00.28,0:03:04.73,Default,,0000,0000,0000,,შეართე რამდენიმე div განსაზღვრული განით,\Nსიმაღლით, განლაგებით, არშიით, მდებარეობით
Dialogue: 0,0:03:04.73,0:03:08.38,Default,,0000,0000,0000,,რაც საჭიროა, მოაშორე და აი, გვერდების\Nძირითადი ტიპების შექმნა უკვე შეგიძლია.