Web Sitesine Footer Tanımlamak [HTML + CSS]

[Ractamainus]

Bu konunun hiç üzerine düşmedim ama bir kere öyle aklıma esip de yapmak istediğim de, yapamadığımla kalmıştım. Sonra da sıkılıp bırakmıştım da şimdi aklıma geldi... Sizlere danışayım efendim...

Şöyle ki header ve footer'ı olan bir websitesi düşünün... Header ile ilgili bir problemimiz yok zaten, sayfanın başına dayanmış duruyor... Footer'ın ise sayfanın içeriği (placeholder) ne kadar kısa olursa olsun (isterse içerik olmasın, placeholder boş olsun) ekranın altına dayanmasını istiyorum. Yalnız içerik ekrandan taşıyorsa, footer da taşacak... Bilmiyorum anlatabildim mi(?)

Şimdi tabii css "position" property'sine "absolute ya da fixed" attribute'larını atayarak bu sorunu çözer gibi yapıyoruz ama ben öyle istemiyorum... Sayfa uzarsa aşağı inebilmeli footer da.

Diğer faktör de platform bağımsız bir çözüm üretmek tabii... Yani hem tüm browser'larda (en azından ie, opera, firefox) çalışacak hem de monitör ayrımı da gözetmeyecek. yani 800x600 monitörde düzgün olup da 1024x768 monitörde sapıtan html+css istemiyorum =)

Acaba diyorum, html + css ile bu problem çözülemez de javascript kullanmaya mı ihtiyaç var ki? Doğrusu hazzetmediğim bir durum ama...

Fikirlerinize açığım efendim ;)

[riglous]

Bu olmaz mi ki? Her seyi table icine alaraktan...

[spo]

...header information...


...footer information...


...first row of block one data...
...second row of block one data...


...first row of block two data...
...second row of block two data...
...third row of block two data...

[/spo]

[Zopik]

Alt alta 3 tane div koyacan Racta sorduğun da soru mu şimdi :)

Ya da riglous'un dediği gibi table koy gitsin işte ...

[Mum_Chamber]

ractaya söyledim, burada da bulunsun.

hedehödö falan filan

ehaeha

tablo içinde tablo da yapabilirsiniz eğer istiyorsanız.

[Mirage]

said:

Şöyle ki header ve footer'ı olan bir websitesi düşünün... Header ile ilgili bir problemimiz yok zaten, sayfanın başına dayanmış duruyor... Footer'ın ise sayfanın içeriği (placeholder) ne kadar kısa olursa olsun (isterse içerik olmasın, placeholder boş olsun) ekranın altına dayanmasını istiyorum. Yalnız içerik ekrandan taşıyorsa, footer da taşacak... Bilmiyorum anlatabildim mi(?)

Footer'ın ekranın tam altına dayanması absolute kullanmadan css ve div ile (tablosuz) zor gibi. Ben bulamadım en azından. Absolute kullanarak yaparsan da sayfa uzadığında o öyle kalacaktır.

İstediğine tam olarak css ile nasıl ulaşılır bilmiyorum. Onun yerine yaklaşık bir çözüm önereyim:

CSS:

/* Div'lerde height kullanabilmek için div'in bulunduğu container'ın bir yüksekliği olması lazım. O yüzden body'yi absolute yapıyoruz ve body height'e 100% diyoruz. Genişliği kafa göre koyabilirsin. Margin'ler de kenarlarda beyaz boşluk olmasın diye */
body {
position: absolute;

margin: 0px;
padding: 0px;

width: 1024px;
height: 100%;
}

/* Arkaplan renkleri test amaçlı tabii ki. Div'in width'ini %100 yaptığımızda bu % browser'daki gösterilebilir alan değil, body'nin %100'ü. Yani 1024px. Aksini istersen body width'i %100 yapabilirsin. */
#header {
width: 100%;

background-color: red;
}

/* Burda content yüksekliğini min-height olarak belirliyoruz ki içinde bir şey yokken %90'a kadar uzasın.
#content {
width: 100%;
min-height: 90%;

background-color: green;
}

/* Tam çözüm değil, çünkü footer ve header boyu sabit olacağından çözünürlüğe göre footer biraz aşağı yukarı oynayacaktır. Tam ekranın altına yapışmayacak. */
#footer {
width: 100%;

background-color: blue;
}

HTML:

Header

Content

Footer

[ Mesaj 27 March 2007, Tuesday - 10:29 tarihinde, Mirage tarafından güncellenmiştir ]