Kategori: CSS

Overflow:Hidden – Bir .clearFix Alternatifi

Belki de HTML ve CSS yazmaya yeni başlayan birinin en çok kafasını karıştıracak problemlerden biri de elementleri yasladıktan (float uyguladıktan) sonra karşılaşacağı problemlerdir.

FloatNormalde bir blok element onun içindeki başka bir element uzadığı zaman otomatik olarak uzar. Ancak bir elemente float uygulandığı zaman onu saran elementin normal akışını bozarak otomatik yüksekliği görmezden gelir. Eğer yaslanan element onu saran elementten yükseklik olarak büyükse, saran element aynı boyutunda kalır; yaslanan element ise onun üzerinden taşar.

Devamını oku »

CSS3 – Temel Fütüristik Özellikler

Her geçen gün daha fazla mükemmel CSS3 örnekleri görüyorum. Bazıları yapısal olarak oldukça karışık, bazılarıysa bir o kadar basit ancak bu sefer yapılmış olanın bu kadar basit olması size karışık geliyor.

Bu özellikler tasarımı o kadar güzelleştirip bir o kadar da basitleştiriyor. En basitinden border-radius, text-shadow, box-shadow gibi özellikler bizi fazladan html, css ve görsel kullanımından kurtarıyor. Tabi bir de -webkit-transition gibi daha modern hareketler sağlayan özellikler de var. (Firefox 3.7 çıksa da şu transition özelliğini onda da kullansak. Daha desteklemiyor bu özelliği.)

Hal böyleyken ve bu kadar özellikten bahsederken, -ki bu sadece ufacık bir kısmı- IE(8) hala CSS3 desteklemiyor. Tabi sevindirici bir haber yok değil. IE 9 itibariyle hem HTML5 hem de CSS3 desteği verecek. -HTML5’i daha önceki yazımda anlatmıştım.-

Devamını oku »

Sayfaya Ortalı Blok Element

Yüksekliği genel sayfa yüksekliğinden az olan tasarımlarda içerik alanının sayfaya hem yatay hem de dikey olarak ortalı olması istenir ya da en azından öyle daha güzel görünür. İçeriğin üste yapışık olması hez zaman istenen birşey değildir. Üstten boşluk vererek kısmi olarak bu sorun giderilebilir. Ama nihai çözüm bir blok elementi sayfaya dikey olarak ortalamatan geçer. Özellikle “Yapım Aşamasında” sayfalarında bu pek de güzel işimize yarar.

Yatay olarak ortalamayı margin {0 auto;} özelliğiyle kolayca yapabilirken dikey olarak ortalamak bu kadar basit değildir.
Devamını oku »

Sayfanın Altına Yapışık Alan – (Sticky Footer)

Alta Yapışık AlanBir alanın sayfanın dibine yapışık olarak durması için kullanılan en yaygın yöntem “position:fixed” ya da “position:static” kullanmaktır. Yapıştırdığınız alanın yüksekliği az ise bu da bir yöntemdir tabi. Göze de batmaz.

Ama burada şöyle bir durum var. Bunları kullanarak yapıştırdığınız alan sayfa ne kadar uzun olursa olsun her zaman sayfanın dibine yapışık duracaktır. Peki ya bizim daha büyük bir alana ihtiyacımız olursa ne yapacağız? Ya grafik tasarımını ona göre yapıp sanki sayfanın geri kalanının bir parçasıymış gibi göstereceğiz ya da birazdan anlatacağım yöntemi kullanacağız. Bunun gibi daha birçok yöntem var ama benim kullandığım en iyi yöntem aşağıdaki.

Aslında bu yöntemin genel kullanım amacı; sayfa içeriği az olduğu zaman alt alanın (footer) gelip içeriğe yapışmasını yani alt alanlıktan çıkmasını engellemek.

Devamını oku »

Sitenizi Hızlandırın!

Sitemizin tasarımını yaparken ve kodlarını yazarken yaptığımız ya da yapmadığımız bazı şeyler sitemizin açılış hızını büyük ya da küçük oranda etkiler. Sitemizin daha hızlı açılabilmesi için aşağıya birkaç ipucu ekledim. Bazıları sadece birkaç dakikanızı alabilecek bu işlemler sitenizin açılış hızını oldukça fazla etkileyecek. Bana güvenin.

İşte hala yapmadıysanız, yapmanız gerekenler:

Devamını oku »