0:00:00.143,0:00:04.498
მე ვაკეთებ გვერდს ჰუპერისთვის,[br]ხან აკადემის ერთ–ერთი ავატარისთვის.

0:00:04.715,0:00:09.518
უკვე გვაქვს სურათი, რამდენიმე მაგარი ბმული[br]და პარაგრაფი.

0:00:10.365,0:00:15.516
მე ვფიქრობ, რომ უკეთესი იქნება, თუ [br]ჰუპერის სურათს პარაგრაფის გვერდით დავდებთ

0:00:15.516,0:00:17.766
ამიტომ ამოვჭრი მას აქედან

0:00:17.766,0:00:19.991
და ჩავსვამ აქ.

0:00:20.295,0:00:23.561
ჰმ. არც ისე კარგად გამოიყურება.

0:00:23.795,0:00:25.873
ტექსტი სურათის შემდეგ იწყება,

0:00:26.038,0:00:28.810
მე კი იმედი მქონდა, რომ ის[br]სურათის ირგვლივ განთავსდება,

0:00:28.810,0:00:30.653
როგორც ეს გაზეთებშია ხოლმე.

0:00:30.698,0:00:33.270
ამისთვის CSS–ის [br]ახალი თვისება გვინდა, float

0:00:33.270,0:00:36.540
მისი მეშვეობით ერთი ელემენტი მეორეში [br]ან მეორეს ირგვლივ თავსდება

0:00:36.540,0:00:40.065
მოკლედ, მშვენივრად გამოგვადგება ამ ტექსტის[br]სურათის ირგვლივ განსალაგებლად.

0:00:40.065,0:00:43.957
გადავიდეთ წესზე pic და დავურთოთ [br]float:

0:00:44.297,0:00:48.083
მნიშვნელობის ჩასაწერად უნდა გადავწყვიტოთ,

0:00:48.083,0:00:50.422
სურათი მარჯვნივ გვინდა რომ იყოს, [br]თუ მარცხნივ.

0:00:50.766,0:00:52.009
ვცადოთ მარცხენა მხარე.

0:00:52.736,0:00:54.467
მშვენიერია.

0:00:54.590,0:00:57.352
სინამდვილეში, არც ისე მშვენიერია

0:00:57.352,0:01:00.207
იმიტომ რომ ტექსტი ძალიან ახლოსაა[br]სურათთან.

0:01:00.317,0:01:02.431
გახსოვთ, რომელ თვისებას ვიყენებთ

0:01:02.431,0:01:04.443
ტექსტისა და სურათის განსაცალკავებლად?

0:01:04.763,0:01:07.216
ყუთის მოდელში ვისწავლეთ:

0:01:07.419,0:01:08.607
არშია.

0:01:08.901,0:01:13.665
დავუმათოთ სურათს margin: right[br]და margin: bottom

0:01:13.665,0:01:15.504
რომ ცოტა სივრცე დაიმკვიდროს.

0:01:16.076,0:01:21.978
აი, ასე სჯობს.

0:01:22.272,0:01:26.073
float გამოიეყენება არა მხოლოდ სურათებთან.

0:01:26.610,0:01:28.592
მაგალითად, გვერდითი მენიუ გვინდა

0:01:29.077,0:01:31.334
მოდით..[br]აი, დავუშვათ, ეს ბმულები ავიღოთ.

0:01:31.749,0:01:34.850
ავიღონ ეს სია და მივანიჭოთ მას float: right

0:01:35.125,0:01:38.098
ამისთვის ჯერ შევქმნათ წესი #hopper-links

0:01:38.098,0:01:40.751
და შემდეგ თვისება float: right

0:01:41.290,0:01:44.370
მარჯვნივ კი განთავსდა, ამგრამ

0:01:44.370,0:01:46.439
მეტი ადგილი მიაქვს, ვიდრე მეგონა.

0:01:46.728,0:01:50.515
შევზღუდოთ განი 30 პროცენტით.

0:01:50.515,0:01:55.076
რომ გვერდის 30 პროცენტზე მეტი არ დაიკავოს

0:01:55.076,0:01:59.263
და დანარენი 70 პროცენტი[br]გვერდის დარჩენილ შიგთავსს დაუთმოს.

0:01:59.447,0:02:01.934
ზოგადად, ყოველთვის როცა ვათავსებთ div–ს[br]უნდა განვსაზღვროთ მისი განი.

0:02:02.115,0:02:04.983
თორემ div ცდის დაიკავოს მთელი ადგილი

0:02:04.983,0:02:06.668
და მის ირგვლივ ვერაფერი ვერ განთავსდება.

0:02:07.113,0:02:10.966
როგორც ჩანს ცოტა margin: left არის საჭირო

0:02:11.413,0:02:12.853
აი, ასე კარგია.

0:02:13.402,0:02:18.146
ახლა შეხედეთ ფუტერს, ჰუპერის საკონტაქტო[br]ინფორმაციის ქვემოთ

0:02:18.164,0:02:21.358
რაღაც უცნაურად ედება ზემოდან გვერდით მენიუს

0:02:21.358,0:02:24.233
და ეს იმიტომ ხდება, რომ wrapping [br]პარამეტრი გვაქვს მითითებული

0:02:24.233,0:02:25.931
არადა, არ გვინდა, რომ ასე ედებოდეს

0:02:25.931,0:02:28.203
გვინდა, რომ ყოველთვის ყველაფრის [br]ქვემოთ იყოს

0:02:28.203,0:02:30.005
იმიტომ რომ ფუტერია, ბოლოს და ბოლოს

0:02:30.042,0:02:32.249
იმისთვის, რომ არ ეხვეოდეს გარს,

0:02:32.249,0:02:34.456
შეგივძლია გამოვიყენოთ თვისება[br]clear

0:02:34.456,0:02:36.575
ჩავწეროთ: clear: both

0:02:36.733,0:02:37.744
აი, გამოვიდა.

0:02:37.744,0:02:40.226
შეგვიძლია, გამოვიყენოთ [br]clear: left ან clear: right

0:02:40.226,0:02:42.766
თუ გვინდა, რომ მხოლოდ მარჯვნიდან ან [br]მხოლოდ მაცხნიდან

0:02:42.766,0:02:44.442
გარს მოხვეული ელემენტები მოვხსნათ.

0:02:44.519,0:02:47.660
მაგრამ თუ გვინდა, რომ არც ერთი ელემენტი[br]არ ეხვეოდეს გარს მეორეს,

0:02:47.660,0:02:49.054
მაშინ ვწერთ clear: both

0:02:49.322,0:02:52.127
ახლა ეს უკვე ჰგავს ნამდვილ [br]ვებ–გვერდს.

0:02:52.322,0:02:54.819
გვაქვს მთავარი სივრცე, გვერდითი მენიუ,[br]ფუტერი.

0:02:55.034,0:03:00.021
ახლა უყკვე იცი CSS–ის ის თვისებები, რაც[br]ყველა ხშირად შეგხვდება ვებ–გვერდებზე

0:03:00.283,0:03:04.732
შეართე რამდენიმე div განსაზღვრული განით,[br]სიმაღლით, განლაგებით, არშიით, მდებარეობით

0:03:04.732,0:03:08.379
რაც საჭიროა, მოაშორე და აი, გვერდების[br]ძირითადი ტიპების შექმნა უკვე შეგიძლია.