Bir sayfa düzeninin en alttaki yatay bloğuna genellikle "altbilgi" denir. İçinde, sayfanın diğer bloklarında olduğu gibi, tasarım öğeleri yerleştirilir, ancak diğerlerinden farklı olarak, genellikle bu belirli bloğun konumlandırılmasıyla ilgili belirli sorunlar ortaya çıkar. Farklı tarayıcıların CSS dilinin standartlarını farklı anlamalarıyla bağlantılıdırlar ve altbilginin tarayıcı penceresinin alt kenarında olmasını sağlamak oldukça zor olabilir. Aşağıda bu sorunun çözümlerinden birinin kodu bulunmaktadır.
Gerekli
Temel CSS ve HTML bilgisi
Talimatlar
Aşama 1
Sayfanın kaynak kodunun ilk satırına XHTML 1.0 Transitional belirtimine bir referans yerleştirin:
Adım 2
Sayfa yapısının ana bloklarını belgenin gövdesinin içine (ve etiketleri arasına) yerleştirin. Ana içeriğin yerleştirileceği blok, iç içe iki katmandan oluşmalıdır. Örneğin, dıştakinin OuterDiv ve içtekinin - InnerDiv tanımlayıcısına sahip olmasına izin verin:
Burası sayfanın ana içeriğinin olacağı yerdir.
Arkalarına, örneğin FooterDiv gibi bir tanımlayıcıya sahip bir altbilgi bloğu yerleştirin:
Sayfanın altbilgisi.
Aşama 3
HTML kodunun baş kısmına (ve etiketleri arasına) css stillerinin açıklamasını içeren harici bir dosyanın bağlantısını yerleştirin:
@import "footerStyle.css";
4. Adım
Tam ana sayfa kodunu html uzantılı bir dosyaya kaydedin. Şöyle görünebilir:
Basılmış altbilgi
@import "footerStyle.css";
Burası sayfanın ana içeriğinin olacağı yerdir.
Sayfanın altbilgisi.
Adım 5
Bir stil sayfası dosyası oluşturun - CSS uzantısı ve HTML kodunda belirttiğiniz adla (footerStyle.css) kaydedilmesi gereken bir düz metin dosyası. Sayfada kullanılan bloklar için aşağıdaki stil açıklamalarını bu dosyaya yazın:
* {kenar boşluğu: 0; dolgu: 0}
html, gövde {yükseklik: %100;}
vücut {
pozisyon: göreceli;
renk: # 222222;
}
#OuterDiv {
kenar boşluğu: 0;
min-yükseklik: %100;
arka plan: #aaaaaa;
renk: # 222222;
}
* html #OuterDiv {yükseklik: %100;}
#FooterDiv {
pozisyon: göreceli;
ikisini de temizle;
üst kenar boşluğu: -60 piksel;
yükseklik: 60 piksel;
genişlik: %100;
arka plan rengi: DarkBlue;
metin hizalama: merkez;
renk: #eeeeff;
}
. InnerDiv {
genişlik: %100;
yüzer: sol;
}
