0:00:00.000,0:00:03.882
div-ებს ხშირად იმიტომ ვიყენებთ, რომ[br]გვერდის ყუთებად დაშლა გვინდა,

0:00:03.882,0:00:07.737
ან ამ ყუთების ზომების შეცვლა,[br]ან მათი გადაადგილება.

0:00:07.737,0:00:11.565
კარგი თვალია საჭირო იმისთვის,[br]რომ გადაწყვიტო სად რა განათავსო გვერდზე,

0:00:11.565,0:00:13.029
ისე რომ კარგად გამოიყურებოდეს.

0:00:13.029,0:00:16.484
ახლა, ჩვენ არ ვიზრუნებთ გვერდის[br]სილამაზეზე.

0:00:16.484,0:00:18.911
უბრალოდ, გაჩვენებთ თუ როგორ უნდა[br]შეცვალოთ რაღაცები.

0:00:18.911,0:00:22.002
მოდი, ზომა შევუცვალოთ[br]"official-info" div-ს.

0:00:22.002,0:00:25.789
ჩვეულებრივ, div-ი იღებს შესაძლებელი[br]სიგანის 100 პროცენტს.

0:00:25.789,0:00:29.364
ესაა მიზეზი თუ რატომ არის[br]ნაცრისფერი ყუთი მთელ სიგანეზე გაშლილი.

0:00:29.364,0:00:32.745
შეიძლება მინდოდეს, რომ[br]მან დაიკავოს 300 პიქსელი.

0:00:32.745,0:00:40.150
დავამატებ ახალ თვისებას CSS-ში[br]width: 300px; (სიგანე 300 პიქსელი)

0:00:40.179,0:00:43.000
სიგანე შეიცვალა, მაგრამ ახლა[br]სხვა რამ გავაკეთოთ.

0:00:43.000,0:00:44.967
მოდი, გამოვიყენოთ პროცენტობრივი სიგანე.

0:00:44.967,0:00:50.510
და ვთქვათ, რომ div-მა ყოველთვის უნდა[br]დაიკავოს შესაძლებელი სიგანის 70 %.

0:00:50.510,0:00:53.326
ახლა ტექსტი მოთავსებულია ამ[br]მცირე ყუთში.

0:00:53.326,0:00:55.503
და div-ი სიმაღლეში გაიზარდა.

0:00:55.503,0:00:59.136
თუ გვუსრს, ასევე შეგვიძლია[br]სიმაღლის კონტროლიც.

0:00:59.136,0:01:01.104
სიმაღლის თვისებით.

0:01:01.104,0:01:03.801
height: 180px;[br](სიმაღლე 180 პიქსელი)

0:01:03.801,0:01:06.812
რაღაც სახალისო მოხდა.

0:01:06.812,0:01:09.642
ნაცრისფერი ყუთი შემცირდა 180 პიქსელამდე,

0:01:09.642,0:01:14.105
მაგრამ ტექსტი ყუთის გარეთ გადის.

0:01:14.105,0:01:15.807
რა მოხდა?

0:01:15.807,0:01:20.528
ეს იმ თვისების ბრალია, რომელსაც[br]'overflow'-ს (გადაღვრას) ვეძახით.

0:01:20.528,0:01:23.893
'overflow'-ს ჩვეულებრივი მნიშნველობა,[br]არის 'visible' (ხილვადი),

0:01:23.893,0:01:28.309
რაც ნიშნავს, რომ ელემენტის ზომა იცვლება[br]მაგრამ შიგთავსი გარეთ გამოდის,

0:01:28.309,0:01:30.538
რაც სულელურად გამოიყურება.

0:01:30.538,0:01:33.545
სხვა რა თვისებები გვაქვს გადაღვრისთვის?

0:01:33.545,0:01:36.979
შეგვიძლია ვცადოთ 'hidden' (დამალვა).

0:01:36.984,0:01:40.334
იგი, ჭრის შიგთავსის იმ ნაწილს,[br]რომელიც ფარგლებს სცდება.

0:01:40.358,0:01:42.095
მაგრამ, ჩვენ ეს არ გვჭირდება,

0:01:42.095,0:01:46.294
რადგანაც მაშინ მომხმარებელს არ ექნება[br]მთლიანი ინფორმაციის წაკითხვის საშუალება.

0:01:46.294,0:01:49.101
ჩვენ ასევე შეგვიძლია ვცადოთ 'auto',

0:01:49.107,0:01:52.828
რომელიც ეუბნება ბრაუზერს, რომ დაამატოს[br]ჩამოსაცურებელი თუ შიგთავსი იღვრება.

