Bir səhifə düzülüşünün ən alt üfüqi blokuna tez-tez "altbilgi" deyilir. İçəridə, səhifənin digər bloklarında olduğu kimi, dizayn elementləri yerləşdirilir, lakin digərlərindən fərqli olaraq, bu blokun yerləşdirilməsi ilə tez-tez xüsusi problemlər yaranır. Fərqli brauzerlərin CSS dilinin standartlarını fərqli bir şəkildə başa düşdükləri və altbilginin brauzer pəncərəsinin alt kənarında olması olduqca çətin ola biləcəyi ilə əlaqələndirilir. Aşağıda bu problemin həll yollarından birinin kodu verilmişdir.
Zəruri
CSS və HTML haqqında əsas biliklər
Təlimat
Addım 1
Səhifənin mənbə kodunun ilk sətirində XHTML 1.0 Keçid spesifikasiyasına istinad yerləşdirin:
Addım 2
Səhifə quruluşunun əsas bloklarını sənədin gövdəsinə yerləşdirin (və etiketlər arasında). Əsas məzmunun yerləşdiriləcəyi blok iki yuva qatından ibarət olmalıdır. Məsələn, xaricində OuterDiv, içində isə InnerDiv identifikatoru olsun.
Səhifənin əsas məzmunu burada olacaqdır.
Onların arxasında identifikatoru olan bir altbilgi bloku qoyun, məsələn, FooterDiv:
Səhifənin altbilgisi.
Addım 3
HTML kodunun baş hissəsinə (və etiketlər arasında) CSS stillərinin təsviri ilə xarici bir fayla bir keçid qoyun:
@import "footerStyle.css";
Addım 4
Tam ana səhifə kodunu html uzantısı olan bir fayla yazın. Bu belə görünə bilər:
Basın altbilgi
@import "footerStyle.css";
Səhifənin əsas məzmunu burada olacaqdır.
Səhifənin altbilgisi.
Addım 5
Stil cədvəli faylı yaradın - CSS uzantısı və HTML kodunda göstərdiyiniz adla (footerStyle.css) qeyd olunmalı olan düz mətn faylı. Səhifədə istifadə olunan bloklar üçün aşağıdakı stil təsvirlərini bu fayla yazın:
* {margin: 0; dolgu: 0}
html, gövdə {boy: 100%;}
bədən {
mövqe: nisbi;
rəng: # 222222;
}
#OuterDiv {
margin: 0;
minimum hündürlük: 100%;
arxa plan: #aaaaaa;
rəng: # 222222;
}
* html #OuterDiv {boy: 100%;}
#FooterDiv {
mövqe: nisbi;
aydın: hər ikisi;
margin-top: -60px;
hündürlük: 60 piksel;
genişlik: 100%;
arxa rəng: DarkBlue;
mətn-hizalama: mərkəz;
rəng: #eeeeff;
}
. InnerDiv {
genişlik: 100%;
üzmək: sol;
}
