მე ვაკეთებ გვერდს ჰუპერისთვის, ხან აკადემის ერთ–ერთი ავატარისთვის.
უკვე გვაქვს სურათი, რამდენიმე მაგარი ბმული და პარაგრაფი.
მე ვფიქრობ, რომ უკეთესი იქნება, თუ ჰუპერის სურათს პარაგრაფის გვერდით დავდებთ
ამიტომ ამოვჭრი მას აქედან
და ჩავსვამ აქ.
ჰმ. არც ისე კარგად გამოიყურება.
ტექსტი სურათის შემდეგ იწყება,
მე კი იმედი მქონდა, რომ ის სურათის ირგვლივ განთავსდება,
როგორც ეს გაზეთებშია ხოლმე.
ამისთვის CSS–ის ახალი თვისება გვინდა, float
მისი მეშვეობით ერთი ელემენტი მეორეში ან მეორეს ირგვლივ თავსდება
მოკლედ, მშვენივრად გამოგვადგება ამ ტექსტის სურათის ირგვლივ განსალაგებლად.
გადავიდეთ წესზე pic და დავურთოთ float:
მნიშვნელობის ჩასაწერად უნდა გადავწყვიტოთ,
სურათი მარჯვნივ გვინდა რომ იყოს, თუ მარცხნივ.
ვცადოთ მარცხენა მხარე.
მშვენიერია.
სინამდვილეში, არც ისე მშვენიერია
იმიტომ რომ ტექსტი ძალიან ახლოსაა სურათთან.
გახსოვთ, რომელ თვისებას ვიყენებთ
ტექსტისა და სურათის განსაცალკავებლად?
ყუთის მოდელში ვისწავლეთ:
არშია.
დავუმათოთ სურათს margin: right და margin: bottom
რომ ცოტა სივრცე დაიმკვიდროს.
აი, ასე სჯობს.
float გამოიეყენება არა მხოლოდ სურათებთან.
მაგალითად, გვერდითი მენიუ გვინდა
მოდით.. აი, დავუშვათ, ეს ბმულები ავიღოთ.
ავიღონ ეს სია და მივანიჭოთ მას float: right
ამისთვის ჯერ შევქმნათ წესი #hopper-links
და შემდეგ თვისება float: right
მარჯვნივ კი განთავსდა, ამგრამ
მეტი ადგილი მიაქვს, ვიდრე მეგონა.
შევზღუდოთ განი 30 პროცენტით.
რომ გვერდის 30 პროცენტზე მეტი არ დაიკავოს
და დანარენი 70 პროცენტი გვერდის დარჩენილ შიგთავსს დაუთმოს.
ზოგადად, ყოველთვის როცა ვათავსებთ div–ს უნდა განვსაზღვროთ მისი განი.
თორემ div ცდის დაიკავოს მთელი ადგილი
და მის ირგვლივ ვერაფერი ვერ განთავსდება.
როგორც ჩანს ცოტა margin: left არის საჭირო
აი, ასე კარგია.
ახლა შეხედეთ ფუტერს, ჰუპერის საკონტაქტო ინფორმაციის ქვემოთ
რაღაც უცნაურად ედება ზემოდან გვერდით მენიუს
და ეს იმიტომ ხდება, რომ wrapping პარამეტრი გვაქვს მითითებული
არადა, არ გვინდა, რომ ასე ედებოდეს
გვინდა, რომ ყოველთვის ყველაფრის ქვემოთ იყოს
იმიტომ რომ ფუტერია, ბოლოს და ბოლოს
იმისთვის, რომ არ ეხვეოდეს გარს,
შეგივძლია გამოვიყენოთ თვისება clear
ჩავწეროთ: clear: both
აი, გამოვიდა.
შეგვიძლია, გამოვიყენოთ clear: left ან clear: right
თუ გვინდა, რომ მხოლოდ მარჯვნიდან ან მხოლოდ მაცხნიდან
გარს მოხვეული ელემენტები მოვხსნათ.
მაგრამ თუ გვინდა, რომ არც ერთი ელემენტი არ ეხვეოდეს გარს მეორეს,
მაშინ ვწერთ clear: both
ახლა ეს უკვე ჰგავს ნამდვილ ვებ–გვერდს.
გვაქვს მთავარი სივრცე, გვერდითი მენიუ, ფუტერი.
ახლა უყკვე იცი CSS–ის ის თვისებები, რაც ყველა ხშირად შეგხვდება ვებ–გვერდებზე
შეართე რამდენიმე div განსაზღვრული განით, სიმაღლით, განლაგებით, არშიით, მდებარეობით
რაც საჭიროა, მოაშორე და აი, გვერდების ძირითადი ტიპების შექმნა უკვე შეგიძლია.