Return to Video

CSS ელემენტების მდებარეობა

  • 0:00 - 0:04
    მე ვაკეთებ გვერდს ჰუპერისთვის,
    ხან აკადემის ერთ–ერთი ავატარისთვის.
  • 0:05 - 0:10
    უკვე გვაქვს სურათი, რამდენიმე მაგარი ბმული
    და პარაგრაფი.
  • 0:10 - 0:16
    მე ვფიქრობ, რომ უკეთესი იქნება, თუ
    ჰუპერის სურათს პარაგრაფის გვერდით დავდებთ
  • 0:16 - 0:18
    ამიტომ ამოვჭრი მას აქედან
  • 0:18 - 0:20
    და ჩავსვამ აქ.
  • 0:20 - 0:24
    ჰმ. არც ისე კარგად გამოიყურება.
  • 0:24 - 0:26
    ტექსტი სურათის შემდეგ იწყება,
  • 0:26 - 0:29
    მე კი იმედი მქონდა, რომ ის
    სურათის ირგვლივ განთავსდება,
  • 0:29 - 0:31
    როგორც ეს გაზეთებშია ხოლმე.
  • 0:31 - 0:33
    ამისთვის CSS–ის
    ახალი თვისება გვინდა, float
  • 0:33 - 0:37
    მისი მეშვეობით ერთი ელემენტი მეორეში
    ან მეორეს ირგვლივ თავსდება
  • 0:37 - 0:40
    მოკლედ, მშვენივრად გამოგვადგება ამ ტექსტის
    სურათის ირგვლივ განსალაგებლად.
  • 0:40 - 0:44
    გადავიდეთ წესზე pic და დავურთოთ
    float:
  • 0:44 - 0:48
    მნიშვნელობის ჩასაწერად უნდა გადავწყვიტოთ,
  • 0:48 - 0:50
    სურათი მარჯვნივ გვინდა რომ იყოს,
    თუ მარცხნივ.
  • 0:51 - 0:52
    ვცადოთ მარცხენა მხარე.
  • 0:53 - 0:54
    მშვენიერია.
  • 0:55 - 0:57
    სინამდვილეში, არც ისე მშვენიერია
  • 0:57 - 1:00
    იმიტომ რომ ტექსტი ძალიან ახლოსაა
    სურათთან.
  • 1:00 - 1:02
    გახსოვთ, რომელ თვისებას ვიყენებთ
  • 1:02 - 1:04
    ტექსტისა და სურათის განსაცალკავებლად?
  • 1:05 - 1:07
    ყუთის მოდელში ვისწავლეთ:
  • 1:07 - 1:09
    არშია.
  • 1:09 - 1:14
    დავუმათოთ სურათს margin: right
    და margin: bottom
  • 1:14 - 1:16
    რომ ცოტა სივრცე დაიმკვიდროს.
  • 1:16 - 1:22
    აი, ასე სჯობს.
  • 1:22 - 1:26
    float გამოიეყენება არა მხოლოდ სურათებთან.
  • 1:27 - 1:29
    მაგალითად, გვერდითი მენიუ გვინდა
  • 1:29 - 1:31
    მოდით..
    აი, დავუშვათ, ეს ბმულები ავიღოთ.
  • 1:32 - 1:35
    ავიღონ ეს სია და მივანიჭოთ მას float: right
  • 1:35 - 1:38
    ამისთვის ჯერ შევქმნათ წესი #hopper-links
  • 1:38 - 1:41
    და შემდეგ თვისება float: right
  • 1:41 - 1:44
    მარჯვნივ კი განთავსდა, ამგრამ
  • 1:44 - 1:46
    მეტი ადგილი მიაქვს, ვიდრე მეგონა.
  • 1:47 - 1:51
    შევზღუდოთ განი 30 პროცენტით.
  • 1:51 - 1:55
    რომ გვერდის 30 პროცენტზე მეტი არ დაიკავოს
  • 1:55 - 1:59
    და დანარენი 70 პროცენტი
    გვერდის დარჩენილ შიგთავსს დაუთმოს.
  • 1:59 - 2:02
    ზოგადად, ყოველთვის როცა ვათავსებთ div–ს
    უნდა განვსაზღვროთ მისი განი.
  • 2:02 - 2:05
    თორემ div ცდის დაიკავოს მთელი ადგილი
  • 2:05 - 2:07
    და მის ირგვლივ ვერაფერი ვერ განთავსდება.
  • 2:07 - 2:11
    როგორც ჩანს ცოტა margin: left არის საჭირო
  • 2:11 - 2:13
    აი, ასე კარგია.
  • 2:13 - 2:18
    ახლა შეხედეთ ფუტერს, ჰუპერის საკონტაქტო
    ინფორმაციის ქვემოთ
  • 2:18 - 2:21
    რაღაც უცნაურად ედება ზემოდან გვერდით მენიუს
  • 2:21 - 2:24
    და ეს იმიტომ ხდება, რომ wrapping
    პარამეტრი გვაქვს მითითებული
  • 2:24 - 2:26
    არადა, არ გვინდა, რომ ასე ედებოდეს
  • 2:26 - 2:28
    გვინდა, რომ ყოველთვის ყველაფრის
    ქვემოთ იყოს
  • 2:28 - 2:30
    იმიტომ რომ ფუტერია, ბოლოს და ბოლოს
  • 2:30 - 2:32
    იმისთვის, რომ არ ეხვეოდეს გარს,
  • 2:32 - 2:34
    შეგივძლია გამოვიყენოთ თვისება
    clear
  • 2:34 - 2:37
    ჩავწეროთ: clear: both
  • 2:37 - 2:38
    აი, გამოვიდა.
  • 2:38 - 2:40
    შეგვიძლია, გამოვიყენოთ
    clear: left ან clear: right
  • 2:40 - 2:43
    თუ გვინდა, რომ მხოლოდ მარჯვნიდან ან
    მხოლოდ მაცხნიდან
  • 2:43 - 2:44
    გარს მოხვეული ელემენტები მოვხსნათ.
  • 2:45 - 2:48
    მაგრამ თუ გვინდა, რომ არც ერთი ელემენტი
    არ ეხვეოდეს გარს მეორეს,
  • 2:48 - 2:49
    მაშინ ვწერთ clear: both
  • 2:49 - 2:52
    ახლა ეს უკვე ჰგავს ნამდვილ
    ვებ–გვერდს.
  • 2:52 - 2:55
    გვაქვს მთავარი სივრცე, გვერდითი მენიუ,
    ფუტერი.
  • 2:55 - 3:00
    ახლა უყკვე იცი CSS–ის ის თვისებები, რაც
    ყველა ხშირად შეგხვდება ვებ–გვერდებზე
  • 3:00 - 3:05
    შეართე რამდენიმე div განსაზღვრული განით,
    სიმაღლით, განლაგებით, არშიით, მდებარეობით
  • 3:05 - 3:08
    რაც საჭიროა, მოაშორე და აი, გვერდების
    ძირითადი ტიპების შექმნა უკვე შეგიძლია.
Title:
CSS ელემენტების მდებარეობა
Description:
more » « less
Video Language:
English
Duration:
03:09
Nina Nutsubidze edited Georgian subtitles for CSS floating elements
Nina Nutsubidze edited Georgian subtitles for CSS floating elements

Georgian subtitles

Revisions

Our website uses cookies for analysis purposes.