Səhifənin altbilgisini ("altbilgi") pəncərənin alt sərhədinə yapışdırmaq üçün necə etmək olar - bu, yəqin ki, sayt səhifələrinin düzülüşündə ən çox yayılmış problemdir. Əlbətdə həll yolları var və bunlardan bir neçəsi var. Aşağıda, məzmunun miqdarından və brauzer növündən asılı olmayaraq altbilginin səhifənin altına daim basıldığından əmin olmağın bir yolu var.
Vacibdir
CSS və HTML haqqında əsas biliklər
Təlimat
Addım 1
Nümunə olaraq daha tipik bir səhifələmə sxemlərindən birini götürək - çardaq (başlıq), əsas blok və altlıq olacaq. Əlbətdə ki, ehtiyac olarsa, əsas bloka bir neçə sütun qoya bilərsiniz, amma bunu burada etməyəcəyik, yalnız altbilginin yerləşdirilməməsinə diqqət edəcəyik. Saytın HTML kodu spesifikasiyanın elanı ilə başlayacaq:
Etiketlər arasında və səhifə başlığına əlavə olaraq kodlamanın bir göstəricisini yerləşdirəcəyik: Həm də üslubların təsvirini ehtiva edən xarici bir CSS sənədinə bir keçid: @import "styles.css"; doqquzuncu versiyanın Opera brauzerində fəsadların qarşısını almaq üçün üslubların birbaşa səhifənin html-koduna daxil edilməsi. Etiketlər arasında və səhifənin blok quruluşunu yerləşdirin. Birincisi, əlbəttə ki, başlıq blokudur. Bu xüsusi blok üçün üslublar qura bilməsi üçün başlıq identifikatorunu verəcəyik:
Bu başlıq həmişə pəncərənin yuxarı hissəsindədir.
Sonra - səhifənin əsas bloku. Xarici (identifikator - xarici) və daxili (identifikator - xarici örtük) olan iki yuvadan ibarətdir:
Bu əsas hissədir.
Və nəhayət altbilgi:
Bu altlıqdır - həmişə pəncərənin altındadır!
Tam səhifə belə olacaq:
Altbilgiyə necə basmaq olar
@import "styles.css";
Bu başlıq həmişə pəncərənin yuxarı hissəsindədir.
Bu əsas hissədir.
Bu altlıqdır - həmişə pəncərənin altındadır!
Addım 2
İndi üslub cədvəlinin məzmununa keçək. Aşağıdakı sxemi həyata keçirir: əsas səhifə bloku 100% hündürlüyə qoyulacaq, başlıq tamamilə yerləşdiriləcək və altbilgi nisbətən olacaq. Başlığın səhifənin əsas məzmunu ilə üst-üstə düşməsinin qarşısını almaq üçün bu əsas məzmun əsas qutunun içərisindəki əlavə bir qutuya yerləşdirilir və bu əlavə qutu, başlıq qutusunun hündürlüyünə bərabər bir üst haşiyə qoyulur. Və altbiliyə hündürlüyünə bərabər bir mənfi üst haşiyə verilir - bu şəkildə pəncərənin alt kənarından tam hündürlüyə qaldırılacaqdır. CSS sənədinin tam məzmunu: * {margin: 0; dolgu: 0}
html, gövdə {boy: 100%;} gövdə {
rəng: qara;
mövqe: nisbi;
}
#outer {
minimum hündürlük: 100%;
margin: 0;
fon: ağ;
rəng: qara;
} * html #outer {boy: 100%;}
# başlıq {
mövqe: mütləq;
üst: 0;
sol: 0;
genişlik: 100%;
hündürlük: 70px;
arxa plan: # 304a00;
daşma: gizli;
rəng: ağ;
mətn-hizalama: mərkəz;
} #footer {
mövqe: nisbi;
margin-top: -50px;
aydın: hər ikisi;
genişlik: 100%;
hündürlük: 50px;
arxa rəng: # 304a00;
rəng: ağ;
mətn-hizalama: mərkəz;
}
.outerwrap {
üzmək: sol;
genişlik: 100%;
padding-top: 71px;
} Bu fayl səhifənin html-kodunda göstərdiyimiz ad - styles.css ilə qeyd olunmalıdır.
