WEBVTT

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

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

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

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

00:00:17.766 --> 00:00:19.991
და ჩავსვამ აქ.

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

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

00:00:26.038 --> 00:00:28.810
მე კი იმედი მქონდა, რომ ის
სურათის ირგვლივ განთავსდება,

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

00:00:30.698 --> 00:00:33.270
ამისთვის CSS–ის 
ახალი თვისება გვინდა, float

00:00:33.270 --> 00:00:36.540
მისი მეშვეობით ერთი ელემენტი მეორეში 
ან მეორეს ირგვლივ თავსდება

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

00:00:40.065 --> 00:00:43.957
გადავიდეთ წესზე pic და დავურთოთ 
float:

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

00:00:48.083 --> 00:00:50.422
სურათი მარჯვნივ გვინდა რომ იყოს, 
თუ მარცხნივ.

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

00:00:52.736 --> 00:00:54.467
მშვენიერია.

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

00:00:57.352 --> 00:01:00.207
იმიტომ რომ ტექსტი ძალიან ახლოსაა
სურათთან.

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

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

00:01:04.763 --> 00:01:07.216
ყუთის მოდელში ვისწავლეთ:

00:01:07.419 --> 00:01:08.607
არშია.

00:01:08.901 --> 00:01:13.665
დავუმათოთ სურათს margin: right
და margin: bottom

00:01:13.665 --> 00:01:15.504
რომ ცოტა სივრცე დაიმკვიდროს.

00:01:16.076 --> 00:01:21.978
აი, ასე სჯობს.

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

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

00:01:29.077 --> 00:01:31.334
მოდით..
აი, დავუშვათ, ეს ბმულები ავიღოთ.

00:01:31.749 --> 00:01:34.850
ავიღონ ეს სია და მივანიჭოთ მას float: right

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

00:01:38.098 --> 00:01:40.751
და შემდეგ თვისება float: right

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

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

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

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

00:01:55.076 --> 00:01:59.263
და დანარენი 70 პროცენტი
გვერდის დარჩენილ შიგთავსს დაუთმოს.

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

00:02:02.115 --> 00:02:04.983
თორემ div ცდის დაიკავოს მთელი ადგილი

00:02:04.983 --> 00:02:06.668
და მის ირგვლივ ვერაფერი ვერ განთავსდება.

00:02:07.113 --> 00:02:10.966
როგორც ჩანს ცოტა margin: left არის საჭირო

00:02:11.413 --> 00:02:12.853
აი, ასე კარგია.

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

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

00:02:21.358 --> 00:02:24.233
და ეს იმიტომ ხდება, რომ wrapping 
პარამეტრი გვაქვს მითითებული

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

00:02:25.931 --> 00:02:28.203
გვინდა, რომ ყოველთვის ყველაფრის 
ქვემოთ იყოს

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

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

00:02:32.249 --> 00:02:34.456
შეგივძლია გამოვიყენოთ თვისება
clear

00:02:34.456 --> 00:02:36.575
ჩავწეროთ: clear: both

00:02:36.733 --> 00:02:37.744
აი, გამოვიდა.

00:02:37.744 --> 00:02:40.226
შეგვიძლია, გამოვიყენოთ 
clear: left ან clear: right

00:02:40.226 --> 00:02:42.766
თუ გვინდა, რომ მხოლოდ მარჯვნიდან ან 
მხოლოდ მაცხნიდან

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

00:02:44.519 --> 00:02:47.660
მაგრამ თუ გვინდა, რომ არც ერთი ელემენტი
არ ეხვეოდეს გარს მეორეს,

00:02:47.660 --> 00:02:49.054
მაშინ ვწერთ clear: both

00:02:49.322 --> 00:02:52.127
ახლა ეს უკვე ჰგავს ნამდვილ 
ვებ–გვერდს.

00:02:52.322 --> 00:02:54.819
გვაქვს მთავარი სივრცე, გვერდითი მენიუ,
ფუტერი.

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

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

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