Sahifa maketining eng pastki gorizontal bloki ko'pincha "altbilgi" deb nomlanadi. Unda, sahifaning boshqa bloklarida bo'lgani kabi, dizayn elementlari ham joylashtirilgan, ammo boshqalardan farqli o'laroq, ko'pincha ushbu maxsus blokning joylashuvi bilan bog'liq muammolar yuzaga keladi. Ular turli xil brauzerlarning CSS tilining standartlarini turlicha tushunishlari va altbilgini brauzer oynasining pastki chetida bo'lishlari juda qiyin bo'lishi bilan bog'liq. Quyida ushbu muammoni hal qilish usullaridan biri uchun kod mavjud.
Kerakli
CSS va HTML bo'yicha asosiy bilimlar
Ko'rsatmalar
1-qadam
Sahifaning dastlabki kodidagi birinchi satrda XHTML 1.0 Transitions spetsifikatsiyasiga havolani joylashtiring:
2-qadam
Sahifa tuzilishining asosiy bloklarini hujjat tanasi ichiga joylashtiring (va teglar orasida). Asosiy tarkib joylashtiriladigan blok ikkita ichki qatlamdan iborat bo'lishi kerak. Masalan, tashqi tomoni OuterDiv, ichki qismi esa InnerDiv identifikatoriga ega bo'lsin:
Bu erda sahifaning asosiy mazmuni bo'ladi.
Ularning orqasida identifikator bilan altbilgi blokini joylashtiring, masalan, FooterDiv:
Sahifaning altbilgisi.
3-qadam
HTML kodining bosh qismiga (va teglar orasida) CSS uslublari tavsiflangan tashqi faylga havolani joylashtiring:
@import "footerStyle.css";
4-qadam
To'liq asosiy sahifa kodini html kengaytmasi bo'lgan faylga saqlang. Bu shunday ko'rinishi mumkin:
Bosilgan altbilgi
@import "footerStyle.css";
Bu erda sahifaning asosiy mazmuni bo'ladi.
Sahifaning altbilgisi.
5-qadam
Uslublar varag'i faylini yarating - bu oddiy matnli fayl bo'lib, uni CSS kengaytmasi va HTML kodida siz ko'rsatgan ism (footerStyle.css) bilan saqlash kerak. Ushbu faylga sahifada ishlatiladigan bloklar uchun quyidagi uslubiy tavsiflarni yozing:
* {margin: 0; to'ldirish: 0}
HTML, tanasi {balandligi: 100%;}
tanasi {
pozitsiya: nisbiy;
rang: # 222222;
}
#OuterDiv {
margin: 0;
minimal balandlik: 100%;
fon: #aaaaaa;
rang: # 222222;
}
* html #OuterDiv {balandligi: 100%;}
#FooterDiv {
pozitsiya: nisbiy;
aniq: ikkalasi ham;
margin-top: -60px;
balandligi: 60 piksel;
kengligi: 100%;
orqa rang: DarkBlue;
matn bilan tekislash: markaz;
rang: #eeeeff;
}
. InnerDiv {
kengligi: 100%;
suzuvchi: chap;
}
