Როგორ გამოვიყენოთ CSS პოზიციონირება შექმნა Layouts გარეშე მაგიდები

Tableless შაბლონები გახსნა ახალი დიზაინის საზღვრები

არსებობს ბევრი მიზეზი არ გამოიყენოს მაგიდები განლაგებას . ერთ-ერთი ყველაზე ხშირი მიზეზის გამო, ადამიანები განაგრძობენ მათ გამოყენებას იმის გამო, რომ რთულია CSS- ის განლაგება. მიუხედავად იმისა, რომ CSS სკრიფტინგის არ იწვევს სასწავლო მრუდი, როდესაც გესმით, თუ როგორ უნდა გავაკეთოთ CSS განლაგებას, თქვენ შეიძლება გაგიკვირდებათ, რა ადვილი შეიძლება იყოს. და კიდევ ერთხელ თქვენ ისწავლით მეორე ყველაზე გავრცელებულ მიზეზს ადამიანებს, რომლებიც არ იყენებენ CSS- ს - "სწრაფად დაწერეთ მაგიდები." უფრო სწრაფია, რადგან იცით მაგიდები, მაგრამ კიდევ ისწავლით CSS- ს ამასთან.

ბროუზერის მხარდაჭერა CSS პოზიციონირება

CSS პოზიცია კარგად არის მხარდაჭერილი ყველა თანამედროვე ბრაუზერში . თუ თქვენ აშენებთ საიტზე Netscape 4 ან Internet Explorer 4, თქვენი მკითხველი არ უნდა ჰქონდეს პრობლემები თქვენი CSS- პოზიციონირებული ვებ გვერდები.

როგორ გამოიყურებოდე გვერდი

მაგიდის გამოყენებით საიტის აშენებისას, თქვენ უნდა იფიქროთ ცხრილის ფორმატში. სხვა სიტყვებით, თქვენ ფიქრობთ უჯრედების, რიგების და სვეტების თვალსაზრისით. თქვენი ვებ-გვერდები ასახავს ამ მიდგომას. როდესაც თქვენ გადატანა CSS პოზიციონირების დიზაინი, თქვენ დაიწყება ფიქრი თქვენი გვერდები თვალსაზრისით შინაარსი, რადგან შინაარსი შეიძლება განთავსდეს სადმე გსურთ განლაგებას თუნდაც ფენიანი ზე სხვა შინაარსი.

სხვადასხვა ვებსაიტი სხვადასხვა სტრუქტურებს აქვს. ეფექტიანი გვერდის შესაქმნელად, შეაფასეთ ნებისმიერი მოცემულ გვერდის სტრუქტურა, სანამ მას დაამატებთ მას. მაგალითად გვერდი შეიძლება შეიცავდეს ხუთი განსხვავებულ მონაკვეთს:

1. ჰედერი . მთავარი ბანერი რეკლამა, საიტის სახელი, სანავიგაციო ბმულები, სტატიის სათაური და ასევე რამდენიმე სხვა რამ.
2. მარჯვენა სვეტი . ეს არის გვერდის მარჯვენა მხარე ძიების ყუთი, რეკლამები, ვიდეო ყუთები და სავაჭრო ობიექტები.
3. შინაარსი . სტატიის, ბლოგის პოსტის ან კალათაში განთავსებული ტექსტი - ხორცი და კარტოფილი.
4. Inline განცხადებები . რეკლამები შინაარსში შედის.
5. ფუტკარი . ქვედა ნავიგაცია, ავტორის ინფორმაცია, საავტორო უფლებების ინფორმაცია, ქვედა ბანერი რეკლამები და დაკავშირებული ბმულები.

იმის მაგივრად, რომ ამ ხუთი ელემენტის მაგიდასთან აყვანა, გამოიყენოთ HTML5 სექციის ელემენტები, რათა განსაზღვროს შინაარსის სხვადასხვა ნაწილი და შემდეგ გამოიყენოთ CSS პოზიცია, რათა განათავსოთ შინაარსის ელემენტები გვერდზე.