0:01:52.828,0:01:57.072
ახლა, შეგვიძლია ჩამოვაცუროთ ყუთის[br]შიგთავსი და ვნახოთ ტექსტი.

0:01:57.072,0:01:59.475
თუ გვინდა, შეგვიძლია უფრო[br]სპეციფიკური რამ ვქნათ:

0:01:59.475,0:02:02.932
შეგვიძლია, მივუთითოთ განსხვავებული[br]თვისება სხვადასხვა მიმართულებებისთვის.

0:02:02.932,0:02:04.177
მაგალითად, თუ მინდა, რომ

0:02:04.177,0:02:07.643
გამოვიყენო ჩამოსაცურებელი y მიმართულებით[br]ანუ ზევით და ქვევით.

0:02:07.643,0:02:10.879
უნდა დავწეროთ: overflow-y: auto;

0:02:10.879,0:02:14.207
მაგრამ თუ გვინდა დალაგება[br]x მიმართულებით, შეგვიძლია

0:02:14.207,0:02:18.525
დავწეროთ: overflow-x: hidden;

0:02:18.525,0:02:21.419
ფრთხილად იყავით, როდესაც იყენებთ[br]გადაღვრას, რადგანაც

0:02:21.419,0:02:24.614
ჩამოსაცურებელმა, შეიძლება გააღიზიანოს[br]მომხმარებელი.

0:02:24.614,0:02:27.215
განსაკუთრებით, ჩამოსაცურებელი[br]ჩამოსაცურებელში.

0:02:27.215,0:02:29.229
ასეთ შემთხვევებს მოერიდეთ.

0:02:29.229,0:02:33.974
დავუბრუნდეს სიგრძე-სიგანეს,[br]ჩვენ შეგვიძლია გამოვიყენოთ

0:02:33.974,0:02:37.702
სიგრძე და სიგანე მრავალი სახის[br]ელემენტისთვის, მაგალითად სურათებისთვის.

0:02:37.702,0:02:42.168
ახლა, როდესაც ვიცნობთ CSS-ს შეგვიძლია[br]გამოვიყენოთ სიგრძე-სიგანის CSS თვისებები

0:02:42.168,0:02:44.929
სიგრძე-სიგანის ატრიბუტების მაგივრად.

0:02:44.946,0:02:52.542
მოდი, გავზარდოთ კატის სურათი[br]და დავარქვათ მას "cute-cat",

0:02:52.542,0:02:55.415
წავშალოთ ატრიბუტი,

0:02:55.415,0:03:00.396
და დავუბრუნდეთ ჩვენს სტილის წესს,[br]მივუთითოთ

0:03:00.396,0:03:03.618
#cute-cat {width: 120px;[br]}

0:03:03.618,0:03:06.328
ატრიბუტების მსგავსად

0:03:06.328,0:03:09.027
ჯობია მივუთითოთ მხოლოდ სიგრძე[br]ან მხოლოდ სიგანე,

0:03:09.027,0:03:12.638
მიეცით ბრაუზერს საშუალება, რომ[br]თვითონ განსაზღვროს მეორე განზომილება.

0:03:12.638,0:03:14.799
სხვა შემთხვევაში გაჭყლეტილ კატას მივიღებთ!

0:03:14.799,0:03:18.877
საინტერესოდ ჟღერს, მაგრამ მოდი ვცადოთ

0:03:18.877,0:03:20.021
height: 40px;[br](სიმაღლე - 40 პიქსელი)

0:03:20.021,0:03:22.066
ჰაჰა, გაჭყლეტილი კატა - ვაშა!

0:03:22.066,0:03:29.023
მოდი, პასუხისმგებლობის მქონე[br]ვებ დეველოპერი ვიქნები და ამას წავშლი.

0:03:29.023,0:03:33.279
რაც უფრო მეტი ცოდნა გაქვს,[br]მით უფრო მეტი პასუხისმგებლობა გაკისრია.

0:03:33.279,0:03:37.500
რადგან შეგიძლია ჩამოსაცურებლების დამატება[br]და კატების გაჭყლეტვა, არ ნიშნავს რომ

0:03:37.500,0:03:39.590
ასე უნდა მოიქცე.

0:03:39.590,0:03:42.578
იმიტომ, რომ ძირითადად ვაკეთებთ[br]ვებ გვერდებს სხვა ადამიანებისთვის.

0:03:42.578,0:03:47.688
რაც შენთვის სახალისოა, შეიძლება[br]სხვისთვის რთულად გამოსაყენებელი იყოს.

0:03:47.688,0:03:54.080
მაგრამ თუ გაერთობით Khan Academy-ზე[br]წინააღმდეგი არ ვარ.