1
00:00:00,143 --> 00:00:04,498
მე ვაკეთებ გვერდს ჰუპერისთვის,
ხან აკადემის ერთ–ერთი ავატარისთვის.

2
00:00:04,715 --> 00:00:09,518
უკვე გვაქვს სურათი, რამდენიმე მაგარი ბმული
და პარაგრაფი.

3
00:00:10,365 --> 00:00:15,516
მე ვფიქრობ, რომ უკეთესი იქნება, თუ 
ჰუპერის სურათს პარაგრაფის გვერდით დავდებთ

4
00:00:15,516 --> 00:00:17,766
ამიტომ ამოვჭრი მას აქედან

5
00:00:17,766 --> 00:00:19,991
და ჩავსვამ აქ.

6
00:00:20,295 --> 00:00:23,561
ჰმ. არც ისე კარგად გამოიყურება.

7
00:00:23,795 --> 00:00:25,873
ტექსტი სურათის შემდეგ იწყება,

8
00:00:26,038 --> 00:00:28,810
მე კი იმედი მქონდა, რომ ის
სურათის ირგვლივ განთავსდება,

9
00:00:28,810 --> 00:00:30,653
როგორც ეს გაზეთებშია ხოლმე.

10
00:00:30,698 --> 00:00:33,270
ამისთვის CSS–ის 
ახალი თვისება გვინდა, float

11
00:00:33,270 --> 00:00:36,540
მისი მეშვეობით ერთი ელემენტი მეორეში 
ან მეორეს ირგვლივ თავსდება

12
00:00:36,540 --> 00:00:40,065
მოკლედ, მშვენივრად გამოგვადგება ამ ტექსტის
სურათის ირგვლივ განსალაგებლად.

13
00:00:40,065 --> 00:00:43,957
გადავიდეთ წესზე pic და დავურთოთ 
float:

14
00:00:44,297 --> 00:00:48,083
მნიშვნელობის ჩასაწერად უნდა გადავწყვიტოთ,

15
00:00:48,083 --> 00:00:50,422
სურათი მარჯვნივ გვინდა რომ იყოს, 
თუ მარცხნივ.

16
00:00:50,766 --> 00:00:52,009
ვცადოთ მარცხენა მხარე.

17
00:00:52,736 --> 00:00:54,467
მშვენიერია.

18
00:00:54,590 --> 00:00:57,352
სინამდვილეში, არც ისე მშვენიერია

19
00:00:57,352 --> 00:01:00,207
იმიტომ რომ ტექსტი ძალიან ახლოსაა
სურათთან.

20
00:01:00,317 --> 00:01:02,431
გახსოვთ, რომელ თვისებას ვიყენებთ

21
00:01:02,431 --> 00:01:04,443
ტექსტისა და სურათის განსაცალკავებლად?

22
00:01:04,763 --> 00:01:07,216
ყუთის მოდელში ვისწავლეთ:

23
00:01:07,419 --> 00:01:08,607
არშია.

24
00:01:08,901 --> 00:01:13,665
დავუმათოთ სურათს margin: right
და margin: bottom

25
00:01:13,665 --> 00:01:15,504
რომ ცოტა სივრცე დაიმკვიდროს.

26
00:01:16,076 --> 00:01:21,978
აი, ასე სჯობს.

27
00:01:22,272 --> 00:01:26,073
float გამოიეყენება არა მხოლოდ სურათებთან.

28
00:01:26,610 --> 00:01:28,592
მაგალითად, გვერდითი მენიუ გვინდა

29
00:01:29,077 --> 00:01:31,334
მოდით..
აი, დავუშვათ, ეს ბმულები ავიღოთ.

30
00:01:31,749 --> 00:01:34,850
ავიღონ ეს სია და მივანიჭოთ მას float: right

31
00:01:35,125 --> 00:01:38,098
ამისთვის ჯერ შევქმნათ წესი #hopper-links

32
00:01:38,098 --> 00:01:40,751
და შემდეგ თვისება float: right

33
00:01:41,290 --> 00:01:44,370
მარჯვნივ კი განთავსდა, ამგრამ

