Search

Footer Alanını Zeminde Tutmak



1 yorum

Footer Alanını Zeminde Tutmak


Web sitesi geliştiren çoğu kişinin karşılaşmış olduğu bir sorundan bahsedeceğim. Özellikle master page sayfalarımızı tasarladıktan sonra üzerine yazmış olduğumuz sayfaların içeriğinin kısa olması halinde istenilmeyen footer görüntüsüyle karşılaşılabiliyor. Tabi footer'ı zeminde tutmayı başaramadıysanız... 

Bu şekilde bir sorunla karşılaşıldığında nasıl çözeceğimize dair güzel bir çözüm yöntemi bulunmuş. Öyle ki bu çözüm yöntemi her tarayıcıda çalışabilecek şekilde. Faydalandığım kaynak için buraya tıklayabilirsiniz.
Web şablonumuzu uygun hale getirmemiz için yazmamız gereken kodları aşağıda paylaşıyorum.


HTML:

CSS:
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#ortaAlan{
   padding:10px;
   padding-bottom:120px;   /* footer yüksekliği */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:120px;   /* footer yüksekliği */
   background:#6cf;
}

Html ve Css kodlarındanda anlaşılacağı gibi, footer alanının yüksekliği kadar orta alan uzaklaştırılmıştır. Böylece footer alanının daima zeminde kalması sağlanmış oluyor.

1 yorum:

Mesut Kaya at: 24 Ekim 2013 09:58 dedi ki...

Güzel bir yazı olmuş çalışmalarınızın devamı dilerim

Yorum Gönder

Check Page Rank
DMCA.com