Sayfanın alt bilgi kısmı ("alt bilgi") nasıl pencerenin alt kenarına yapıştırılır - bu muhtemelen site sayfalarının düzeninde en yaygın sorundur. Elbette çözümler var ve bunlardan birkaçı var. Aşağıda, içerik miktarından ve tarayıcı türünden bağımsız olarak altbilginin her zaman sayfanın altına basıldığından emin olmanın bir yolu verilmiştir.
Bu gerekli
Temel CSS ve HTML bilgisi
Talimatlar
Aşama 1
Örnek olarak daha tipik sayfalandırma şemalarından birini ele alalım - bir çatı katı (başlık), ana blok ve altbilgiye sahip olacaktır. Tabii ki gerekirse ana bloğa birkaç sütun koyabilirsiniz, ancak bunu burada yapmayacağız, sadece altbilgiyi konumlandırmamaya odaklanacağız. Sayfanın HTML kodu, şartnamenin bildirilmesiyle başlayacaktır:
Etiketlerin arasına ve sayfa başlığına ek olarak, kodlamanın bir göstergesini yerleştireceğiz: Ayrıca stillerin açıklamasını içeren harici bir CSS dosyasına bir bağlantı: @import "styles.css"; Dokuzuncu sürüm Opera tarayıcısı ile komplikasyonları önlemek için doğrudan sayfanın html koduna stillerin açıklamasını etiketler ve sayfanın blok yapısını yerleştirin. Birincisi, elbette, başlık bloğu. Bu blok için stilleri ayarlayabilmesi için ona başlık tanımlayıcısını vereceğiz:
Bu başlık her zaman pencerenin en üstündedir.
Sonra - sayfanın ana bloğu. İki iç içe olandan oluşacaktır - dış (tanımlayıcı - dış) ve iç (tanımlayıcı - dış kaplama):
Bu ana kısımdır.
Ve son olarak, altbilgi:
Altbilgi - her zaman pencerenin altında!
Tam sayfa şöyle görünecek:
Altbilgiye nasıl basılır
@import "styles.css";
Bu başlık her zaman pencerenin en üstündedir.
Bu ana kısımdır.
Altbilgi - her zaman pencerenin altında!
Adım 2
Şimdi stil sayfasının içeriğine geçelim. Aşağıdaki şemayı uygular: ana sayfa bloğu %100 yüksekliğe ayarlanacak, başlık kesinlikle konumlandırılacak ve alt bilgi göreceli olacaktır. Başlığın sayfanın ana içeriğiyle örtüşmemesi için bu ana içerik, ana kutu içinde ek bir kutuya yerleştirilir ve bu ek kutu, başlık kutusunun yüksekliğine eşit bir üst kenar boşluğuna ayarlanır. Ve altbilgiye yüksekliğine eşit bir negatif üst kenar boşluğu verilir - bu şekilde pencerenin alt kenarının üzerine tam yüksekliğine yükseltilir. css dosyasının tam içeriği: * {margin: 0; dolgu: 0}
html, gövde {yükseklik: %100;} gövde {
siyah renk;
pozisyon: göreceli;
}
#dış {
min-yükseklik: %100;
kenar boşluğu: 0;
arka plan: beyaz;
siyah renk;
} * html #dış {yükseklik: %100;}
#başlık {
pozisyon: mutlak;
üst: 0;
sol: 0;
genişlik: %100;
yükseklik: 70 piksel;
arka plan: # 304a00;
taşma: gizli;
Beyaz renk;
metin hizalama: merkez;
} #altbilgi {
pozisyon: göreceli;
üst kenar boşluğu: -50 piksel;
ikisini de temizle;
genişlik: %100;
yükseklik: 50 piksel;
arka plan rengi: # 304a00;
Beyaz renk;
metin hizalama: merkez;
}
.outerwrap {
yüzer: sol;
genişlik: %100;
üst dolgu: 71 piksel;
} Bu dosya, sayfanın html kodunda belirttiğimiz adla kaydedilmelidir - style.css.
