გვერდის განლაგების ქვედა ყველაზე ჰორიზონტალური ბლოკი ხშირად მოიხსენიება როგორც "ქვედა კოლონტიტული". მასში, ისევე როგორც გვერდის სხვა ბლოკებში, განთავსებულია დიზაინის ელემენტები, მაგრამ სხვებისგან განსხვავებით, კონკრეტული პრობლემები ხშირად წარმოიქმნება ამ კონკრეტული ბლოკის პოზიციონირებისას. ისინი დაკავშირებულია იმ ფაქტთან, რომ სხვადასხვა ბრაუზერს განსხვავებულად ესმით CSS ენის სტანდარტები და შეიძლება საკმაოდ რთული აღმოჩნდეს ქვედა კოლონტიტულის ბრაუზერის ფანჯრის ქვედა კიდეზე. ქვემოთ მოცემულია კოდი, ამ პრობლემის გადაჭრის ერთ-ერთი გადაწყვეტისთვის.
აუცილებელია
საბაზისო ცოდნა CSS და HTML
ინსტრუქციები
Ნაბიჯი 1
გვერდის კოდის პირველივე სტრიქონში მიუთითეთ XHTML 1.0 გარდამავალი სპეციფიკაცია:
ნაბიჯი 2
მოათავსეთ გვერდის სტრუქტურის ძირითადი ბლოკები დოკუმენტის კორპუსის შიგნით (და ტეგებს შორის). ბლოკი, რომელშიც განთავსდება ძირითადი შინაარსი, უნდა შედგებოდეს ორი წყობილი შრისგან. მაგალითად, მიეცით გარედან იდენტიფიკატორი OuterDiv და შიდა - InnerDiv:
სწორედ აქ იქნება გვერდის მთავარი შინაარსი.
მათ უკან მოათავსეთ ქვედა კოლოფის იდენტიფიკატორი, მაგალითად, FooterDiv:
გვერდის ქვედა კოლონტიტული.
ნაბიჯი 3
მოათავსეთ HTML კოდის სათავე ნაწილში (და ტეგებს შორის) გარე ფაილის ბმული css სტილის აღწერით:
@import "footerStyle.css";
ნაბიჯი 4
შეინახეთ მთავარი გვერდის კოდი სრული ფაილი html გაფართოებით. შეიძლება ასე გამოიყურებოდეს:
დაპრესილი ქვედა კოლონტიტული
@import "footerStyle.css";
სწორედ აქ იქნება გვერდის მთავარი შინაარსი.
გვერდის ქვედა კოლონტიტული.
ნაბიჯი 5
შექმენით სტილის ფურცლის ფაილი - ჩვეულებრივი ტექსტური ფაილი, რომელიც უნდა იყოს შენახული css გაფართოებით და თქვენს მიერ HTML კოდში მითითებული სახელით (footerStyle.css). დაწერეთ ამ ფაილზე შემდეგი სტილის აღწერილობები გვერდზე გამოყენებული ბლოკებისათვის:
* {ზღვარი: 0; შევსება: 0}
html, body {სიმაღლე: 100%;}
სხეული {
პოზიცია: ნათესავი;
ფერი: # 222222;
}
#OuterDiv {
ზღვარი: 0;
მინ-სიმაღლე: 100%;
ფონი: # ააააა;
ფერი: # 222222;
}
* html #OuterDiv {სიმაღლე: 100%;}
#FooterDiv {
პოზიცია: ნათესავი;
გასაგებია: ორივე;
ზღვარი-ზემო: -60 პიქსელი;
სიმაღლე: 60 პიქსელი;
სიგანე: 100%;
ფონის ფერი: DarkBlue;
ტექსტის გასწორება: ცენტრი;
ფერი: #eeeeff;
}
. InnerDiv {
სიგანე: 100%;
ათწილადი: მარცხენა;
}