34
00:01:44,370 --> 00:01:46,439
მეტი ადგილი მიაქვს, ვიდრე მეგონა.

35
00:01:46,728 --> 00:01:50,515
შევზღუდოთ განი 30 პროცენტით.

36
00:01:50,515 --> 00:01:55,076
რომ გვერდის 30 პროცენტზე მეტი არ დაიკავოს

37
00:01:55,076 --> 00:01:59,263
და დანარენი 70 პროცენტი
გვერდის დარჩენილ შიგთავსს დაუთმოს.

38
00:01:59,447 --> 00:02:01,934
ზოგადად, ყოველთვის როცა ვათავსებთ div–ს
უნდა განვსაზღვროთ მისი განი.

39
00:02:02,115 --> 00:02:04,983
თორემ div ცდის დაიკავოს მთელი ადგილი

40
00:02:04,983 --> 00:02:06,668
და მის ირგვლივ ვერაფერი ვერ განთავსდება.

41
00:02:07,113 --> 00:02:10,966
როგორც ჩანს ცოტა margin: left არის საჭირო

42
00:02:11,413 --> 00:02:12,853
აი, ასე კარგია.

43
00:02:13,402 --> 00:02:18,146
ახლა შეხედეთ ფუტერს, ჰუპერის საკონტაქტო
ინფორმაციის ქვემოთ

44
00:02:18,164 --> 00:02:21,358
რაღაც უცნაურად ედება ზემოდან გვერდით მენიუს

45
00:02:21,358 --> 00:02:24,233
და ეს იმიტომ ხდება, რომ wrapping 
პარამეტრი გვაქვს მითითებული

46
00:02:24,233 --> 00:02:25,931
არადა, არ გვინდა, რომ ასე ედებოდეს

47
00:02:25,931 --> 00:02:28,203
გვინდა, რომ ყოველთვის ყველაფრის 
ქვემოთ იყოს

48
00:02:28,203 --> 00:02:30,005
იმიტომ რომ ფუტერია, ბოლოს და ბოლოს

49
00:02:30,042 --> 00:02:32,249
იმისთვის, რომ არ ეხვეოდეს გარს,

50
00:02:32,249 --> 00:02:34,456
შეგივძლია გამოვიყენოთ თვისება
clear

51
00:02:34,456 --> 00:02:36,575
ჩავწეროთ: clear: both

52
00:02:36,733 --> 00:02:37,744
აი, გამოვიდა.

53
00:02:37,744 --> 00:02:40,226
შეგვიძლია, გამოვიყენოთ 
clear: left ან clear: right

54
00:02:40,226 --> 00:02:42,766
თუ გვინდა, რომ მხოლოდ მარჯვნიდან ან 
მხოლოდ მაცხნიდან

55
00:02:42,766 --> 00:02:44,442
გარს მოხვეული ელემენტები მოვხსნათ.

56
00:02:44,519 --> 00:02:47,660
მაგრამ თუ გვინდა, რომ არც ერთი ელემენტი
არ ეხვეოდეს გარს მეორეს,

57
00:02:47,660 --> 00:02:49,054
მაშინ ვწერთ clear: both

58
00:02:49,322 --> 00:02:52,127
ახლა ეს უკვე ჰგავს ნამდვილ 
ვებ–გვერდს.

59
00:02:52,322 --> 00:02:54,819
გვაქვს მთავარი სივრცე, გვერდითი მენიუ,
ფუტერი.

60
00:02:55,034 --> 00:03:00,021
ახლა უყკვე იცი CSS–ის ის თვისებები, რაც
ყველა ხშირად შეგხვდება ვებ–გვერდებზე

61
00:03:00,283 --> 00:03:04,732
შეართე რამდენიმე div განსაზღვრული განით,
სიმაღლით, განლაგებით, არშიით, მდებარეობით

62
00:03:04,732 --> 00:03:08,379
რაც საჭიროა, მოაშორე და აი, გვერდების
ძირითადი ტიპების შექმნა უკვე შეგიძლია.