CSS - En çok kullandığım CSS Hileleri(Hack)
Yaklaşık 3-4 senedir css ile web sayfası kodluyorum. CSS ile web sayfası kodlarken en çok sorun çıkaran konulardan biri farklı tarayıcılar için kod yazmaktır. CSS hileleri ile geçiştirdiğimiz bu farklı tarayıcılara göre kod yazma işi bize aslında CSS ile sayfa kodlama imkanı sunması bakımından önemlidir. Eğer CSS hileleri olması idi biz farklı tarayıcılar için değil belirli tarayıcılar için kod yazmış olacaktık ki bu erişebilirlik açısından ve müşteri istekleri açısından sorun oluşturan bir durumdur.
Başta dediğim gibi 3-4 senedir CSS ile sayfa kodluyorum ve en çok kullandığım css hilelerini burada yazmamın uygun olacağını düşündüm. Çünkü birçok bu işi yeni başlayan arkadaş için önemli bir bilgi olacağını düşünüyorum. Lafı fazla uzatmadan listemiz açıklayalım.
Bu yazı toplamda 200, bugün ise 0 kez görüntülenmiş
CSS - Float Uygulanmış Elementleri Tam Kapsayamama Sorunu
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.
Sorun; float uygulanmış bir elementi içeren kapsayıcı element içeriğine göre genişlememesidir. Bu sorun zemin rengi/resmi uygulanmış veya kenarlık atanmış kapsayıcılarda daha iyi görünür. Sorun şekil.1′de gösterildiği şekilde kapsayıcı elementin float uygulanmış elementi kapsamamasıdır.
Bu yazı toplamda 26, bugün ise 1 kez görüntülenmiş
CSS Professional Web Templates
CSS Professional Web Templates
Size: 15.4 MB
Bu yazı toplamda 98, bugün ise 2 kez görüntülenmiş
En çok kullandığım CSS Hileleri (Hack)
Yaklaşık 3-4 senedir css ile web sayfası kodluyorum. CSS ile web sayfası kodlarken en çok sorun çıkaran konulardan biri farklı tarayıcılar için kod yazmaktır. CSS hileleri ile geçiştirdiğimiz bu farklı tarayıcılara göre kod yazma işi bize aslında CSS ile sayfa kodlama imkanı sunması bakımından önemlidir. Eğer CSS hileleri olması idi biz farklı tarayıcılar için değil belirli tarayıcılar için kod yazmış olacaktık ki bu erişebilirlik açısından ve müşteri istekleri açısından sorun oluşturan bir durumdur.
Bu yazı toplamda 128, bugün ise 0 kez görüntülenmiş
CSS - Kenar Boşluğu(Margin) Çökmesi
Daha önceki makalelerimde devamlı margin kelimesini kullandım ancak bu makaleyi yazarken karşıma margin(marj) yerine Türkçe kenar boşluğunu kullanabileceğimi gördüm. Bu makalede ve sonraki makalelerimde bu şekilde kullanacağım. Makalelerimi yazarken devamlı Türkçe kelimeler kullanmayı tercih ediyorum, ancak bazı kelimelerin karşılılarını bulmakta zorlanıyorum. Neyse asıl konuya geçelim.
Kenar boşluğu çökmesi nedir? Kenar boşluğu nasıl meydana gelir ve nasıl çözülür? Bu makalede bu sorulara cevap bulacağız.
Kenar boşluğu çökmesini W3C bitişik kenar boşluğu olarak tanımlar. İki veya daha fazla kutunun(sonraki bir nesne veya kutu olabilir)arasındaki boşluğun tek kenar boşluğu şeklinde görünmesidir.
Bu yazı toplamda 30, bugün ise 0 kez görüntülenmiş
Internet Explorer 7 ve CSS
Internet Explorer 7 tam sürümü yayınlandı, peki bu yeni sürüm bizlere(web kodlayıcılarına) ne kazandırıyor. Güvenlik açısından yenilikler içeren IE7 eski versiyonlardaki CSS sorunlarının bir çoğunuda çözmüş görünüyor. Bu bizim gibi kodlayıcılar için çok güzel bir gelişme, IE gibi web tarayıcı pazarında %75′ni(değişik oranlar mevcut ben de ortalamayı aldım) elinde bulundurun bir web tarayıcısının standartlara daha uyumlu olması bizi sevindiriyor.
Bu yazı toplamda 40, bugün ise 0 kez görüntülenmiş
CSS - Göreceli-Mutlak Konumlandırma Sorunu
Bu hata göreceli olarak konumlandırılmış(position:relative) bir elementin içinde mutlak konumlandırılmış(position:absolute) elementlerin bulunduğu durumlarda meydana gelir. Bu hata IE6 ve altı versiyonlarda görülür.
Bu yazı toplamda 15, bugün ise 0 kez görüntülenmiş
CSS - IE6′da CEE-EEE(peek-a-boo) Hatası
Bir diğer garip ve bizi sinirden çatlatan IE sorunu benim CEE-EEE(web de ise peek-a-boo namıyla gezinen; bu ismin verilmesinin nedeni içeriğin bir orataya çıkıp bir kaybolmasıdır, hani bizim bebekleri eğlendirmek için yüzmüzü ellerimizle kapatıp cee-eee diye birden açarak bebeleri eğlendirdiğimiz oyun varya işte o oyundan geliyor bu isim.) adı ile tanımladığım hatadır. Hata uzun içeriği olan ve float elementi içeren likit kutularda meydana gelir. Sadece IE6 versiyonunda karşılaşılır. Kaydırma çubuğu ile aşağı yukarı gidince veya programlar arasında geçiş yapınca (alt+tab kısayolu ile mesela)düzelir. Ama bu düzelme geçicidir sayfa ilk yüklendiğinde veya yenileme yapıldığında hata yine çıkar.
Bu yazı toplamda 13, bugün ise 0 kez görüntülenmiş
CSS- IE’un 3 piksel Metin Öteleme Hatası
Bu hata IE5-6/Win versiyonlarında görünür. Float uygulanmış elementlere komşu metinlerin maruz kaldığı bir hatadır. Örneği bir elementinize float:left tanımı yaptınız ve yanına bir paraf yazı eklemek istediğinizde, ie5-6 versiyonlarında soldaki float uygulanmış element içeriği boyunda sağdaki metin soldan 3 piksel kadar içeriğini öteleyecektir.
Bu yazı toplamda 14, bugün ise 0 kez görüntülenmiş
CSS - Genişlik ve Yüksekliğin Sınırlarını Belirlemek(min-width, min-height,max-width, max-height)
Bir kapsayıcı kutunun genişlik değerini minimum ve maksimum değerleri ile sınarlandırabilriz. Bu özellikler CSS2 ile birlikte gelmiştir.
min-width, min-height
Yapısı : min-width, min-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok
min-width, min-height kapsayıcı kutunun minimum alacağı değerleri belirtmek için kullanırız.
Bu yazı toplamda 15, bugün ise 0 kez görüntülenmiş
CSS- IE’da İkikat görülen Margin Problemi ve Çözümü
Bir blok-level elemente float değeri ve margin değeri atandığında IE’da sorun yaşarız. Örneğin float:left değeri atanmış bir içerik kutusuna soldan 100px kadar ayırmak istediğinde IE’de soldan 100px olması gereken mesafe 200px görünecektir.
Bu yazı toplamda 12, bugün ise 0 kez görüntülenmiş
CSS ile Kutu modeli, sorunları ve çözümleri
CSS’e geçişte en çok düşündüren konu niye CSS geçelim ve CSS’in avantajları nelerdir? CSS’in avantajı bize web sayfasındaki elemanlara daha fazla müdahele etme imkanı vermesidir. Burada bunun en güzel örneklerinden birini göreceğiz.
CSS tüm HTML elementlerini bir dikdörtgen kutu içine konmuş varsayarak ona göre pozisyonları ve boyutlarını konrol eder. Bu elementler her zaman bir padding, margin, border ve içerik alanını içerir. Aşağıdaki şekle bir bakınız:
Bu yazı toplamda 64, bugün ise 0 kez görüntülenmiş
CSS Hata Ayıklama Yöntemleri
IE’de Hata Ayıklamak için şartlı Yorumlar Kullanmak adlı makalede bahsettiğimiz gibi “CSS ile web sitesi kodlamanın en büyük sorunu CSS’in özelliklerini yorumlayamayan veya yanlış yorumlayan web tarayıcılarıdır. Bu nedenle CSS ile web sitesi kodlarken bu tip hataları ayıklamamız gerekiyor. CSS ile hata ayıklama web tarayıcı gruplarının veya bir kısım web tarayıcısı için kuralları veya bildirimleri gizlemek veya göstermek şeklinde uygulanır.”
Biz CSS’de hata ayıklamak için bir çok yöntem kullanırız. Bunların en çok kullanılanları aşağıda anlatılmıştır.
Bu yazı toplamda 98, bugün ise 0 kez görüntülenmiş
CSS - IE’de Hata Ayıklamak için şartlı Yorumlar Kullanmak
CSS ile web sitesi kodlamanın en büyük sorunu CSS’in özelliklerini yorumlayamayan veya yanlış yorumlayan web tarayıcılarıdır. Bu nedenle CSS ile web sitesi kodlarken bu tip hataları ayıklamamız gerekiyor. CSS ile hata ayıklama web tarayıcı gruplarının veya bir kısım web tarayıcısı için kuralları veya bildirimleri gizlemek veya göstermek şeklinde uygulanır.
CSS kuralları ve bildirimlerini gizlemek için bazı yöntemler mevcuttur. Biz bunlardan şartlı Yorumların kullanımını öğreneceğiz. şartlı Yorumlar Internet Explorer 5 versiyonu ile birlikte kullanılmaya başlanmıştır. şartlı Yorumlar xhtml kodunun yorumlanıp yorumlanmayacağını belirler.
Bu yazı toplamda 49, bugün ise 0 kez görüntülenmiş
CSS - Internet Explorer 6 için saydam PNG desteği
“PNG, “Taşınabilir Ağ Grafiği” anlamındaki (Portable Network Graphics) ‘in kısaltmasıdır ve kayıpsız sıkıştırarak görüntü saklamak için kullanılan bir saklama biçimidir. PNG biçiminde paletli ya da gerçek renkte görüntüler seçimlik bir saydamlık kanalıyla saklanabilir.” şeklinde tanımlanmış vikipedi’da
PNG - GIF
- PNG dosyaları GIF’e göre daha fazla sıkıştırılır, yani daha az yer kaplar
- GIF 256 renk desteklerken PNG 48 bit trucolor destekler
- GIF sadece binary saydamlığı desteklerken PNG alfa kanal desteğiyle sınırsız saydamlık sağlar.
PNG’nin GIF’e göre tek dezavantajı hareketli resimler desteklememesi idi ki bunuda hallettiler. Firefox3 ile birlikte Hareketli PNG desteğinin geleceğine dair haberler geliyor kulağımıza.
Bu yazı toplamda 35, bugün ise 0 kez görüntülenmiş
CSS - Alıntı: Blockquote ve q etiketleri
W3C bir çok durum için çeşitli etiketler üretmiştir ve bu etiketlerin kullanılmasını önerir. Alıntıda böyle bir etikete sahiptir(<blockquote> ve <q>). Ancak kod yazarlarını bu etiketleri kullanmaktan alı koyan bu etiketlerin başlangıçtaki görünümünün çok güzel olmamasıdır, tabi farklı etiketlerle uğraşmak istemeyenlerde vardır. İşte bizde burada hem w3c’nin dediğini yapıp hemde güzel görünümlü ve kullanışlı alıntılar yapacağımızı anlatacağız.
Alıntı etiketlerini(<blockquote> ve <q>) diğer sitelerden, yazarlardan ve yayınlardan alıntı yapmak için kullanırız.
W3C <blockquote> elementini kullanımını önermektedir. Bu kodlama bizlere ayrıcalık tanıyacaktır ve tekil bir etiketin kullanım avantajlarını bize sunacaktır.
Bu yazı toplamda 35, bugün ise 1 kez görüntülenmiş
CSS ve Tipografi
“Tipografi(Yunancaτύπος (typos)=”form” ve γραφία (graphia)=”yazmak” sözcüklerinden)yazıyı bir forma sokma sanatı ve tekniğidir. Font (yazı tipi), font büyüklüğü,satır uzunluğu, satır arası boşluk ve benzeri unsurların kombinasyonları ileyapılır. Yayımlanacak yazınsal içeriğin bir forma sokulması veya tasarımı olarakda tanımlanabilir. Türkçe tipografya olarak da çevrilmiştir. TerimTürkçe’yeFransızca’dangeçmiştir.” Kaynak: Vikipedi
İlk CSS derslerimizde CSS’in avantajlarını sıralarken metinlere daha fazla hükmetme özelliğine sahip olduğumuzdan bahsetmiştik. Tipografihakkında sizlere genel bir bilgi verecek değilim, bu benim haddimede değil zaten. Biz buradadaha çok Stil Şablonlarının bize tipografi adına kazandırdıklarını göstermeyeçalışacağız ve CSS ile sayfalarımızı daha dikkat çekici ve okuna bilir hale getireceğimizi göreceğiz. Tipografihakkında genel bir bilgi vermesi açısından güzel bir çalışma olan Doç. Hasip Bektaş’ın “İnternetteki Tipografi Sorunları ve GörselKirlenmeye Karşı Öneriler” adlı makalesini okumanızı tavsiye ederim. Ayrıca kaynakçakısmındaki linklerden de daha fazla bilgi alabilirsiniz.
Bu yazı toplamda 51, bugün ise 0 kez görüntülenmiş
CSS ile Araç İpucu(Tooltip) Hazırlama
Bazı web tarayıcıları title tanımlı nesnelerin üzerine gelince tanımlanan bilgileri gösterirler. Bir çok tasarımcı javascript ve css yardımıyla Araç İpucu geliştirerek farklı tipte ve çeşitte araç ipucu oluşturmaktadır ve oluşturmaya devam etmektedir. Biz burada sadece CSS ile Araç İpucu oluşturmayı göreceğiz. Bu metot yeni nesil tarayıcılarda sorunsuz çalışmaktadır.
XHTML kodu :
Bu yazı toplamda 25, bugün ise 0 kez görüntülenmiş
CSS İle Gölge Vermek
Resimlere gölge vermek bir çok tasarımcının kullandığı derinlik hissi veren güzel bir efekttir. Bir çok insan bu efekti vermek için resim düzenleme programlarını kullanmaktadır. Resimlere CSS ile de gölge verebiliriz. Bu makalede CSS ile nesnelere(resim ve kutulara) gölge verme yöntemlerini göreceğiz.
CSS ile gölge vermenin avantajı; resimlerimize herhangi bir ekstra program kullanmadan gölge verebilmemizdir. Böylece sayfamıza her eklediğimiz resim için resim düzenleme programını açıp gölge eklemek zorunda kalmayacağız.
Bu yazı toplamda 36, bugün ise 0 kez görüntülenmiş
Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement)
Xhtml ile kodlama yaparken genelde metinleri kullanırız. Çünkü metinlerin eklemesi, düzenlemesi kolaydır ve arama motorları indekslemesini kolay yapar. Ancak bazı durumlarda metin yerine resim kullanmak sitemizin görselliği açısından önemlidir metinler CSS ile bir yere kadar şekillendirilir, bir çok metin şekillendirme yöntemini CSS ile yapamayız. Bazı durumlarda metin yerine resim kullanmak durumunda kalırız.
Web standartlarına göre kodlama yaparken metin yerine resim kullanıldığı durumlarda arama motorlarının rahat indekslemesi ve CSS’i ve resimleri desteklemeyen tarayıcılarda görüntünün ve erişebilirliğin bozulmaması için Metin Yerine Resim Ekleme Teknikleri(Image replacement) kullanılır.
Bu yazı toplamda 38, bugün ise 0 kez görüntülenmiş
