Sabit Konumlandırma (Postion:fixed)
Bu konuya bir çalışmam dolayısıyla position:fixed özelliğini kullanma gereksinimi duyduğum için girdim, sonra araştırma sonuçları bir makale konusu olabileceğini düşünerek bu makaleyi yazdım. Biraz araştırınca birden fazla yöntem olduğunu gördüm. Bir ikisini uyguladım ve sonuçta birinde karar kıldım. Sizlere bu süreci ve postion:fixed hakkında genel bir bilgi sunacağım.
Bu konuya daha önce CSS ile konumlandırma(positioning) kısmında kısaca değinmiştik.
"Sabitkonumlandırma Mutlak Konumlandırmanın bir alt kategorisidir. Sabit konumlandırılmış elementin sayfadaki görünümü çok farklıdır. Bunu özellikle web sayfasında bir elementin konumunu sabitlemek için kullanabiliriz. Sabit konumlandırma ile yerleştirilmiş element belirtilen yerde asılı kalacaktır. Web tarayıcısının kaydırma çubuğu aşağı yukarı kaydırılması ile Sabit Konumlandırma ile yerleştirilmiş elementin yeri değişmeyecektir ve sabit kalacaktır. Ne yazık ki IE 6 bu özelliği desteklemiyor. IE 7 strick yorumlayıcısı kullanılıyorsa destekliyor diğer hallerde desteklemiyor. "
Şeklinde genel bir bilgi verip bırakmıştık. Şimdi biraz daha ayrıntısına inelim.
Sabit konumlandırmayı sayfanın belli bir alanını sabitleyip diğer alanları bu kısmın yanından, altından kaydırmak için kullanırız genelde.
Aslında bunun için CSS bize position:fixed kodunu sunmaktadır. Ancak bu kodu IE6 ve önceki sürümlerde desteklememesi bize alternatif çözümler aramaya sevk ediyor. Buda bize bir makale yazma gereksinimi doğuruyor.
İlk metodumuz normal konumlandırma özelliğinin fixed uygulanmış şeklidir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
}
div#ustKisim {
position:fixed;
background: gray;
color: yellow;
height:50px;
width:100%;
top:0;
left:0;
}
div#icerik {
margin:75px 0 0 0;
}
</style>
</head>
<body>
<div id="ustKisim">Lorem ipsum dolor sit amet</div>
<div id="icerik">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nec erat. Fusce magna massa, nonummy eget, aliquam tempus, imperdiet vel, odio. Sed mauris. Quisque sodales urna vitae lorem. Vestibulum aliquet, odio aliquam convallis lobortis, turpis metus semper ligula, ut vulputate sem justo eu quam. Sed feugiat, lectus sit amet porttitor auctor, nulla odio volutpat nisl, sit amet egestas augue diam at urna. Sed justo arcu, luctus eget, porta in, auctor sit amet, massa. Integer interdum. Nunc condimentum scelerisque enim. Pellentesque orci. Maecenas at neque. Sed non diam ac turpis pretium dictum. Phasellus ligula felis, aliquet nec, tristique non, posuere a, magna. Duis eu quam quis tortor vehicula sodales. Donec et mi eget augue bibendum interdum. Proin dapibus odio.</p>
</body>
</html>
Örneği görmek için tıklayınız.
Baştada belirttiğimiz gibi buradaki en büyük sorunumuz IE6 ve daha eski sürümlerde bu kodun çalışmamasıdır. Bundan sonraki metot buna çözüm aramak içindir.
IE6′da çalışan postion:fixed metodu
Bu metot IE’un css içinde expression() komutunu yardımı ile javascript kodu işletmemize izin vermesi prensinden dayanır. Bizde bu metodda bu komut yardımı ile position:fixed sorununu çözeceğiz. expression() yardımı ile daha önce IE’nin min-width ve min-height sorununu çözdüğümüzü hatırlayın.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sabit Konumlandırma</title>
<style>
body {
background: #ffc;
font: 12px sans-serif;
margin: 0;
padding: 0;
}
div#ustAlan {
width: 100%;
height: 100px;
background: pink;
position: fixed;
top: 0;
left: 0;
z-index:100;
}
#icerik{
position:absolute;
top:105px;
}
</style>
<!–[if lt IE 7]>
<style>
body {
background: #ffc url(’http://’) fixed;
}
div#ustAlan {
position: absolute;
top: expression(eval(documentElement.scrollTop));
}
</style>
<![endif]–>
</head>
<body>
<div id="ustAlan">Sabit Konumlandırma</div>
<div id="icerik">
<p>Lorem ipsum dolor sit amet ….</p>
</div>
</body>
</html>
Örnek sayfayı görmek için tıklayınız.
Yukarıdaki kodu iki kısımda inceleyebiliriz. Birinci kısım ilk örnekte olduğu gibi position:fixed kullanılan IE7, FF, Opera ve Safari için yazılan kısımdır. İkinci kısım IE7′den önceki sürümleri belirten şartlı koşul içerisindeki kodlamadır. Bu sürümlerde position:fixed desteklenmediği için postion:absolute değeri atanmış ve üst değerimizi(top) javascript’in documentElement.scrollTop değeri yardımı ile belirlenip sabitlenmiştir.
Ayrıca alt alanı sabitlemek için
bottom: auto; top: expression((documentElement.scrollTop + documentElement.clientHeight – this.clientHeight));
Kodlaması kullanılır. Örneği görmek için tıklayınız.
Sabitlemek istediğimiz nesneyi üstten 10piksel aşağıda sabitlemek için
top: expression(eval(documentElement.scrollTop) + 10);
şeklinde kodlarız. Bu kodlama tekniği kullanılarak birçok farklı şablon elde edilebilir.
Bu yöntemin bazı sorunları vardır, bunlara değinmeden geçmeyelim.
- Bu metot IE5′de ve IE7, IE6′da garip modda çalışmaz.
- Bu metot javascript’in hizmet dışı bırakıldığı tarayıcılarda çalışmaz.
- background: url(‘http://’) fixed; anlamsız kodu kullanılmaktadır. Bu kod kaydırma çubuğu hareket ettikçe sabitlenen nesnenin kıpranmaması içindir.
Bunun dışında bir çok alternatif yöntem vardır. Benim deneyip en son kullanmaya karar verdiğim metot bu olduğu için sizlere bu kodu gösterdim. Ancak diğer örnekleri görmeniz için alternatif çalışmaların linklerini kaynaklar kısmında sizlere vereceğim.
Kaynaklar
- http://home.tampabay.rr.com/bmerkey/examples/fake-position-fixed.html
- http://tagsoup.com/cookbook/css/fixed/
- http://annevankesteren.nl/test/examples/ie/position-fixed.html
- http://annevankesteren.nl/2005/01/position-fixed-in-ie
- http://annevankesteren.nl/2004/07/fixed-positioning
- http://www.howtocreate.co.uk/fixedPosition.html
- http://www.cssplay.co.uk/layouts/fixed.html
- http://www.cssplay.co.uk/layouts/body2.html
- http://www.cssplay.co.uk/layouts/fixit.html
- http://www.gunlaug.no/contents/wd_additions_15.html
- http://www.gunesintamicinde.com/ie-6-ve-position-fixed-problemi/
[...] [...]
Selamünaleyküm. Fatih bey engin bilgilerinizden faydalanıyoruz. Bende css' yi sizden öğrendim. Allah razı olsun. Eğer vaktiniz olursa bir sorunum vardı.
http://osmanciklisesi.tk/x.jpg linkteki resimde yonetim panelinde oluşturulan sayfa alanın dışına taşıyor.
css kodu:
.post {
position:absolute;
width:680px;
height:100%;
}
İnternetten yazıları kopyalayıp yapıştırdığımda
<DIV style="Z-INDEX: 1; POSITION: absolute; WIDTH: 383px; HEIGHT: 288px; OVERFLOW: hidden; TOP: 20px; LEFT: 591px" id=image1><FONT size=5><IMG border=0 src="http://okulweb.meb.gov.tr/19/09/139551/images/GORUNTU22.JPG" width=383 height=288></FONT></DIV>
konumlandırma yapıyor. Bu sorunu css kodları ile düzeltebilir miyim? Yoksa php de div kodunu silen kodumu yazmam gerekecek. Bi yardımcı olabilir misiniz?
resim açılmıyor
Resim silinmiş şimdi tekrar ekledim. Sorunu php kodu yazarak halletmeye çalıştım şimdilik bir sorun yok. Aşağıdaki php kodu ile div tağını yok ediyor. İlerde div tağını kullanmam gerekirse nasıl sorunu düzeltebiliriz. Yani css ile bu mümkün mü?
Php kodu
$i="<font>".""."".""."<sub>".""."".""."
kodun anlaşıldığını söyliyemem.
$i değişkenine eklenmesine izin verilen html kodlarını belirttim. Tabi div tağı yok.
Sorun internet sitemin yönetim panelinde sayfa oluştururken örneğin bir siteden yazıları resimleri olduğu gibi kopyala yapıştır yöntemi ile sayfama eklediğim zaman div tağı ile konumlandırma yapıyor.
Sayfaları çağırırken kullandığım css kodu:
.post {
position:absolute;
width:680px;
height:100%;
}
<div class='post'>
Burada php ile çağrılan sayfalar geliyor. Gelen sayfalar içinde div tağı ile konumlandırma yapan kodlar geliyor örneğin;
<DIV style="Z-INDEX: 1; POSITION: absolute; WIDTH: 383px; HEIGHT: 288px; OVERFLOW: hidden; TOP: 20px; LEFT: 591px" id=image1><FONT size=5><IMG border=0 src="http://okulweb.meb.gov.tr/19/09/139551/images/GORUNTU22.JPG" width=383 height=288></FONT></DIV>
</div>
Yazdığım $metin=strip_tags($yazi,$i); php kodu ile div kodlarının hepsini yok ediyor.
Kusuruma bakmayın sizi de yordum. Olmuyorsa önemli değil.
position:absolute tanımı içeriğini normal akışı dışına çıkarıyor olabilir. postion:absolute çıkarıp deneyin.
top:expression(eval(documentElement.scrollTop+documentElement.clientHeight-this.clientHeight));
kodu ie6 strict'te çalışmıyor. Bir yardım etseniz?
örnekte bir sorun yok
[...] Ek olarak buralara bakabilirsiniz: w3schools Background attachment xhtml background-attachment-example sabit-konumlandirma-postionfixed [...]
Merhaba Fatih abi,
çok uğraşıp çözemediğim bir problemi hallettiniz teşekkğrler.
Ancak şimdi şöyle bir sıkıntı var. sitenin sağında sabit kalması gereken reklam IE6 IE7 FF de çözüldü. ama IE8 de scrolla sayfanın altına indikçe reklam yukarıda kalıyor.
bunu nasıl çözeriz. IE8 de de sabit kalması lazım. acil yardımınızı bekliyorum. teşekkürler.
kodum aşağuda:
<style>
div#wallPaper {
width: 200px;
height: 600px;
position: fixed;
top: 0px;
left: 840px;
z-index:100px;
}
</style>
<!–[if lt IE 7]>
<style>
div#wallPaper {
width: 200px;
height: 600px;
position: absolute;
top: expression(eval(documentElement.scrollTop));
left:840px;
}
</style>
<![endif]–>
ellerinize sağlık hocam
Fatih hocam.. ben birşey sormak istiyordum (tabi yorumların tamamını okumadım belki sorulmuştur).. şimdi ben bir site hazırladım ve siteyi 955px genişliğinde ölçülü tasarladım. daha sonra hemen tablonun yanınada yukarı ok butonu koydum ve buna "position:fixed;" verdim.. normalde ana tabloya "position:relative;" diğer konumlandırılmış tablo, ana tablo içinde yerleştiriliyor (tabi "position:absolute;"'de öyle yapıyor). ama fixed stilinde sayfaya genel olarak konumlandırıyor.. ben hem sabit kalmasını, hemde istediğim tabloda konumlandırmak istiyorum.. bu konuda herhangi bir bilginiz varmı?
şimdiden ilginiz için teşekkür ederim…
S.A abicim.Birşey soracağım.Bu facebookun alt kısmındaki çubukta mı böyle yapıplıyor.Onun nasıl olduğunuda bi açıklayabilir misin mümkünse.Sağol
Genelde sayfa altında kalan sabit alanlar için bu yöntem kullanılır. Ama bildiğim kadarı ile zaten Facebook ie6 desteği sunuyor.
o zaman kullanmakta olduğum;
#solana {position:fixed;
margin-top:80px;
width:169px;
height:370px;
visibility: inherit;
}
bu kodun ıe7 de çalışmama sebebi ne olabilir?
kod da bir sorun görmüyorum. Bir tek visibility tanımı niye var onu sorgulayabilirim. Sayfayı görmeden bişey söylemkte zor
Fat’h bey kodu çok evirdim çevirdim fakat IE7 için uyum sağlattıramadım. Benim sabitleştirmek istediğim kısım solda
#solana {
position:fixed;
margin-top:80px;
width:169px;
height:370px;
visibility: inherit;
}
şu şekilde kullandığım bir kod var bunu sol tarafa uyarlamak için bir çözüm önerebilirmisiniz?
Nette dolanırken;
* html #solana { /*\*/position: absolute; top: expression(((ignoreMe = document.documentElement.scrollTop ?document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); left: expression(((ignoreMe2 =
document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }
bu kodu buldum. işe yarıyor fakat ff deki gibi sabit olarak değil sayfayı aşşağıya doğru kaydırdıkça titreyerek iniyor.
çözüm önerileirnizi bekliyorum. teşekkürler.
İnternet explorer 7 de fixed ın sorunu yok sorun ie 6 da
backgroun titreme işin çözmek için makalenin sonunda dediğim gibi
body { background: lightyellow url('http://') fixed;}eklemelisiniz.