‘kapsayamama-sorunu’ etiketi için sonuçlar
PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması II
Ocak 6th, 2010 • 30 yorum CSS, Web Standartları, XHTML
Etiketler: adım adım kodlama, CSS, css-kodlama-düzeni, CSS-Layout, farklı tarayıcılara göre kod yazmak, ie6, kapsayamama-sorunu, Kutu-Modeli, psdtohtml, site-kodlama
Ana Sayfa Kodlaması
Bir önceki makalemde sizlere kodlamaya başlamadan önceki süreci anlattım. Şimdi sizlerle sitenin Ana Sayfasını nasıl kodladığımı anlatmaya çalışacağım. Bu makaleye yazacağımı düşünerek kodlama yaparken notlar tutmuştum, bu makale biraz da o notların derlemiş hali şeklinde olacaktır.
- I -Kodlama Öncesi Hazırlıklar
- II – Ana Sayfa Kodlaması (bu sayfa)
- III – Alt Sayfaların Kodlaması (yayına hazırlanıyor…)
Sayfa Dibine Yapışık Alt Alanlar(Sticky Footer)
Haziran 12th, 2009 • 11 yorum CSS, Web Standartları, XHTML
Etiketler: alta-yapışık-alanlar, CSS, kapsayamama-sorunu, sticky-footer
Bir çok sitede karşılaştığımız sayfanın dibine yapışık alt kısımları bu makalede anlatmaya çalışacağım. Bunu hiç javascript kullanmadan sadece css yardımı ile yapacağız.
Site içeriğinin az olduğu durumlarda sayfanın alt kısımları normal akış içerisinde ise yukarı doğru kayacaktır ve hoş olmayan görüntülere neden olacaktır. Bu gibi durumları engellemek için sayfamızın alt kısımlarını sayfa dibine yapıştırmalıyız, böylece sayfa içeriğinin az olması ve çok olması durumunda alt kısmın yerini aynı olacaktır.
Bu işi yapmak için bir kaç türlü yöntem geliştirilmiştir, mantık olarak aynı olan bu yöntemlerde farklı tarayıcılardaki sorunlara çözüm bulmak için farklılıklar içerir. Ben bunlarda bazıları çeşitli projelerimde uyguladım, ancak makaleyi yazarken en iyisi hangisi ise onu yazmaya karar verdim. cssstickyfooter.com‘um anlattığı yöntem benim gördüğüm en iyi yöntem.
Kodumuzu yazmaya başlarsak.
XHTML kodu:
<div id="kapsul">
<div id="ustAlan">
<h1>Lorem ipsum dolor sit amet</h1>
</div>
<div id="icerikAlani">
<div id="icerik">
</div>
<div id="icerikSagAlani">
</div>
</div>
</div>
<div id="altAlan">
</div>
XHTML kodunda dikkate değer olan kısım içerik alanı ve alt alanı iki farklı bölüm olarak kodlamamız. altAlan ve diğer alanları kapsayan bir kapsayıcı katmandan(#kapsul) oluşuyor kodumuz. Bizim yaptığımız örnekte üst alanı ve iki kolonlu içerik kısmını kapsayıcı katman içine alıyoruz.
CSS Kodu
html, body, #kapsul {height: 100%;}
body > #kapsul {height: auto; min-height: 100%;}
#icerik {padding-bottom: 133px;} /* altAlan yukseligi ile ayni olmali */
#altAlan {
position: relative;
margin-top: -133px; /* altAlan yuksekliginin eksi degeri */
height: 133px;
clear:both;
}
Buradaki 133px tanımına dikkat etmemiz gerekiyor. 133px altAlan yüksekliğidir ve 3 yerde birden aynı değeri kullandığımıza dikkat edeniz.
Kodu incelersek birinci ve ikinci satırda yüksekliklerin tüm alanı kapsaması için farklı tarayıcılar için %100 tanımını yapıyoruz.
3. satırda alta yapışık alan kadar padding değeri vererek içerik kısmının alt kısmın altında kalmasını engelliyoruz.
4-8 satır arasında alt alan tanımlarımızı yapıyoruz. Göreceli konumlandırdığımız alanı içerik alanında padding-bottom değeri ile açtığımız boşluğa yerleştirmek için negatif üst kenar boşluğu değeri veriyoruz.
Bu yöntemde float uygulanmış içerik kısmında tam alanı kapsayamama sorunu ile karşılaşıyoruz. Float uygulanmış alanların kapsayamama sorunu çözmek için http://www.fatihhayrioglu.com/float-uygulanmis-elementleri-tam-kapsayamama-sorunu/ makalemiz anlattığımız yöntemi kullanıyoruz.
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
Bu sınıfı tanımlıyoruz ve içeriği kapsayan(#icerikAlani) katmana atıyoruz.
<div id="kapsul">
<div id="ustAlan" class="kapsayamamaSorunu">
<h1>Lorem ipsum dolor sit amet</h1>
</div>
<div id="icerikAlani" class="kapsayamamaSorunu">
<div id="icerik">
</div>
<div id="icerikSagAlani">
</div>
</div>
</div>
<div id="altAlan">
</div>
Bu yöntemin ryanfait.com’un yöntemine göre en büyük avantajı bence ryanfait.com’un yöntemindeki anlamsız tampon katmanı gibi bir fazla kodlamadan kaçınış oluyoruz.
Örneği görüntülemek için tıklayınız.
Sorunlar ve Çözümleri
- Benim kullandığım projede body ve üstAlan’daki margin-top değeri sorun çıkardı. Bunun yerine padding kullanarak sorunu çözdüm. Üst kısım body’deki margin-top ve margin-bottom tanımları sorun çıkarıyor, bunun yerine padding kullanın.
- Ayrıca yazı tipi boyutunu büyük kullanmak isteyen kullanıcılarda sorun çıkabileceği söyleniyor. Eğer yazı tipi boyutunu piksel(px) vb. kesin değerler ile belirlerseniz bu tip sorunları engelleyebilirsiniz.
- Son olarakta asp.net ile oluşturulan sayfalarda <form> elemanı ile kapsanan sayfanızda sorun çıkabilir. Bunu engellemek için kodunuzu
html, body, form, #kapsul {height: 100%;}
Kaynaklar
- http://www.cssstickyfooter.com/
- http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
- http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
- http://cokbasit.blogspot.com/2009/01/yapkan-taban-sticky-footer.html
- http://css-tricks.com/sticky-footer/
- http://www.waycoolwebdesign.com/Blog/2008/11/15/CSS-Sticky-Footer
- http://stever.ca/web-design/css-sticky-footer/
- http://brassblogs.com/blog/sticky-footer
- http://www.davidjrush.com/blog/2009/01/css-sticky-footer/
Float Uygulanmış Elementleri Tam Kapsayamama Sorunu İpuçları
Şubat 9th, 2009 • 10 yorum CSS
Etiketler: float, ipucu, kapsayamama-sorunu, sorun
1- Firefox 3′de form elemenalarının Tıklanamaması Sorunu
Daha önce bir kaç kez bahsettiğim ve web kod yazarlarının birçok zaman karşılaştığı ‘Float uygulanmış elementlerin kapsayamama sorunu’ bugün xpur(Gökhan)’un bir sorusu üzerine bu yazıyı yazma gereği duydum.
Kapsayamama sorunu yaşadığımız katman içinde eğer selectbox var ise Firefox 3′de bu selectbox tıklanabilir olmuyor. Açılmıyor yani
Kodumuz aşağıdaki gibi
.kapsayamamaSorunu: after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
sorunu çözümü ise .kapsayamamaSorunu ile :after arasındaki boşluğu kapatmak .kapsayamamaSorunu:after
.kapsayamamaSorunu:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Küçük bir nokta olsa da zamanı gelince insanın çok zamanını alıyor.
2- Sorunun Kısayolu
Bu konuda hakkında bir başka ipucuda float’uygulanmış nesnelerde bu sorun ile çok fazla karşılaşıyoruz, ben eskiden her bir sorunlu eleman için bu kodu yazıyordum. Sonra bunu bir sınıfa atayıp gerekli yerlerde bu sınıfı kullanmanın daha avantajlı olacağını düşündüm.
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
<div id="icerik" class="kapsayamamaSorunu">
<ul>
<li>
<select>
<option value="-1">Seçiniz</option>
<option value="1">Deneme1</option>
<option value="2">Deneme2</option>
</select>
</li>
</ul>
</div>
<div class="resimAlani kapsayamamaSorunu">
<img src="images/deneme.jpg" width="150" height="80" />
</div>
#icerik ve .resimAlani bu sorun ile karşılaştığımızı düşünelim. Tek tek bu kodu yazmaktansa .kapsayamamaSorunu isimli bir sınıf tanımlayıp sorunumuz ile karşılaştığımız her yerde bu sınıfı tanımlarız. Tek tanımla ile işimizi hallettik.
Float Uygulanmış Elementleri Tam Kapsayamama Sorunu
Ağustos 20th, 2007 • 37 yorum CSS, Web Standartları, XHTML
Etiketler: :after, clear, clearfix, CSS, float, kapsayamama-sorunu, Web Standartları, XHTML
Float CSS ile web sayfası kodlamak için en çok kullandığımız özelliktir. Beni bu makaleyi yazmaya iten en önemli etkende float’ın çok fazla kullanılması ve bu sorunla birçok kez karşılaşmamdır.
Okumaya devam edin »
