"ქვედა კოლონტიტული", როგორც წესი, არის ვებ – გვერდის განლაგების ქვედა ბოლო. ამ ქვედა კოლონტიტულის პოზიციონირების ყველაზე გავრცელებული სირთულე არის ის, რომ იგი ყოველთვის განთავსდეს ფანჯრის ბოლოში, განურჩევლად გვერდის სისავსისა და ბრაუზერის ტიპისა. პრობლემის გადაჭრა საკმაოდ ბევრი იყო, მას შემდეგ რაც მასიურად გადავიდა ბლოკის განლაგება და ერთ-ერთი მათგანი მოცემულია ქვემოთ.
Ეს აუცილებელია
საბაზისო ცოდნა CSS და HTML
ინსტრუქციები
Ნაბიჯი 1
მოდით, ავიღოთ ყველაზე გავრცელებული გვერდის განლაგების სქემა, როგორც საფუძველი - სამი ბლოკი განთავსებულია ერთმანეთზე მაღლა. ზედა (სათაური) ყოველთვის უნდა იყოს გასწორებული ფანჯრის ზედა საზღვარზე, ქვედა (ქვედა კოლონტიტული) - ქვედა საზღვარზე და მთავარმა (კორპუსმა) ყოველთვის უნდა შეავსოს მათ შორის არსებული მთელი სივრცე. კოდის კოდი უნდა შეიცავდეს XHTML 1.0 გარდამავალი სპეციფიკაციის ბმულს, ხოლო სტილის აღწერა უნდა განთავსდეს გარე CSS ფაილში (Opera 9. XX– ს პრობლემების თავიდან ასაცილებლად). სტრუქტურის HTML აღწერილობა უნდა განთავსდეს ძირითადში გვერდის კორპუსი. ეს, რა თქმა უნდა, დაიწყება ზედა ბლოკიდან, რომლის ნიშანში უნდა განთავსდეს მნიშვნელობის მქონე იდენტიფიკატორის ატრიბუტი, მაგალითად, divHead:
ჰედერის ბლოკი.
მთავარი ბლოკი უნდა შედგებოდეს წყობილი წყობილი ბლოკებისგან. გარე მიეცემა divOut იდენტიფიკატორი, ხოლო შიდა - divContent:
მთავარი შინაარსი.
ქვედა კოლონტიტულზე მითითებულია divFoot:
გვერდის ქვედა კოლონტიტული.
ნაბიჯი 2
გვერდის სრული HTML კოდი ასე უნდა გამოიყურებოდეს:
სამი ბლოკი
@ იმპორტი "style.css";
ეს არის სათაურის ბლოკი.
მთავარი შინაარსი.
ეს არის გვერდის ქვედა კოლონტიტული.
ნაბიჯი 3
სტილის აღწერა ახორციელებს განლაგების შემდეგ მექანიზმს: შუა ბლოკი (divOut) დაყენებულია 100% სიმაღლეზე, ზედა ბლოკს (divHead) ექნება აბსოლუტური პოზიციონირება, ხოლო ქვედა - ფარდობითი. ძირითადი შინაარსის ბლოკში (divContent), ზედა ნაწილში უნდა იყოს თავისუფალი ადგილი, ტოლი სათაურის ბლოკის სიმაღლისა, ისე რომ იგი არ გადაფარავს გვერდის მთავარ შინაარსს. ქვედა ბლოკს (ქვედა კოლონტიტულს) ზემოდან უნდა ჰქონდეს უარყოფითი ზღვარი, ტოლი ამ ბლოკის სიმაღლისა. ეს მას ბრაუზერის ფანჯრის ქვედა საზღვარზე აამაღლებს. ამ მექანიზმის განხორციელება შესაძლებელია css ფაილის გამოყენებით შემდეგი შინაარსით: * {ზღვარი: 0; შევსება: 0}
html, body {სიმაღლე: 100%;} სხეული {
პოზიცია: ნათესავი;
ფერი: # 000;
}
#divOut {
ზღვარი: 0;
მინ-სიმაღლე: 100%;
ფონი: #FFF;
ფერი: # 000;
}
* html #divOut {სიმაღლე: 100%;}
#divHead {
პოზიცია: აბსოლუტური;
მარცხენა: 0;
ზედა: 0;
სიგანე: 100%;
სიმაღლე: 80 პიქსელი;
ფონი: # 2F5000;
გადავსება: დამალული;
ტექსტის გასწორება: ცენტრი;
ფერი: #FFF;
} #divFoot {
პოზიცია: ნათესავი;
გასაგებია: ორივე;
ზღვარი-ზემო: -60 პიქსელი;
სიმაღლე: 60 პიქსელი;
სიგანე: 100%;
ფონის ფერი: # 2F5000;
ტექსტის გასწორება: ცენტრი;
ფერი: #FFF;
}
.divContent {
სიგანე: 100%;
ათწილადი: მარცხენა;
padding-top: 81px;
} HTML კოდში სტილის ფურცლისთვის მითითებული სახელი არის style.css.