იდენტიფიცირება თქვენი შინაარსის სექციები

მას შემდეგ, რაც თქვენ განისაზღვრა სხვადასხვა შინაარსის ტერიტორიები თქვენი საიტი, თქვენ უნდა ჩაწეროთ ისინი თქვენს HTML. მიუხედავად იმისა, რომ თქვენ შეგიძლიათ, ზოგადად, განათავსოთ თქვენი სექციები ნებისმიერი მიზნით, ეს არის კარგი იდეა, რომ განათავსოთ ყველაზე მნიშვნელოვანი ნაწილი თქვენი გვერდი პირველი. ეს მიდგომა დაეხმარება საძიებო-ოპტიმიზაციას, ასევე.

განლაგების დემონსტრირებისთვის, სამი სვეტის გვერდია, მაგრამ არ არის სათაურის ან ქვედა კოლონტიტული. თქვენ შეგიძლიათ გამოიყენოთ პოზიცია ნებისმიერი ტიპის განლაგების შესაქმნელად.

სამი სვეტის განლაგებისთვის განისაზღვრა სამი სექცია: მარცხენა სვეტი, მარჯვენა სვეტი და შინაარსი.

ეს სექციები მყისიერად იქცევა ARTICLE- ის ელემენტის შინაარსისა და ორი სვეტისთვის ორი სექტორის ელემენტის გამოყენებით. ყველაფერს ექნება ატრიბუტი, რომელიც მას იდენტიფიცირებს. Id- ის ატრიბუტის გამოყენებისას თქვენ უნდა მიუთითოთ უნიკალური სახელი ყოველი id- ისთვის.

კონტენტის პოზიციონირება

გამოყენებით CSS, განსაზღვრავს პოზიცია თქვენი ID'd ელემენტები. შეინახეთ პოზიციის ინფორმაცია სტილი ზარის მსგავსად:

#

}

ამ ელემენტების შინაარსი მიიღებს მაქსიმალურ სივრცეს, როგორც მას შეუძლია, კერძოდ, მიმდინარე ადგილმდებარეობის ან გვერდითი სიის 100 პროცენტი. გავლენა იქონიოს განყოფილების ადგილმდებარეობის გარეშე, რომელიც აიძულებს მას ფიქსირებული სიგანე, შეცვალოს padding ან ზღვარი თვისებები.

ამ განლაგებისათვის, დააყენეთ ორი სვეტი ფიქსირებული სიგანე, შემდეგ კი მათი პოზიცია აბსოლუტურია, რათა მათ არ შეეხონ იქ, სადაც ისინი HTML- ში გვხვდება.

# მარცხენა სვეტი {
პოზიცია: აბსოლუტური;
მარცხნივ: 0;
სიგანე: 150px;
ზღვარი მარცხნივ: 10px;
ზღვარი ზედა: 20px;
ფერი: # 000000;
padding: 3px;
}
# მარჯვენა სვეტი {
პოზიცია: აბსოლუტური;
მარცხნივ: 80%;
დაბრუნება: 20px;
სიგანე: 140px;
padding-left: 10px;
z- ინდექსი: 3;
ფერი: # 000000;
padding: 3px;
}

შემდეგ შინაარსი ფართობი, მითითებული ზღვარი მარჯვენა და მარცხენა ისე, რომ შინაარსი არ გადახურვა ორი გარეთ სვეტები.

#
დაბრუნება: 0px;
ზღვარი: 0px 25% 0 165px;
padding: 3px;
ფერი: # 000000;
}

განსაზღვრა თქვენი გვერდი CSS- ის ნაცვლად HTML ცხრილისთვის საჭიროა ცოტა მეტი ტექნიკური უნარი, მაგრამ გადახდა მოჰყვება უფრო მოქნილ და საპასუხო დიზაინებს და უფრო მარტივია თქვენი შემდგომი სტრუქტურული კორექტირებისთვის.