"Altbilgi" genellikle bir web sayfası düzeninin en alttaki bloğudur. Bu altbilgiyi konumlandırmanın en yaygın zorluğu, sayfanın doluluğuna veya tarayıcı türüne bakılmaksızın her zaman pencerenin altında konumlandırılmasını sağlamaktır. Blok düzenine büyük geçiş zamanından bu yana soruna epeyce çözüm olmuştur ve bunlardan biri aşağıda verilmiştir.
Bu gerekli
Temel CSS ve HTML bilgisi
Talimatlar
Aşama 1
En yaygın sayfa düzeni şemasını temel alalım - üst üste yerleştirilmiş üç blok. Üst (başlık) her zaman pencerenin üst sınırına, alt (altbilgi) - alt kenarlığa hizalanmalı ve ana (gövde) her zaman aralarındaki tüm boşluğu doldurmalıdır. Kaynak kodu, XHTML 1.0 Transitional belirtimine bir bağlantı içermeli ve stillerin açıklamaları harici bir CSS dosyasına yerleştirilmelidir (Opera 9. XX ile ilgili sorunları önlemek için) Yapının HTML açıklaması ana sayfaya yerleştirilmelidir. sayfanın gövdesi. Elbette, bir değere sahip bir tanımlayıcı niteliğinin yerleştirilmesi gereken etiketteki en üst bloktan başlayacaktır, örneğin, divHead:
Başlık bloğu.
Ana blok bir çift iç içe bloktan oluşmalıdır. Dıştakine divOut tanımlayıcısı ve içtekine - divContent verilecektir:
Ana içerik.
Altbilgi divFoot olarak ayarlanmıştır:
Sayfa altbilgisi.
Adım 2
Sayfanın tam HTML kodu şöyle görünmelidir:
Üç blok
@import "style.css";
Bu bir başlık bloğudur.
Ana içerik.
Bu, sayfanın altbilgisidir.
Aşama 3
Stil açıklaması aşağıdaki düzen mekanizmasını uygular: orta blok (divOut) %100 yüksekliğe ayarlanır, üst blok (divHead) mutlak konumlandırmaya sahip olur ve alttaki - göreceli. Ana içerik bloğunda (divContent), sayfanın ana içeriğiyle örtüşmemesi için üstte başlık bloğunun yüksekliğine eşit bir boş alan olmalıdır. Ve alt blok (altbilgi), üstte bu bloğun yüksekliğine eşit negatif bir kenar boşluğuna sahip olmalıdır. Bu, tarayıcı penceresinin alt sınırının üzerine çıkaracaktır. Bu mekanizma, aşağıdaki içeriğe sahip bir css dosyası kullanılarak uygulanabilir: * {margin: 0; dolgu: 0}
html, gövde {yükseklik: %100;} gövde {
pozisyon: göreceli;
renk: # 000;
}
#divOut {
kenar boşluğu: 0;
min-yükseklik: %100;
arka plan: #FFF;
renk: # 000;
}
* html #divOut {yükseklik: %100;}
#divHead {
pozisyon: mutlak;
sol: 0;
üst: 0;
genişlik: %100;
yükseklik: 80 piksel;
arka plan: # 2F5000;
taşma: gizli;
metin hizalama: merkez;
renk: #FFF;
} #divAyak {
pozisyon: göreceli;
ikisini de temizle;
üst kenar boşluğu: -60 piksel;
yükseklik: 60 piksel;
genişlik: %100;
arka plan rengi: # 2F5000;
metin hizalama: merkez;
renk: #FFF;
}
.divContent {
genişlik: %100;
yüzer: sol;
üst dolgu: 81 piksel;
} HTML kodunda stil sayfası için belirttiğiniz ad style.css'dir.
