Neden Altbilgim Web Sayfamın Ortasında?

Bir web sitesi altbilgisi, Web sayfasının ortasında olabilir ve en altta birkaç nedenden dolayı görülebilir. En yaygın olanlardan biri, web sitesi içeriğinin küçük olması ve altbilginin ortasına kadar itilmesidir. Altlığı olan "" kaplar yanlış kodlanmış olabilir, kenar boşlukları ya da dolgular yanlış olabilir ve "şamandıra" özelliği yanlış olabilir.

Altbilgi Konumu

Altbilgi CSS "position" özelliği, üstbilgi ve ana gövde içeriği gibi Web sayfasındaki altbilginin nerede konumlandığını belirler. Beş tip konumlandırma statik konum, sabit konum, bağıl konum, örtüşen konum ve mutlak konumdur. Altbilgideki mutlak konumlandırma, altbilgi öğesinin diğer öğelere göre davranmaması için kullanılır. "Position: absolute;" "#footer" braketi "{" ve "}" etiketlerinin içinde kodlama. Ayrıca, "dip: 0;" doğrudan "konum" kodlamasının altındaki çizgide. Şimdi altbilgi kesinlikle "DIV" konteyner Web sayfasının altına yerleştirilmiştir.

Altbilgi Genişliği ve Yüksekliği

Altbilgi genişlik ve yükseklik özellikleri altbilgi konumlandırmasını engelleyebilir. Altbilgi çok büyükse, Web sayfasının alt kısmında çok fazla yer kaplar. "{" Ve "}" nin "#footer" köşeli ayraç etiketleri içinde "width: Xpx;" ve "yükseklik: Xpx;" kodlama. Altbilgiyi web sitesinin içeriğinin geri kalan kısmı kadar geniş yapmak için genişliği "% 100" olarak değiştirin. Yüksekliği, "60px" veya "75px" gibi istediğiniz piksel boyutuna değiştirin. Bu iki değişiklik Web sayfasının altına itilen altbilgiye katkıda bulunabilir.

Kenar Boşlukları ve Dolgu

Kenar boşluğu ve dolgu kodlaması altbilgi konumunu etkileyebilir. Altbilgi kenar boşlukları çok darsa veya dolgu çok genişse, altbilgi konumu kayar ve Web sayfasının ortasına gidebilir. Kolay bir çözüm kenar boşluklarını ve dolguyu tamamen kaldırmaktır, böylece bu altbilgi özellikleri kodlamanın geri kalanına karşılık gelir. Web sayfası kodlamasında "#footer" özelliğini bulun. "{" Ve "}" parantezindeki etiketler "margin: Xpx Xpx Xpx Xpx;" ve "dolgu maddesi: Xpx Xpx Xpx Xpx;" kodlama. Şimdi altbilgi kenar boşlukları ve dolgusu, Web sayfasının en üstündeki "#body" ve "#container" etiketleriyle belirlenir. Her iki kodlama satırını da kaldırın ve Web sayfasını yenileyin.

Konteyner Yerleşimi

Bir web sitesi altbilgisi, genel DIV konteyner düzeninde konumlandırılmış bir öğedir. Kap düzeni özellikleri yanlış olduğunda, altbilginin Web sayfasındaki konumunu etkileyebilir. "{" Ve "}" "#container" köşeli ayraç etiketleri içinde aynı "yükseklik" ve "konum" özelliklerine sahiptir. "Yüksekliği"% 100 olarak değiştirin ve "konumunu" göreceli olarak değiştirin. "#Container" 'a yeni bir kodlama satırı ekleyin ve "min-height: 100%;" yazın; bu, tüm konteyner düzenine yeni bir minimum yükseklik verir. Artık tüm Web sayfası, içeriğin miktarına bakılmaksızın ekranın tam yüksekliğinde kalacaktır. Göreceli pozisyon ayrıca altlığın mutlak pozisyonu ile pozitif olarak etkileşime girer.