CSS - En çok kullandığım CSS Hileleri(Hack)

Yaklaşık 3-4 senedir ile sayfası kodluyorum. ile sayfası kodlarken en çok sorun çıkaran konulardan biri farklı tarayıcılar için kod yazmaktır. hileleri ile geçiştirdiğimiz bu farklı tarayıcılara göre kod yazma işi bize aslında ile sayfa kodlama imkanı sunması bakımından önemlidir. Eğer 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 ile sayfa kodluyorum ve en çok kullandığım 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.


Yazinin tamamini oku »

Bu yazı toplamda 200, bugün ise 0 kez görüntülenmiş

CSS - Float Uygulanmış Elementleri Tam Kapsayamama Sorunu

ile sayfası kodlamak için en çok kullandığımız özelliktir. Beni bu makaleyi yazmaya iten en önemli etkende ’ın çok fazla kullanılması ve bu sorunla birçok kez karşılaşmamdır.

Sorun; 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 uygulanmış elementi kapsamamasıdır.


Yazinin tamamini oku »

Bu yazı toplamda 26, bugün ise 1 kez görüntülenmiş

CSS Professional Web Templates

Templates
Size: 15.4 MB


Yazinin tamamini oku »

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 ile sayfası kodluyorum. ile sayfası kodlarken en çok sorun çıkaran konulardan biri farklı tarayıcılar için kod yazmaktır. hileleri ile geçiştirdiğimiz bu farklı tarayıcılara göre kod yazma işi bize aslında ile sayfa kodlama imkanı sunması bakımından önemlidir. Eğer 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.


Yazinin tamamini oku »

Bu yazı toplamda 128, bugün ise 0 kez görüntülenmiş

CSS - Kenar Boşluğu(Margin) Çökmesi

Daha önceki makalelerimde devamlı kelimesini kullandım ancak bu makaleyi yazarken karşıma (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.


Yazinin tamamini oku »

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( kodlayıcılarına) ne kazandırıyor. Güvenlik açısından yenilikler içeren IE7 eski versiyonlardaki 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 tarayıcı pazarında %75′ni(değişik oranlar mevcut ben de ortalamayı aldım) elinde bulundurun bir tarayıcısının standartlara daha uyumlu olması bizi sevindiriyor.


Yazinin tamamini oku »

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.


Yazinin tamamini oku »

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( 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 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.


Yazinin tamamini oku »

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. uygulanmış elementlere komşu metinlerin maruz kaldığı bir hatadır. Örneği bir elementinize :left tanımı yaptınız ve yanına bir paraf yazı eklemek istediğinizde, ie5-6 versiyonlarında soldaki uygulanmış element içeriği boyunda sağdaki metin soldan 3 piksel kadar içeriğini öteleyecektir.


Yazinin tamamini oku »

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.


Yazinin tamamini oku »

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 değeri ve değeri atandığında IE’da sorun yaşarız. Örneğin :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.


Yazinin tamamini oku »

Bu yazı toplamda 12, bugün ise 0 kez görüntülenmiş

CSS ile Kutu modeli, sorunları ve çözümleri

’e geçişte en çok düşündüren konu niye geçelim ve ’in avantajları nelerdir? ’in avantajı bize sayfasındaki elemanlara daha fazla müdahele etme imkanı vermesidir. Burada bunun en güzel örneklerinden birini göreceğiz.
tüm elementlerini bir dikdörtgen kutu içine konmuş varsayarak ona göre pozisyonları ve boyutlarını konrol eder. Bu elementler her zaman bir padding, , border ve içerik alanını içerir. Aşağıdaki şekle bir bakınız:


Yazinin tamamini oku »

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 “ ile sitesi kodlamanın en büyük sorunu ’in özelliklerini yorumlayamayan veya yanlış yorumlayan tarayıcılarıdır. Bu nedenle ile sitesi kodlarken bu tip hataları ayıklamamız gerekiyor. ile hata ayıklama tarayıcı gruplarının veya bir kısım tarayıcısı için kuralları veya bildirimleri gizlemek veya göstermek şeklinde uygulanır.”

Biz ’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.


Yazinin tamamini oku »

Bu yazı toplamda 98, bugün ise 0 kez görüntülenmiş

CSS - IE’de Hata Ayıklamak için şartlı Yorumlar Kullanmak

ile sitesi kodlamanın en büyük sorunu ’in özelliklerini yorumlayamayan veya yanlış yorumlayan tarayıcılarıdır. Bu nedenle ile sitesi kodlarken bu tip hataları ayıklamamız gerekiyor. ile hata ayıklama tarayıcı gruplarının veya bir kısım tarayıcısı için kuralları veya bildirimleri gizlemek veya göstermek şeklinde uygulanır.

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 kodunun yorumlanıp yorumlanmayacağını belirler.


Yazinin tamamini oku »

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’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.


Yazinin tamamini oku »

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(<> 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(<> ve <q>) diğer sitelerden, yazarlardan ve yayınlardan alıntı yapmak için kullanırız.

W3C <> 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.


Yazinin tamamini oku »

Bu yazı toplamda 35, bugün ise 1 kez görüntülenmiş

CSS ve 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 derslerimizde ’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 adına kazandırdıklarını göstermeyeçalışacağız ve 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.


Yazinin tamamini oku »

Bu yazı toplamda 51, bugün ise 0 kez görüntülenmiş

CSS ile Araç İpucu(Tooltip) Hazırlama

Bazı tarayıcıları title tanımlı nesnelerin üzerine gelince tanımlanan bilgileri gösterirler. Bir çok tasarımcı javascript ve 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 ile Araç İpucu oluşturmayı göreceğiz. Bu metot yeni nesil tarayıcılarda sorunsuz çalışmaktadır.

kodu :


Yazinin tamamini oku »

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 ile de gölge verebiliriz. Bu makalede ile nesnelere(resim ve kutulara) gölge verme yöntemlerini göreceğiz.

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.


Yazinin tamamini oku »

Bu yazı toplamda 36, bugün ise 0 kez görüntülenmiş

Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement)

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 ile bir yere kadar şekillendirilir, bir çok metin şekillendirme yöntemini ile yapamayız. Bazı durumlarda metin yerine resim kullanmak durumunda kalırız.
standartlarına göre kodlama yaparken metin yerine resim kullanıldığı durumlarda arama motorlarının rahat indekslemesi ve ’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.


Yazinin tamamini oku »

Bu yazı toplamda 38, bugün ise 0 kez görüntülenmiş

Page 1 of 41234»