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ş
CSS - (X)Html : Başlıklar
Başlıklar bir siteye girdiğimizde dikkatimiziçeken ilk unsurlardandır.
Başlıkları sadece bir konunun başlığı olarak göremeyiz, onlar aynı zamandaerişebilirlilik ve tasarım açısından da önemlidir.
Başlıklar normal metine göre daha büyük font değerlerinde ve farklı renklerletanımlanır genelde. W3C başlıkları bir konunun kısa açıklaması olarak algılarve ona göre davranır.
Bu önemle bahsedilen başlıkları nasıl kodlamalıyım? Web kodlamanın önemli parçalarından biri olan başlıkların tanımlanması bu makalede göreceğiz.
Başlık tanımlamanın bir çok yolu vardır. Biz web standartları ve iyi kodlamaaçısından konuyu irdeleyeceğiz.
Bu yazı toplamda 32, bugün ise 0 kez görüntülenmiş
CSS ile “hr/>” Stil Vermek
CSS ile birlikte kodlama yaparken bir çok yerde <hr/> etiketi yerine elementlerin üst ve alt kenarlık değeri ataması yapılarak kodlama yapılmaktadır, bunun yerine <hr /> etiketini kullanabiliriz. <hr / > daha kolay eklenir ve css desteklemeyen araçlarda sayfa görünümünün bozulmasını engeller.
<hr> elementinin kullanımı da kolaydır. <hr> elementinin tek sorunu farklı web tarayıcılarında farklı algılanmasıdır burada biz hepsine aynı göstermeye çalışacağız. Aşağıdaki kodlar IE5+, Opera5+ ve FF1.0+ test edilmiştir.
Bu yazı toplamda 27, bugün ise 0 kez görüntülenmiş
CSS ile Erişilebilir Formlar Yapmak - II
Gelişmiş Form Yapıları
Gelişmiş yapılı formlarda tablo kullanmak daha kolayımıza geliyor. Ancak burada bir sorunumuz varki formlar veri içeren tablolar değildir ve doğru kodlama için form yapılarını oluştururken tablo kullanmak web standartlarına uygun değildir.
Biz burada daha karışık yapılı bir formu nasıl tablo kullanmadan planlar ve güzelleştiririz onu anlatmaya çalışacağız. Tabi bu kodlamanın bazı zorlukları olacaktır ama genel yapı anlaşılırsa yapılamayacak form kodlaması yoktur. Aşağıda kodlayacağımız formun resmini görüyoruz.
Bu yazı toplamda 54, bugün ise 0 kez görüntülenmiş
CSS ile Erişilebilir Formlar Yapmak - I
Kullanıcı ile irtibatımızı sağlayan, sayfalarımıza interaktiflik kazandıran html elementleridir formlar. Bu makalede hep beraber Formların nasıl CSS ile tablo kullanılmadan oluşturulduğunu göreceğiz.
CSS ile daha erişilebilir ve esnek yapılı form kodlamayı iki kısma ayırabiliriz. Formların etiketlerinin yerlerini planlamak(konumlandırmak) ve form elementlerini güzelleştirerek daha göze hoş gelen ve işlevsel bir hala getirmek.
Bu yazı toplamda 27, bugün ise 0 kez görüntülenmiş
CSS ile Tabloları şekillendirmek
Bu makalemizde CSS ile tablolarımızı nasıl daha okunaklı ve güzel gösterebiliriz onu anlatmaya çalışacağız. Bildiğiniz gibi CSS’in namını arttıran olay web sayfa iskeletinin tablolar ile değilde katman(<div>) ile kodlaması ile olmuştur. Ancak burada bir yanlış anlaşılma oluyor genelde, oda şudur ki tablolarda bir Xhtml elementidir ve gerektiği yerlerde kullanılmalıdır, amacımız tablo kullanmamak değil web standartlarına uygun kodlama yapmak olduğunu hiç bir zaman unutmayalım. Tablo kullanılacak yerlerde de katman kullanarak işi çığırından çıkılmaz hala getirmenin bir anlamı yoktur. Tabloların kullanıldığı yerlere bir kaç örnek verelim:
Bu yazı toplamda 37, bugün ise 0 kez görüntülenmiş
CSS ile Sekmeli(Tab) Menü Yapımı
Sekmeli menümüzü Doug Bowman’ın Sliding Doors tekniği ile yapacağız. Bu teknik bize esnek yapılı, yuvarlak kenarlı sekmeli menü yapma olanağı sağlar. Adım adım gidersek
1.Adım Başlangıç olarak her zamanki gibi XHTML kodumuzu yazalım:
Bu yazı toplamda 72, bugün ise 0 kez görüntülenmiş
CSS ile Menü Oluşturmak V - Resimli Menüler
“Arkaplan Resmi kaydırmaca” ile Resimli Menüler
Arkaplan Resmi kaydırmaca tanımlamasını cemsid‘den aldım. CSS ile menü yapımı serimize devam ediyoruz. CSS ile yapılan bir çok menü örneği mevcut biz burada bunları katagorize edip her bir katagoriye bir örnek yaparak mantığını anlatmaya çalıyoruz, mantığını anladıktan sonra CSS ile yapılan tüm menüleri yapabileceğimize inanıyorum.
Yazinin tamamini oku »
Bu yazı toplamda 21, bugün ise 0 kez görüntülenmiş
CSS ile Menü Yapmak IV - Yatay Açılır Menüler
Bir önceki makalede dikey açılır menüleri gördük. Bu makalede yatay açılır menülere bir örnek vereceğiz. Html kodumuz aynı olsun.
Bu yazı toplamda 27, bugün ise 0 kez görüntülenmiş
CSS ile Menü Yapmak III - Dikey Açılır Menüler
Bu t
ip menüleri javascript ile yapabiliriz. HTML ve CSS ile de daha esnek, kolay düzenlenebilir ve bir çok web tarayıcısı tarafında desteklenen(IE6 ve öncesi dahil) açılır menü yapılabilir. Aslında javascript’e ihtiyaç olmamasına karşın IE7′den önceki sürümler için javascript kodu gerekmektedir.
Açılır menü yapmak için daha önceki menü örneklerinde olduğu gibi sıralanmamış listeleri(<ul>) kullanacağız. Buradaki fark alt kategorilerin yani üzerine gelince açılacak menünün bir alt sırlanmış liste olarak eklenmesidir.
Bu yazı toplamda 41, bugün ise 0 kez görüntülenmiş
CSS ile Menü Yapmak II - Yatay Menüler
Bir önceki makalede dikey menüye bir örnek yapmıştık. şimdi de yatay menülere bir örnek vereceğiz. Önceki makalede bahsettiğimiz gibi yatay ve dikey menüler belli bir yere kadar kodlaması aynıdır. Biz aynı olan kısmı geçip sonrasına devam ediyoruz.
Kaldığımız yerden devam edersek. Linkleri yatay olarak dizmek için display:inline özelliğini kullanıyoruz:
Bu yazı toplamda 25, bugün ise 0 kez görüntülenmiş
CSS ile Menü Yapmak I - Dikey Menüler
Web sitelerinin vazgeçilmez öğelerinde biridir menüler. Menüler kullanıcının oluşturduğumuz sayfalara hızlı erişimini sağlar. Bir çok site de Ürünler, İletişim, Hakkımızda vb. bölümlerini menü öğesi olarak görürüz. Bu makalede sırasız listeler(<ul>)ve CSS yardımı ile menü yapımını anlatacağız. CSS ile yapılan menüler esnek, kolay düzenlenebilir, güzel görünen ve rollover efekti uygulana bilen menülerdir.
Sırasız listeler(<ul>) ilk olarak listeleme işlemleri için kullanılsa da CSS’in yükselişi ile birlikte menü oluşturmak için kullanılmaya başlandı. Aslında menülerde bir bakıma link listeleri olduğu düşünülürse işlevinin dışında kullanılmadığı da doğru bir tespittir. Kodumuzu yazmaya başlayalım:
Bu yazı toplamda 17, bugün ise 0 kez görüntülenmiş
