1
00:00:00,000 --> 00:00:03,882
div-ებს ხშირად იმიტომ ვიყენებთ, რომ
გვერდის ყუთებად დაშლა გვინდა,

2
00:00:03,882 --> 00:00:07,737
ან ამ ყუთების ზომების შეცვლა,
ან მათი გადაადგილება.

3
00:00:07,737 --> 00:00:11,565
კარგი თვალია საჭირო იმისთვის,
რომ გადაწყვიტო სად რა განათავსო გვერდზე,

4
00:00:11,565 --> 00:00:13,029
ისე რომ კარგად გამოიყურებოდეს.

5
00:00:13,029 --> 00:00:16,484
ახლა, ჩვენ არ ვიზრუნებთ გვერდის
სილამაზეზე.

6
00:00:16,484 --> 00:00:18,911
უბრალოდ, გაჩვენებთ თუ როგორ უნდა
შეცვალოთ რაღაცები.

7
00:00:18,911 --> 00:00:22,002
მოდი, ზომა შევუცვალოთ
"official-info" div-ს.

8
00:00:22,002 --> 00:00:25,789
ჩვეულებრივ, div-ი იღებს შესაძლებელი
სიგანის 100 პროცენტს.

9
00:00:25,789 --> 00:00:29,364
ესაა მიზეზი თუ რატომ არის
ნაცრისფერი ყუთი მთელ სიგანეზე გაშლილი.

10
00:00:29,364 --> 00:00:32,745
შეიძლება მინდოდეს, რომ
მან დაიკავოს 300 პიქსელი.

11
00:00:32,745 --> 00:00:40,150
დავამატებ ახალ თვისებას CSS-ში
width: 300px; (სიგანე 300 პიქსელი)

12
00:00:40,179 --> 00:00:43,000
სიგანე შეიცვალა, მაგრამ ახლა
სხვა რამ გავაკეთოთ.

13
00:00:43,000 --> 00:00:44,967
მოდი, გამოვიყენოთ პროცენტობრივი სიგანე.

14
00:00:44,967 --> 00:00:50,510
და ვთქვათ, რომ div-მა ყოველთვის უნდა
დაიკავოს შესაძლებელი სიგანის 70 %.

15
00:00:50,510 --> 00:00:53,326
ახლა ტექსტი მოთავსებულია ამ
მცირე ყუთში.

16
00:00:53,326 --> 00:00:55,503
და div-ი სიმაღლეში გაიზარდა.

17
00:00:55,503 --> 00:00:59,136
თუ გვუსრს, ასევე შეგვიძლია
სიმაღლის კონტროლიც.

18
00:00:59,136 --> 00:01:01,104
სიმაღლის თვისებით.

19
00:01:01,104 --> 00:01:03,801
height: 180px;
(სიმაღლე 180 პიქსელი)

20
00:01:03,801 --> 00:01:06,812
რაღაც სახალისო მოხდა.

21
00:01:06,812 --> 00:01:09,642
ნაცრისფერი ყუთი შემცირდა 180 პიქსელამდე,

22
00:01:09,642 --> 00:01:14,105
მაგრამ ტექსტი ყუთის გარეთ გადის.

23
00:01:14,105 --> 00:01:15,807
რა მოხდა?

24
00:01:15,807 --> 00:01:20,528
ეს იმ თვისების ბრალია, რომელსაც
'overflow'-ს (გადაღვრას) ვეძახით.

25
00:01:20,528 --> 00:01:23,893
'overflow'-ს ჩვეულებრივი მნიშნველობა,
არის 'visible' (ხილვადი),

26
00:01:23,893 --> 00:01:28,309
რაც ნიშნავს, რომ ელემენტის ზომა იცვლება
მაგრამ შიგთავსი გარეთ გამოდის,

27
00:01:28,309 --> 00:01:30,538
რაც სულელურად გამოიყურება.

28
00:01:30,538 --> 00:01:33,545
სხვა რა თვისებები გვაქვს გადაღვრისთვის?

29
00:01:33,545 --> 00:01:36,979
შეგვიძლია ვცადოთ 'hidden' (დამალვა).

30
00:01:36,984 --> 00:01:40,334
იგი, ჭრის შიგთავსის იმ ნაწილს,
რომელიც ფარგლებს სცდება.

31
00:01:40,358 --> 00:01:42,095
მაგრამ, ჩვენ ეს არ გვჭირდება,

32
00:01:42,095 --> 00:01:46,294
რადგანაც მაშინ მომხმარებელს არ ექნება
მთლიანი ინფორმაციის წაკითხვის საშუალება.

33
00:01:46,294 --> 00:01:49,101
ჩვენ ასევე შეგვიძლია ვცადოთ 'auto',

34
00:01:49,107 --> 00:01:52,828
რომელიც ეუბნება ბრაუზერს, რომ დაამატოს
ჩამოსაცურებელი თუ შიგთავსი იღვრება.

