WEBVTT

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

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

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

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

00:00:13.029 --> 00:00:16.484
ახლა, ჩვენ არ ვიზრუნებთ გვერდის
სილამაზეზე.

00:00:16.484 --> 00:00:18.911
უბრალოდ, გაჩვენებთ თუ როგორ უნდა
შეცვალოთ რაღაცები.

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

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

00:00:25.789 --> 00:00:29.364
ესაა მიზეზი თუ რატომ არის
ნაცრისფერი ყუთი მთელ სიგანეზე გაშლილი.

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

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

00:00:40.179 --> 00:00:43.000
სიგანე შეიცვალა, მაგრამ ახლა
სხვა რამ გავაკეთოთ.

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

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

00:00:50.510 --> 00:00:53.326
ახლა ტექსტი მოთავსებულია ამ
მცირე ყუთში.

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

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

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

00:01:01.104 --> 00:01:03.801
height: 180px;
(სიმაღლე 180 პიქსელი)

00:01:03.801 --> 00:01:06.812
რაღაც სახალისო მოხდა.

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

00:01:09.642 --> 00:01:14.105
მაგრამ ტექსტი ყუთის გარეთ გადის.

00:01:14.105 --> 00:01:15.807
რა მოხდა?

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

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

00:01:23.893 --> 00:01:28.309
რაც ნიშნავს, რომ ელემენტის ზომა იცვლება
მაგრამ შიგთავსი გარეთ გამოდის,

00:01:28.309 --> 00:01:30.538
რაც სულელურად გამოიყურება.

00:01:30.538 --> 00:01:33.545
სხვა რა თვისებები გვაქვს გადაღვრისთვის?

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

00:01:36.984 --> 00:01:40.334
იგი, ჭრის შიგთავსის იმ ნაწილს,
რომელიც ფარგლებს სცდება.

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

00:01:42.095 --> 00:01:46.294
რადგანაც მაშინ მომხმარებელს არ ექნება
მთლიანი ინფორმაციის წაკითხვის საშუალება.

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

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

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

00:01:57.072 --> 00:01:59.475
თუ გვინდა, შეგვიძლია უფრო
სპეციფიკური რამ ვქნათ:

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

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

00:02:04.177 --> 00:02:07.643
გამოვიყენო ჩამოსაცურებელი y მიმართულებით
ანუ ზევით და ქვევით.

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

00:02:10.879 --> 00:02:14.207
მაგრამ თუ გვინდა დალაგება
x მიმართულებით, შეგვიძლია

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

00:02:18.525 --> 00:02:21.419
ფრთხილად იყავით, როდესაც იყენებთ
გადაღვრას, რადგანაც

00:02:21.419 --> 00:02:24.614
ჩამოსაცურებელმა, შეიძლება გააღიზიანოს
მომხმარებელი.

00:02:24.614 --> 00:02:27.215
განსაკუთრებით, ჩამოსაცურებელი
ჩამოსაცურებელში.

00:02:27.215 --> 00:02:29.229
ასეთ შემთხვევებს მოერიდეთ.

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

00:02:33.974 --> 00:02:37.702
სიგრძე და სიგანე მრავალი სახის
ელემენტისთვის, მაგალითად სურათებისთვის.

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

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

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

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

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

00:03:00.396 --> 00:03:03.618
#cute-cat {width: 120px;
}

00:03:03.618 --> 00:03:06.328
ატრიბუტების მსგავსად

00:03:06.328 --> 00:03:09.027
ჯობია მივუთითოთ მხოლოდ სიგრძე
ან მხოლოდ სიგანე,

00:03:09.027 --> 00:03:12.638
მიეცით ბრაუზერს საშუალება, რომ
თვითონ განსაზღვროს მეორე განზომილება.

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

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

00:03:18.877 --> 00:03:20.021
height: 40px;
(სიმაღლე - 40 პიქსელი)

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

00:03:22.066 --> 00:03:29.023
მოდი, პასუხისმგებლობის მქონე
ვებ დეველოპერი ვიქნები და ამას წავშლი.

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

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

00:03:37.500 --> 00:03:39.590
ასე უნდა მოიქცე.

00:03:39.590 --> 00:03:42.578
იმიტომ, რომ ძირითადად ვაკეთებთ
ვებ გვერდებს სხვა ადამიანებისთვის.

00:03:42.578 --> 00:03:47.688
რაც შენთვის სახალისოა, შეიძლება
სხვისთვის რთულად გამოსაყენებელი იყოს.

00:03:47.688 --> 00:03:54.080
მაგრამ თუ გაერთობით Khan Academy-ზე
წინააღმდეგი არ ვარ.