35
00:01:52,828 --> 00:01:57,072
ახლა, შეგვიძლია ჩამოვაცუროთ ყუთის
შიგთავსი და ვნახოთ ტექსტი.

36
00:01:57,072 --> 00:01:59,475
თუ გვინდა, შეგვიძლია უფრო
სპეციფიკური რამ ვქნათ:

37
00:01:59,475 --> 00:02:02,932
შეგვიძლია, მივუთითოთ განსხვავებული
თვისება სხვადასხვა მიმართულებებისთვის.

38
00:02:02,932 --> 00:02:04,177
მაგალითად, თუ მინდა, რომ

39
00:02:04,177 --> 00:02:07,643
გამოვიყენო ჩამოსაცურებელი y მიმართულებით
ანუ ზევით და ქვევით.

40
00:02:07,643 --> 00:02:10,879
უნდა დავწეროთ: overflow-y: auto;

41
00:02:10,879 --> 00:02:14,207
მაგრამ თუ გვინდა დალაგება
x მიმართულებით, შეგვიძლია

42
00:02:14,207 --> 00:02:18,525
დავწეროთ: overflow-x: hidden;

43
00:02:18,525 --> 00:02:21,419
ფრთხილად იყავით, როდესაც იყენებთ
გადაღვრას, რადგანაც

44
00:02:21,419 --> 00:02:24,614
ჩამოსაცურებელმა, შეიძლება გააღიზიანოს
მომხმარებელი.

45
00:02:24,614 --> 00:02:27,215
განსაკუთრებით, ჩამოსაცურებელი
ჩამოსაცურებელში.

46
00:02:27,215 --> 00:02:29,229
ასეთ შემთხვევებს მოერიდეთ.

47
00:02:29,229 --> 00:02:33,974
დავუბრუნდეს სიგრძე-სიგანეს,
ჩვენ შეგვიძლია გამოვიყენოთ

48
00:02:33,974 --> 00:02:37,702
სიგრძე და სიგანე მრავალი სახის
ელემენტისთვის, მაგალითად სურათებისთვის.

49
00:02:37,702 --> 00:02:42,168
ახლა, როდესაც ვიცნობთ CSS-ს შეგვიძლია
გამოვიყენოთ სიგრძე-სიგანის CSS თვისებები

50
00:02:42,168 --> 00:02:44,929
სიგრძე-სიგანის ატრიბუტების მაგივრად.

51
00:02:44,946 --> 00:02:52,542
მოდი, გავზარდოთ კატის სურათი
და დავარქვათ მას "cute-cat",

52
00:02:52,542 --> 00:02:55,415
წავშალოთ ატრიბუტი,

53
00:02:55,415 --> 00:03:00,396
და დავუბრუნდეთ ჩვენს სტილის წესს,
მივუთითოთ

54
00:03:00,396 --> 00:03:03,618
#cute-cat {width: 120px;
}

55
00:03:03,618 --> 00:03:06,328
ატრიბუტების მსგავსად

56
00:03:06,328 --> 00:03:09,027
ჯობია მივუთითოთ მხოლოდ სიგრძე
ან მხოლოდ სიგანე,

57
00:03:09,027 --> 00:03:12,638
მიეცით ბრაუზერს საშუალება, რომ
თვითონ განსაზღვროს მეორე განზომილება.

58
00:03:12,638 --> 00:03:14,799
სხვა შემთხვევაში გაჭყლეტილ კატას მივიღებთ!

59
00:03:14,799 --> 00:03:18,877
საინტერესოდ ჟღერს, მაგრამ მოდი ვცადოთ

60
00:03:18,877 --> 00:03:20,021
height: 40px;
(სიმაღლე - 40 პიქსელი)

61
00:03:20,021 --> 00:03:22,066
ჰაჰა, გაჭყლეტილი კატა - ვაშა!

62
00:03:22,066 --> 00:03:29,023
მოდი, პასუხისმგებლობის მქონე
ვებ დეველოპერი ვიქნები და ამას წავშლი.

63
00:03:29,023 --> 00:03:33,279
რაც უფრო მეტი ცოდნა გაქვს,
მით უფრო მეტი პასუხისმგებლობა გაკისრია.

64
00:03:33,279 --> 00:03:37,500
რადგან შეგიძლია ჩამოსაცურებლების დამატება
და კატების გაჭყლეტვა, არ ნიშნავს რომ

65
00:03:37,500 --> 00:03:39,590
ასე უნდა მოიქცე.

66
00:03:39,590 --> 00:03:42,578
იმიტომ, რომ ძირითადად ვაკეთებთ
ვებ გვერდებს სხვა ადამიანებისთვის.

67
00:03:42,578 --> 00:03:47,688
რაც შენთვის სახალისოა, შეიძლება
სხვისთვის რთულად გამოსაყენებელი იყოს.

68
00:03:47,688 --> 00:03:54,080
მაგრამ თუ გაერთობით Khan Academy-ზე
წინააღმდეგი არ ვარ.