Gelişmiş CSS Dersleri

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:53 pm

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:

* Takvim
* Finansal Tablolar
* Çizelgeler
* Plan Listeleri(otobüs, uçak iniş kalkış saat listesi vb.)

Yukarıda verdiğimiz örnekler vb. durumlarda kullanılan tablolar genelde okunması zor ve göze hoş gelmeyen yapılardır. Biz CSS ile bu tabloları daha okunaklı, kodlaması daha kolay ve güzel hale getireceğiz.

Tabloların genel yapısı aşağıdaki gibidir.

1. <table>
2. <tr>
3. <td>… içerik ….</td>
4. </tr>
5. </table>

Yukarıda kullanılan tablo yapısı genelde kullanılan tablo yapısıdır. Ancak tüm araçlara uyumu, erişebilirliği ve kolay kodlama için daha gelişmiş bir tablo kodlaması kullanılmalıdır. Örnek

1. <table cellspacing="1" class="uzerinde" id="golKrallari" summary="Türkiye Süper Ligi’nin son 3 yılında en çok gol atan futbolcu listesi">
2. <caption>1. LİG TARİHİNDEKİ GOL KRALLARI(SON 3 YIL)</caption>
3. <thead>
4. <tr>
5. <th scope="col" abbr="sezon" class="bgYok">SEZON</th>
6. <th scope="col" abbr="adsoyad">ADI-SOYADI</th>
7. <th scope="col" abbr="takım">TAKIM</th>
8. <th scope="col" abbr="maç">MAÇ SAYISI</th>
9. <th scope="col" abbr="gol">ATTIğžI GOL</th>
10. <th scope="col" abbr="ortalama">ORTALAMA</th>
11. </tr>
12. </thead>
13. <tbody>
14. <tr>
15. <th scope="row" abbr="03-04" class="baslikBir">2003 - 2004</th>
16. <td class="tabloZRFark">ZAFER BİRYOL</td>
17. <td class="tabloZRFark">Konyaspor</td>
18. <td class="tabloZRFark">34</td>
19. <td class="tabloZRFark">25</td>
20. <td class="tabloZRFark">0.74</td>
21. </tr>
22. <tr>
23. <th scope="row" abbr="04-05" class="baslikIki">2004 - 2005</th>
24. <td>FATİH TEKKE</td>
25. <td>Trabzonspor</td>
26. <td>34</td>
27. <td>31</td>
28. <td>0.91</td>
29. </tr>
30. <tr>
31. <th scope="row" abbr="05-06" class="baslikBir">2005 - 2006</th>
32. <td class="tabloZRFark">GÖKHAN ÜNAL</td>
33. <td class="tabloZRFark">Kayserispor</td>
34. <td class="tabloZRFark">32</td>
35. <td class="tabloZRFark">25</td>
36. <td class="tabloZRFark">0.78</td>
37. </tr>
38. </tbody>
39. <tfoot>
40. <tr>
41. <td colspan="6">Kaynak: Fatih Futbol Okulu(F.F.O)</td>
42. </tr>
43. </tfoot>
44. </table>

Tablomuzun içeriği bu kadar kısa olmasına karşın ne kadar okunaksız ve kötü göründüğü ortada. Bizim amacımız web sayfaları kodlarken sadece bilgi sunmak değildir. Bilgiyi en kullanışlı ve güzel şekilde sunmaktır.

Burada normal tablo kodlamasından farklı olan etiketleri açıklarsak. <table> kodu içindeki summary özelliği ile tablo içeriğinin bir özet açıklaması yapılmıştır. Bu özellik web değilde cep telefonu, pda vb. araçlarda tablo okuması için önemlidir. <caption> özelliği tablonun başlığını oluşturmak için üretilmiş bir etiketitir ve bu amaçla burada kullanılmıştır.(Bir çok sitede tablo başlığı için <p>, <div> ve <hx> kullanılmaktadır. Bu kullanımların yanlış olduğunu burdan belirtelim.) <th> etiketi bu alanın bir başlık olduğu belirtir, <th> etiketi içerisinde kullanılan scop="col" ve scop="row" özelikleri yine küçük ekranlı araçlar için başlık ile içerik arasındaki ilişkiyi göstermesi bakımından önemlidir. abbr özelliği ise küçük ekranlarda başlığın sığmaması halinde görüntülenecek başlığın kısaltmasını içerir.

Ayrıca thead, tbody ve tfoot etiketleri tabloyu 3 alana böler ve CSS ile XHTML etiketleri arasında daha fazla etkileşim yapmamızı sağlar.

Tabloları CSS ile güzelleştirirken renk seçimi önemlidir. Birbirine uyumlu renkleri seçmek her zaman güzel sonuçlar doğuracaktır. Ben biraz sade tasarımları beğendiğim için gri ağırlıklı bir tablo yapacağım. Genelde tablolara uygulanacak renklerin seçimini yaparken web sitesinin tasarımına uygun renkler seçilmelidir. Bu yaptığımız web sitesindeki tutarlılığı korumamızı sağlayacaktır. Benim seçtiğim renkler:

Tablo Renkleri

CSS kodunu yazmaya başlayalım:

1. body {
2. font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
3. }
4. #golKrallari {
5. width: 700px;
6. }

Tablonun başlığını(<caption>) düzenleyelim

1. caption {
2. padding: 0 0 5px 0;
3. font: 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
4. text-align: right;
5. }

Daha sonra kolon başlıklarını <th> kodlayalım. Burada başlıkların daha güzel görünmesi için kolon başlıklarının zeminine degradeli bir zemin resmi koyalım. Ayrıca kolon ve satır başlıklarının birleştiği sol üst hücreyi diğerlerinden ayıracak(.bgYok) bir zemin resmi ve rengi olmadan kodlayalım:

1. th {
2. font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
3. color: #474747;
4. border-bottom:1px solid #E0E0E0;
5. border-right:1px solid #E0E0E0;
6. border-top:1px solid #E0E0E0;
7. letter-spacing: 2px;
8. text-align: left;
9. padding: 6px;
10. background: #F3F3F3 url(images/tablo_baslik_zr.gif) repeat-x;
11. }
12. th.bgYok {
13. border-top: 0;
14. border-left: 0;
15. border-right: 1px solid #E0E0E0;
16. background: none;
17. }

Kolon başlıkları ile satır başlıklarını bir birinden ayıralım. Ayrıca Satır başlıklarına bir top ikonu koyalım. Burada dikkat edilmesi gereken bir konuda birbirini takip eden tablo satırlarının zemin rengini farklı farklı tanımlayarak tablo okunurluluğunu arttırmaktır. Biz burada bir satırın zemin rengini #F3F3F3 diğer satırın zemin rengini de #FFF yaptık.
Burada ikonlardan farklı olanın bordo-mavi olması ve bu satırın Fatih Tekke’ye denk gelmesi tamamen bir rastlantı dır :-)

1. th.baslikIki {
2. border-left: 1px solid #E0E0E0;
3. border-top: 0;
4. padding-left:25px;
5. background: #fff url(images/top2.gif) 5px no-repeat;
6. }
7. th.baslikBir {
8. border-left: 1px solid #E0E0E0;
9. border-top: 0;
10. padding-left:25px;
11. background: #F3F3F3 url(images/top.gif) 5px no-repeat;
12. }

Veri içeren hücreler içinde kenarlık, zemin rengi, font rengi ve padding tanımlaması yapalım ve burada da birbirini takip eden satırlar için farklı renk uygulamasını yapalım. Bunun için bir sınıf oluşturup(.tabloZRFark) farklı satırlara atayalım.

1. td {
2. border-bottom:1px solid #E0E0E0;
3. border-right:1px solid #E0E0E0;
4. background: #fff;
5. padding: 6px;
6. color: #474747;
7. font:11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
8. }
9. td.tabloZRFark {
10. background: #F3F3F3;
11. color: #474747;
12. }

Tablonun alt kısmı içinde aşağıdaki kodu yazalım:

1. tfoot tr td{
2. text-align:right;
3. border-left:1px solid #e0e0e0;
4. border-bottom:2px solid #e0e0e0;
5. font:italic 9px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
6. }

Son olarak farenin imleci üzerine gelen satırın zemin rengini değiştirerek okunurluluğu arttırmak için aşağıdaki kodları yazalım:

1. #golKrallari tr.uzerineGelince td, #golKrallari tr.uzerineGelince th{
2. background:#474747;
3. color:#f3f3f3;
4. }

fare imlecinin satır üzerine geldiğinde çalışacak javascript kodu:

1. function uzerinegelince()
2. {
3. if (document.getElementById && document.createTextNode)
4. {
5. var tables=document.getElementsByTagName(’table’);
6. for (var i=0;i<tables.length;i++)
7. {
8. if(tables[i].className==’uzerinde’)
9. {
10. var trs=tables[i].getElementsByTagName(’tr’);
11. for(var j=0;j<trs.length;j++)
12. {
13. if(trs[j].parentNode.nodeName==’TBODY’)
14. {
15. trs[j].onmouseover=function(){this.className=’uzerineGelince’;return false}
16. trs[j].onmouseout=function(){this.className=”;return false}
17. }
18. }
19. }
20. }
21. }
22. }

Bu kodu tetiklemek için:

1. <body onload="uzerinegelince()">

kodunu yazalım. Fare imlecinin üzerine geldiğinde satır zemin rengi ve metin renginin değişmesi bölümün de bir iki dikkat edilmesi gereken yer var. İlki tablodaki class="uzerinde" ve javasciriptteki if(tables[i].className==’uzerinde‘) aynı olması, ikincisi javascriptteki

1. trs[j].onmouseover=function(){this.className=’uzerineGelince‘;return false}

ile

1. #golKrallari tr.uzerineGelince td, #golKrallari tr.uzerineGelince th{
2. background:#474747;
3. color:#f3f3f3;
4. }

aynı olması. Evet tablomuz sona erdi.

Sonuç sayfasını görmek için tıklayınız.
Kodlar Windows ortamında Firefox 2.0, IE 5.01, IE7 ve Opera 9.0 web tarayıcıları ile test edilmiştir.
Kaynaklar

* http://veerle.duoh.com/
* http://icant.co.uk/ (CSS ile yapılmış bir çok tablo örneği)
* http://alistapart.com/

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:54 pm

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.

Makalemizin başlığını "CSS ile Erişilebilir Formlar Yapmak" koyduk peki bu Erişilebilirlik(Accessible) nedir? Erişilebilirlik kullanıcının bir çok araç(bilgisayar, cep telefonu, pda vb.) ve durumda sayfa ve öğelerine en kolay ve düzgün bir şekilde erişebilmesidir. Web standartlarına uygun kodlamanın en önemli amaçlarından biridir Erişilebilirlik.
Basit Form yapılarının CSS ile kodlamak

Basit bir form yapısını planlayarak başlayalım. Web sitelerinde en çok kullanılan formlar kullanıcı giriş formlarıdır. Beraberce CSS ile planlanmış bir kullanıcı girişi formu yapalım. Xhtml kodunu yazalım.

1. <form action="/gonder/login" id="kullaniciGiris" method="post">
2. <dl>
3. <dt><label for="ad">Kullanıcı Adı :</label></dt>
4. <dd><input type="text" id"ad" name="ad" /></dd>
5. <dt><label for="eposta">Eposta:</label></dt>
6. <dd><input type="text" id="eposta" name="eposta" /></dd>
7. <dt><label for="hatirla">Beni hatırla</label></dt>
8. <dd><input type="checkbox" id="hatirla" name="hatirla" /></dd>
9. <dt><input type="submit" value="Gönder" /></dt>
10. </dl>
11. </form>

Login Ekranının Firefox Ekran görüntüsü

Bu tip küçük form sayfalarında tanım listelerinin(dl, dd ve dt) kullanılması düzen ve kullanım kolaylığı açısından çok önemlidir. <label> etiketinin kullanılması iki açıdan önemlidir. İlki küçük ekranlı araçlarda(cep telefonu,pda vb.) form elementlerinin kullanımını kolaylaştırır label/ID ilişkisi ile. İkinci olarak radyo buton ve işaret kutularında metin ile tümleşik hareket etmemizi sağlar, yani Beni hatırla metnine tıkladığımızda işret kutusu işlevi gösterir.

Şimdi CSS ile form elemanlarını yerlerine koyalım.

Bu formu tablo ile yaptığımız gibi yanyana koymak için genişlik ve float tanımı yapıyoruz.

1. form dt
2. {
3. width: 8em;
4. float: left;
5. text-align: right;
6. margin-right: 0.5em;
7. display: block;
8. }

Sağdaki form elemanları ile soldakiler arasına boşluk bırakmak için genişlik değeri veriyoruz.

1. form dd {
2. margin-left: 4.5em;
3. }

Bir çok sitede kullanılan kullanıcı giriş(login) formlarını CSS yardımı ile kodladık. Şimdi görünüşünü düzeltelim.

Metinlerimizi font tanımı yapalım:

1. form dt {
2. width: 8em;
3. float: left;
4. text-align: right;
5. margin-right: 0.5em;
6. display: block;
7. font:12px Arial, Helvetica, sans-serif;
8. }

Metin giriş alanlarını standart görünümünden çıkarıp kendi istediğimiz renklere büründürelim.

1. <dd><input name="ad" type="text" class="metinAlani" id"ad" /></dd>
2. …
3. input.metinAlani
4. {
5. color: #781351;
6. background-color: #b5c9e2;
7. border: 1px solid #31557f;
8. font:10px Arial, Helvetica, sans-serif;
9. }

Gönder düğmesinin şeklini değiştirelim. Burada renk uyumu form alanlarımızın daha hoş görünmesi için önemlidir. Renk seçimi yaparken genelde site bütünlüğünü bozmamak için site genel renk değerleri seçilir. Ama bu bir kural değildir.

1. <dt><input type="submit" class="gonder" value="Gönder" /></dt>
2. …
3. input.gonder
4. {
5. color: #224059;
6. background-color: #b5c9e2;
7. border-top: 2px #cce3ff solid;
8. border-left: 2px #cce3ff solid;
9. border-bottom: 2px #31557f solid;
10. border-right: 2px #31557f solid;
11. font:bold 12px Arial, Helvetica, sans-serif;
12. }

Yukarıda gönder düğmesinin kenarlık renk seçimini yaparken sağ ve alt kısma daha koyu, sol ve üst kısma daha açık renk vererek düğmemize 3 boyutlu bir görünüm kazandırdık.

Şimdide form alanını bir bütün haline getirelim ve forma bir başlık yazalım. Bu işlemler için Html’in <fieldset> ve <legend> etiketlerini kullanacağız.

1. <form action="/gonder/login" id="kullaniciGiris" method="post">
2. <fieldset>
3. <legend>Kullanıcı Girişi</legend>
4. <dl>
5. <dt><label for="ad">Kullanıcı Adı:</label></dt>
6. <dd><input name="ad" type="text" class="metinAlani" id"ad" /></dd>
7. <dt><label for="eposta">Eposta:</label></dt>
8. <dd><input name="eposta" type="text" class="metinAlani" id="eposta" /></dd>
9. <dt><label for="hatirla">Beni hatırla</label></dt>
10. <dd><input type="checkbox" id="hatirla" name="hatirla" /></dd>
11. <dt><input type="submit" class="gonder" value="Gönder" /></dt>
12. </dl>
13. </fieldset>
14. </form>

CSS ile yeni eklediğimiz alanların görünümünü düzeltelim.

1. fieldset
2. {
3. border: 1px solid #31557f;
4. width: 15em
5. padding-bottom:0.5em;
6. }
7. legend
8. {
9. color: #224059;
10. background-color: #b5c9e2;
11. border: 1px solid #31557f;
12. padding: 2px 6px
13. }

Sonuç sayfasını görmek için tıklayınız.

Formumuzun son hali yukarıda göründüğü gibi olacaktır. Bir sonraki makalede daha karışık(gelişmiş) formların css ile yapılmasını göreceğiz.

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:55 pm

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.

CSS ile Form

Kodlamayı yaparken dikkat edeceğiz konu kullanıcıyı yormayan güzel görünümlü ve erişilebilirliği yüksek formlar hazırlamaktır. Bir önceki yazımızda fieldset ve legend ve label etiketlerinden bahsettiğimiz için burada bu etiketler hakkında tekrar bir bilgi vermeyeceğiz. Diğer makalelerden farklı olarak bu makalede tüm kodları verip sonra açıklamalarını yapacağız, bunun nedeni form alanlarına ait tanımların bir çoğunun genel tanımlama olması ve bir tanımın bir çok etiketi etkilemesidir. XHTML Kodumuzu yazalım:

1. <form action="gonder.html" method="post" id="formset">
2. <fieldset>
3. <legend>Genel Bilgiler</legend>
4. <label class="adAlani">Ad <em>*</em>
5. <input name="ad" type="text" id="ad" value="" />
6. </label>
7. <label class="soyadAlani">Soyad <em>*</em>
8. <input name="soyad" type="text" id="soyad" value="" />
9. </label>
10. <label class="adresAlani">Ev Adresi <em>*</em>
11. <input name="adres" type="text" id="adres" value="" />
12. </label>
13. <label class="sehirAlani">Şehir <em>*</em>
14. <input name="sehir" type="text" id="sehir" value="" />
15. </label>
16. <label class="postakoduAlani">Posta Kodu <em>*</em>
17. <input name="postakodu" type="text" id="postakodu" value="" />
18. </label>
19. <label class="epostaAlani hata">Eposta *
20. <input name="eposta" type="text" id="eposta" value="" class="hata" />
21. </label>
22. <label class="telAlani">Telefon<input name="tel" type="text" id="tel" value="" />
23. </label>
24. </fieldset>
25. <fieldset>
26. <legend>Konu <em>*</em></legend>
27. <input id="radiobutton_1" type="radio" name="radiobutton_type" value="" />
28. <label class="konuRadyoButon" for="radiobutton_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </label>
29. <input id="radiobutton_2" type="radio" name="radiobutton_type" value="" />
30. <label class="konuRadyoButon" for="radiobutton_2">Cras diam. Suspendisse potenti. In dictum bibendum est. Aliquam semper. Sed vel massa. Praesent imperdiet nisi eget lacus. </label>
31. <input id="radiobutton_3" type="radio" name="radiobutton_type" value="" />
32. <label class="konuRadyoButon" for="radiobutton_3">Phasellus quis enim. </label>
33. <input id="radiobutton_4" type="radio" name="radiobutton_type" value="" />
34. <label class="konuRadyoButon" for="radiobutton_4">Vestibulum ut lectus ac leo luctus aliquam. </label>
35. </fieldset>
36. <fieldset>
37. <legend>Düşünceleriniz</legend>
38. <label class="aciklamaAlani">Düşüncelerinizi aşağıdaki alana yazınız.<br /><textarea name="describe" cols="35" rows="5"></textarea>
39. </label>
40. </fieldset>
41. <fieldset>
42. <legend>Onay Alanı</legend>
43. <input id="checkbox_1" type="checkbox" name="kabul" value="y" /><label for="checkbox_1" class="onayAlaniIsaretKutusu">Site kurallarını kabul ediyorum.</label>
44. <input id="checkbox_2" type="checkbox" name="kabul" value="y" /><label for="checkbox_2" class="onayAlaniIsaretKutusu">Site kurallarını kabul etmiyorum.</label>
45. </fieldset>
46. <blockquote><strong>Not:</strong> Yanında (<em>*</em>) işareti olanlar zorunlu alanlardır.</blockquote>
47. <input type="submit" name="submit" value="GÖNDER" class="formbutton" />
48. </form>

Yukarıdaki kodlama aslında bir çok açıdan basit yapılı formalara benziyor. "Bir çok karmaşık yapı basit yapıların birleşiminden oluşur" genel kabulü tam durumumuzu açıklayan cümle. Bu kodlamanın farkı normal akış dışına çıkacak(yani iki kolonlu olacak yerlerde) elementlere id tanımı yaparak konumlandırma işlemi yapmaktır. Şimdi sıra CSS kodunu yazmaya geldi.

1. /* genel stiller */
2. * {
3. margin: 0;
4. padding: 0;
5. }
6. body {
7. font: 12px/14px Arial, Helvetica, sans-serif;
8. background-color:#07A;
9. text-align: center;
10. margin:20px 0;
11. }
12. /* form stilleri */
13. form#formset {
14. width: 360px;
15. margin: 0 auto;
16. text-align: left;
17. color:#fff;
18. }
19. form#formset fieldset {
20. margin: 0 0 1em 0;
21. padding: 1.5em 1.5em 0 1.5em;
22. border: #DDD 1px solid;
23. }
24. form#formset fieldset legend {
25. font-weight: bold;
26. color: #fff;
27. padding:0 0.5em;
28. }
29. form#formset label {
30. display: block;
31. width: 290px;
32. font-size: 12px;
33. line-height: 14px;
34. padding: 0px 0px 12px 0px;
35. }
36. form#formset fieldset input {
37. display: block;
38. margin-top: 3px;
39. border:1px solid #fff;
40. border-left:5px solid #fff;
41. background-color:#09c;
42. color:#ffc;
43. }
44. form#formset label.adAlani, form#formset label.adresAlani,
form#formset label.sehirAlani,
form#formset label.epostaAlani {
45. clear: left;
46. }
47. form#formset label.adAlani,
form#formset label.soyadAlani,
form#formset label.sehirAlani,
form#formset label.epostaAlani,
form#formset label.telAlani {
48. float: left;
49. margin: 0px 10px 0px 0px;
50. width: 150px;
51. }
52. form#formset label.adAlani input,
form#formset label.soyadAlani input,
form#formset label.epostaAlani input,
form#formset label.sehirAlani input,
form#formset label.telAlani input {
53. float: left;
54. width: 150px;
55. padding: 0px;
56. }
57. form#formset label.postakoduAlani {
58. float: left;
59. width: 80px;
60. }
61. form#formset label.postakoduAlani input {
62. float: left;
63. width: 80px;
64. }
65. form#formset label.adresAlani {
66. float: left;
67. width: 310px;
68. margin: 0px 0px 0px 0px;
69. }
70. form#formset label.adresAlani input {
71. float: left;
72. width: 310px;
73. padding: 0px;
74. }
75. form#formset fieldset input#radiobutton_1,
form#formset fieldset input#radiobutton_2,
form#formset fieldset input#radiobutton_3,
form#formset fieldset input#radiobutton_4 {
76. clear: left;
77. float: left;
78. padding: 0px;
79. border:0;
80. margin: 0px 0px 0px 0px;
81. background-color:#07a;
82. }
83. form#formset label.konuRadyoButon {
84. clear: none;
85. margin: 0px 0px 0px 25px;
86. padding: 0px 0px 15px 0px;
87. }
88. form#formset fieldset input#checkbox_1,
form#formset fieldset input#checkbox_2,
form#formset fieldset input#checkbox_3 {
89. clear: both;
90. float: left;
91. padding: 0px;
92. margin: 0px;
93. border:0;
94. background-color:#07a;
95. }
96. form#formset label.onayAlaniIsaretKutusu {
97. clear: none;
98. margin: 0px 0px 0px 25px;
99. padding: 0px 0px 15px 0px;
100. }
101. form#formset textarea {
102. display: block;
103. margin-top: 3px;
104. border:1px solid #fff;
105. border-left:5px solid #fff;
106. background-color:#09c;
107. color:#ffc;
108. }
109. form#formset blockquote{
110. margin-bottom:10px;
111. }
112. form#formset fieldset em, form#formset blockquote em{
113. color:#ff0;
114. }

Yukarıdaki kodlamada önemli görülen tanımları biraz daha açıklamaya çalışalım:

* Genel Seçicisi (*{}) kullanarak tüm elementlerin margin ve padding’lerini sıfırlıyoruz, böylece tüm elementler için ayrıca bu tanımı yapmaya gerek duymuyoruz(özel durumlar hariç.)
* body seçicisine atadığımız özelikler sayfayı ortalamak için text-align tanımı yapıldı.
* form#formset şeklinde forma id vermemizin nedeni sayfa içinde eğer birden fazla form olursa veya sitede genel bir css dosyası kullanıyorsak diğer formları etkilememek. Burada yapılan tanımlar genel tanımlardır.
* form#formset fieldset tanımında form alanlarını bir çerçeve içine aldık ve içerikle kenarlık arasına boşluk koyduk. Her bölümü ayrı çerçeveye almamızın nedeni bölümler arasındaki farka vurgu yapmaktır.
* form#formset fieldset legend genel tanımı ile form bölümlerinin başlıklarına genel tanımlama yaptık.
* form#formset label tanımlaması ile formdaki tüm label’lar düşünülerek genişlik ve mesafe tanımları yapılmıştır.
* form#formset fieldset input tanımlaması ile genel kullanıcı girişi(input) görünüm yerine kendi görünümümüze uygun tanımlar yapılmıştır.
* form#formset label.adAlani, form#formset label.adresAlani,
form#formset label.sehirAlani,
form#formset label.epostaAlani seçicilerine clear:left tanımı yapılarak bu sınıflara ait alanları formun soluna yerleştiriyoruz.
* Daha sonra Formun Genel Bilgiler kısmı içindeki form elementlerine genişlik ve float tanımı yapılıyor. Aynı şekilde kullanıcı girişlerinede(input) aynı tanımlar yapılıyor.
* 57 - 74 satırları arasında Genel Bilgi Alanındaki diğer alanlardan farklı olan Ev adresi ve Posta Kodu alanlarına özel tanımlamalar yapılıyor. Genelde css kodlarken başta genel tanımalar yapılır sonra genelden farklı olan özel tanımlamalar yapılır.
* 75 - 87 satırları arasında Form alanının Konu kısmı içeriğindeki radyo butonları ve içerik kısımlarına ait konumlandırma ve mesafe değerleri tanımlanmıştır.
* 88 - 99 satırları arasında Form alanının Onay kısmı içeriğindeki işaret kutuları ve içerik kısımlarına ait konumlandırma ve mesafe değerleri tanımlanmıştır.
* form#formset textarea tanımlaması ile düşüncelerimiz alanı içindeki metin alanı tanımları girilmiştir.
* Genelde forumlar oluşturulurken kullanıcıdan bazı alanların zorunlu doldurulması istenir. Bunu için form#formset blockquote tanımlaması yapılmıştır.

Yukarıda gelişmiş form kodlamasını gördük son olarak formda doldurulması gereken bir alanın doldurulmaması halinde çıkacak uyarı mesajı ve bilginin girilmesi gereken alanın kullanıcının daha kolay görmesi için stil tanımını yapalım. XHTML kodunu başına

1. <div class="hata">
2. Dikkat aşağıda sarı renk ile belirtilen yerlerde hata var.
3. </div>

tanımlaması ve hataya neden olan alana(mesela e-posta girilmemiş olsun) sınıf tanımlaması ekleyelim.

1. <label class="epostaAlani hata">Eposta *
2. <input name="eposta" type="text" id="eposta" value="" class="hata" />

CSS kodunu ekleyelim

1. form#formset fieldset input.hata {
2. display: block;
3. margin-top: 3px;
4. border:1px solid #ff0;
5. border-left:5px solid #ff0;
6. background-color:#ccc;
7. color:#ffc;
8. }
9. form#formset fieldset label.hata {
10. color:#ff0;
11. font-weight:bold;
12. }
13. div.hata {
14. background:#FFFFCC url(images/hata.png) no-repeat scroll 5px;
15. border:1px solid #FFCC66;
16. margin:0pt 0pt 10px;
17. padding:5px 10px 5px 35px;
18. color:#000;
19. }

Hata mesajının yanına bir ünlem ikonu koyduk ve farklı zemin rengi ve kenarlığı ile kullanıcının dikkatini buraya çektik. Ayrıca hatanın meydana geldiği alanı sarı renk ile tanımlayarak daha dikkat çekici yaptık. Dikkat ederseniz amaç devamlı kullanıcıya formumuzu daha anlaşılabilir ve kolay erişilebilir yapmak.

En son gönder butonunun css kodunu yazalım.

1. .formbutton{
2. cursor:pointer;
3. border:0;
4. background:#999;
5. color:#666;
6. font-weight:bold;
7. padding: 1px 2px;
8. background:url(images/buton_bg2.gif) repeat-x left top;
9. }

Buton zeminine degrade 1px genişliğinde bir resim koyarak hoş görünümlü bir buton elde ettik.

Sonuç sayfasını görmek için tıklayınız.

Aşağıda kaynaklar kısmında da erişebileceğiniz bir çok form stilleri ve tasarımları mevcut göz atmanızı öneririm. Amaç web standartlarına uygun ve kullanıcı taraflı formlar yapmak. Kodlama aşağıdaki web tarayıcılarında test edilmiştir.

* Firefox 1.0 +
* Internet Explorer 5.5 +
* Opera 7.54 +

Not: Görünümde Firefox ve Internet Explorer arasında ufak farklılıklar mevcut, bu farklılıkların çok ufak olması nedeni ile bir düzeltme kodu(fix) yazma gereği duymadık.
Kaynaklar

* http://www.webcredible.co.uk
* http://www.websiteoptimization.com/
* http://www.picment.com/
* http://www.dynamicdrive.com/
* http://www.cssplay.co.uk/
* http://www.456bereastreet.com/
* http://www.smashingmagazine.com/
* http://www.skyrocket.be/
* http://www.subtraction.com/
* http://www.stuffandnonsense.co.uk/
* http://paularmstrongdesigns.com/
* http://nidahas.com/
* http://www.alistapart.com/
* http://www.roscripts.com/

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:55 pm

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 konuyu yazmamın sebebi RSS besleyicimi feedburner’a ekledikten sonra sağ kolonun üstüne RSS besleyici ikonu ve linki eklemem ve altına ayraç olarak <hr /> etiketini koyduktan sonra karar verdim. Görünüm hoş olmayan etiketi nasıl düzenlerim diye araştırdım ve sonucu sizlerle paylaşmak istedim.
<hr> Elementi hangi özellikleri destekliyor

* width ve height değerini tüm web tarayıcıları destekliyor.
* border özelliği Explorer ve Firefox destekliyor. Opera desteklemiyor.
* IE color özelliğini destekliyor.
* Firefox ve Opera background-color özelliğini destekliyor.
* Tüm tarayıcılar background-image özelliğini destekliyor ancak Explorer ve Opera’da bazı sorunları var.

1. hr {
2. border: 0;
3. width: 80%;
4. }

Bu kodlama IE ve Opera’da düzgün görünecektir. Ancak Firefox’ta görünmeyecektir. background-color ekleyerek kodumuzu Firefox’a da uygun hala getiriyoruz.

1. hr {
2. color: #f00;
3. background-color: #f00;
4. height: 5px;
5. }

<hr / > elementine stil ataması yaparken color ve background-color özelliklerin her ikisini de kullanmalıyız. Yüksekliği 3px’in altındaki değerler için Opera’nın eski sürümleri sorun çıkarıyor.
<hr /> hizalama

<hr /> etiketini hizalamada IE için text-align özelliği, Firefox ve Opera için margin özelliği kullanılır.

1. hr {
2. text-align: right; /* ie icin */
3. margin-right: 0; /* diger brovserlar icin */
4. }

<hr> etiketini <hr /> şeklinde kullanmak Xhtml kuralları açısından önemlidir. Bildiğiniz gibi Xhtml’de her etiket mutlaka kapatılmalıdır. Eğer etiketin bir kapatma etiketi yoksa kapama işaretinden önce bir bölme işareti(/) konarak bu işlem gerçekleştirilir. Örn: <img src="" />, <br />, <meta /> gibi.
<hr/> resim kullanmak

Web sitelerinde bölümleri ayırmak için basit resimler kullanırız. Bu amaçla <hr /> elementini kullanabiliriz. Bu işlem için background-image özelliğini kullanmalıyız. Tabi bir kaç sorunumuz çıkacaktır farklı web tarayıcılarda. Firefox gayet güzel çalışırken IE6- ve Opera’nın eski sürümlerinde sorun çıkarır. resmin etrafında kenarlık çıkarır. bunu engellemek için aşağıdaki şekilde kodlamamızı yapmalıyız.

1. <div class=”hr”><hr /></div>

ve CSS kodu

1. div.hr {
2. height: 15px;
3. background: #fff url(/images/ayrac_zr.gif) no-repeat scroll center;
4. height:28px;
5. width:180px;
6. }
7. div.hr hr {
8. display: none;
9. }

Tüm web tarayıcılarında sorunsuz çalışacaktır. Yukarıdaki kodda <hr /> etiketi bir <div> içine alarak css ile <hr /> etiketi görünmez yapılarak esnek bir çözüm sağlanmıştır. Fazladan bir katman eklemek standartlara uygun kodlama için istenmeyen bir durum olsa da kodlama esnekliği ve tüm web tarayıcılarında aynı sonucu vermesi nedeni ile kullanılabilir bir kodlamadır.

Burada bir iki ufak sorun var. Birincisi uygulanan zemin resmi çıktı alırken görünmemesidir. Bunun için yazcı için CSS kodlarken bu özelliği es geçmeliyiz. İkincisi <hr> elementine margin ve/veya padding tanımı yaptığımızda bazı web tarayıcılarında kaymalara neden oluyor, bu sorunu çözmek için margin ve/veya padding değerini <div> vermeliyiz.
Kaynaklar

* http://www.sovavsiti.cz/css/hr.html
* http://sonspring.com/journal/styling-hr
* http://bitesizestandards.com/bites/styling-horizontal-rules-with-css
* http://www.blakems.com/experimental/hr/
* http://www.saila.com/usage/tips/defn.shtml?hr
* http://www.sitepoint.com/examples/hr/

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:56 pm

(X)Html - CSS : 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.

1. <h1>CSS Dersleri</h1>

W3C başlıklarda kullanmamız için<h1>,<h2>,<h3>,<h4>,<h5> ve <h6> olmaküzere 6 adet başlık çeşidini bizim kullanımımıza sunmuş. Önem sırasına göresıralanmıştır, en önemlisi <h1>’dir.

W3C’nin başlık etiketlerinin kullanımının bize sağladığı avantajları sırası ile inceleyelim:
Hiyerarşi

Başlıklar doküman hiyerarşisini sağlamamıza yardımcı olur. Bir çok websitesinde başlıklar belli bir hiyerarşiye göre sıralanır ve bu hiyerarşi metninanlaşılabilirliğini arttır ve sayfaları bir düzene sokar. <h1> ve<h6> sıralaması hiyerarşi için biçilmiş kaftandır. Örnek için tıklayınız.
Arama Motoruna Uygunluk

Arama motorları için <hx>’ler çokkullanışlıdır. <hx> kullanımında arama motorlarıküçük çaba ile sayfadaki başlıkları öğrenebilmektedirler.

Arama motorları <title> içindeki ve<meta> etiketi içindeki kelimeleri sayfa içinde ararlar bulamadıklarındao sayfayı sıralamadan düşürürler. Ancak başlıkla ilgi üzerine çekilmişkelimeler arama motorları için bir velinimettir. Tabi arama motorlarının bizimsitemizi indekslemeside bizim için bir velinimettir.
Kolay Şekillendirme

Kolay şekillendirilir. Çünkü <h1> etiketi<b> ve <p> gibi CSS de tekil olarak atama yapılan bir etikettir. Bunedenle CSS tanımlaması kolay olacaktır.

<h1> vd. başlıklar CSS tanımlaması olmasa dabaşlıklarınızı kalın ve büyük font değerlerinde gösterecektir. Tüm araçlarda ve eskisürüm tarayıcılarda başlıklar ayırt edilecektir.

Sayfalarımızda <h1> kullanarak kolaylıksağlarız. Çünkü <h1> tekil etiketlerdendir. Eğer bir atama yaptıktansonra buna bir ekleme yapmak istersek CSS ile bunu çok kolay yaparız Örneğin

1. <h1>CSS Dersleri </h1>

Bu başlığın boyutunu, rengini ve font-şeklinideğiştirebiliriz CSS ile

1. h1 {
2. font-family: Arial, sans-serif;
3. font-size: 24px;
4. color: #369;
5. }

Biz burada çok basit bir şekilde tüm başlıklarıarial font, 24 piksel boyut ve mavi renk ataması yaptık.

Daha sonra bu başlığın altına 1 piksel boyutundabir gri alt çizgi çizmek istedik.

1. h1 {
2. font-family: Arial, sans-serif;
3. font-size: 24px;
4. color: #369;
5. padding-bottom: 4px;
6. border-bottom: 1px solid #999;
7. }

padding-bottom ile çizgi ile başlıkarasındaki boşluğu ayarladık ve border-bottom değeri ile debaşlık altına çizgiyi çizdik.
Değişebilir İkonlar

CSS’i kullanarak başlıklarımızın soluna zemin resmi olarak bir ikon koyabiliriz. Bu metot ile başlıklardaki bir değişiklikile tüm sitedeki başlıklar değişecektir. Ayrıca tüm başlıklar için kullanılacak ikonları bir resim halinde hazırlanıp kullanım kolaylığı sağlanabilir. Bir örnek yaparsak

Başlıklar

Tüm başlıkların ikonları tek bir
resim olarak hazılranmış hali

Resim hazırlanırken ikon aralarındaki farkı orantılı ayarlar isek kodlama yaparken bize kolaylık sağlayacaktır. Aşağıda bunu daha iyi göreceğiz.

Html kodları:

1. <h1 class="hata">Hakkımızda </h1>
2. <p>At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia d dereud facils est er expedit distinc peccand quaerer en imigent cupidat. Incita visset, accom ex robore ad quam vis vadisen vlavis confecs nis revinc tae.</p>
3. <h1 class="yemek">Ürünler</h1>
4. <p>Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Situs era eod oppi dorum, ut posta. </p>
5. <h1 class="yaz">Bize Yazın</h1>
6. <p>Incita visset, accom ex robore ad quam vis vadisen vlavis confecs nis revinc tae. </p>
7. <h1 class="yardim">Yardım</h1>
8. <p> At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia ddereud facils est er expedit distinc peccand quaerer en imigentcupidat. Incita visset, accom ex robore ad quam vis vadisen vlavisconfecs nis revinc tae.</p>

CSS kodları:

1. h1.hata{
2. font:bold 34px/35px "Lucida Grande",Arial, Helvetica, sans-serif;
3. color: #3A45A1;
4. background: url(images/basliklar.gif) 1px 3px no-repeat;
5. padding-left: 40px;
6. }
7. h1.yemek{
8. font:bold 34px/35px "Lucida Grande",Arial, Helvetica, sans-serif;
9. color: #A6685A;
10. background: url(images/basliklar.gif) 1px -40px no-repeat;
11. padding-left: 40px;
12. }
13. h1.yaz{
14. font:bold 34px/35px "Lucida Grande",Arial, Helvetica, sans-serif;
15. color: #36393B;
16. background: url(images/basliklar.gif) 1px -80px no-repeat;
17. padding-left: 40px;
18. }
19. h1.yardim{
20. font:bold 34px/35px "Lucida Grande",Arial, Helvetica, sans-serif;
21. color: #C90A0A;
22. background: url(images/basliklar.gif) 1px -120px no-repeat;
23. padding-left: 40px;
24. }

Sol tarafa ikon konduğu için yazı ile ikon arasındaki mesafeyi ayarlamak için padding-left değeri40 piksel atanmıştır ve zemin resmi olarakta bir resim tekrarsız olarak konmuş ve font değeri 34px ve satır yüksekliği 35px tanımlanarak ikon yazı oranı sağlanmıştır.

Dikkat ederseniz genelde her başlık için değişen sadece renk ve zemin resmi konumudur. Aslında bu başlıklar için genel bir sınıflandırma yapıp farklı özellikleri için her birine özel tanımlarda yapabilirdik. Yukarıda yazdığımız kod daha genel bir kod yazımı için uygundur.

Örneği görmek için tıklayınız.
MetinYerine Resim koyma Metodu ile Başlık Oluşturmak

Bazen başlıkları resim yapmamız gerektiğidurumlar olabilir bunun için Metin Yerine Resim Koyma Metotlarından biriniuygulayabiliriz. Ayrıntılı bilgi için "Metin Yerine Resim/FlashEkleme Teknikleri (Image Replacement)" makalemize göz atın.

* http://www.communitymx.com/content/article.cfm?cid=A1A37
* http://www.paulmichaelsmith.com/blog/examples/headingicons/sample.php
* http://eu.wiley.com/WileyCDA/WileyTitle/productCd-047009754X.html
* http://www.sitepoint.com/books/cssdesign1/
* http://www.friendsofed.com/book.html?isbn=1590593812

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:57 pm

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.

Metin yerine resim eklemek için bir çok teknik geliştirildi ve geliştirilmektedir, bazıları CSS ve resimlerin desteklenmediği tarayıcılarda sorun çıkardığı için web kodlamacısı tarafında kullanımı terkedildi. Biz burada belli başlı 4 metin yerine resim ekleme tekniğini anlatacağız ve avantaj, dezavantajlarını sizlerle paylaşacağız.
1- Fahrner’in Metin Yerine Resim koyma tekniği (Fahrner Image Replacement - FIR)

Todd Fahrner arkadaşımızın ürettiği bu kod en popüler metotlardan biridir. Uygulanması en basit metot olması kullanımını arttırmıştır. Teknik çok basittir yerine resim konacak metin <span> etiketi içine alınır. Xhtml kodu:

1. <h1>
2. <span>Selam</span>
3. </h1>

Metin yerine görünecek resim <h1> etiketine uygulanır: CSS kodu

1. h1 {
2. background:url(selam.gif) no-repeat;
3. width: 62px;
4. height: 19px;
5. font-size:16px;
6. }

ve son olarakta <span> etiketi içindeki metni gizlemek için:

1. span {
2. display: none;
3. }

Örneği görmek için tıklayınız.

Bu yöntem bir çok yönden avantajlıdır ancak son yazdığımız kod biraz problemlidir, Bir çok ekran okuyucu bu kodda sorun çıkaracaktır. Erişilebilirlik açısından eksik bir kodlama tekniğidir. Bu eksikliği gidermek için başka yöntemler geliştirilmiştir.
2- "Phark" Metin Yerine Koyma Tekniği

www.phark.net’in ürettiği bu teknik ekran okuyucuları tarafından görüntülenecektir, bu yönüyle FIR tekniğinden avantajlıdır. Ayrıca fazladan <span> etiketi üretmemesi yönüylede avantajlıdır. Html kodu:

1. <h1>Selam</h1>

FIR tekniğinden farklı olarak bu teknikte text-indent değeri yüksek eksi değer(genelde -999px) verilerek ekranı dışına atılarak üretilir. CSS kodu:

1. h1 {
2. text-indent: -999px;
3. background:url(selam.gif) no-repeat;
4. width: 62px;
5. height:19px;
6. }

Örneği görmek için tıklayınız.

Bu teknik ekran okuyucularda sorunsuz çalışacaktır ancak resim görüntülemeyi iptal eden kullanıcılar bu metot ile kodladığımız sayfalarda sorun yaşayacaktır. Biz bu tekniği CSS ile Menü Oluşturmak V - Resimli Menüler makalemizde uygulamıştık.
3- Gilder/Levin Metin Yerine Koyma Tekniği

Tom Gilder ve Levin Alexander bu kodlamayı geliştirmiştir. Ekran okuyucularında ve resim görüntülemeyi iptal eden kullanıcılarda sorunsuz çalışır. Bu teknikte boş bir <span> etiketi ile yazının üzeri kapatılır, eğer resimleri kapatıp sitenizi ziyaret eden olursa altındaki metni görür.

Bu metot için fazladan <span> etiketi üretilir. Html kodu:

1. <h1>
2. <span></span>Selam
3. </h1>

<h1> etiketinin boyutları resmin boyutları ile aynı atanır ve göreceli olarak konumlandırılır. CSS kodu

1. h1 {
2. width: 62px;
3. height: 19px;
4. position: relative;
5. font-size:16px;
6. }

Ekstradan üretilen <span> etiketi mutlak konumlandırma ile konumlandırarak metnin üzerini kapatırız. Ayrıca boyutları %100 verilerek tam kapanma sağlanır. Son olarakta görünecek resim zemin resmi olarak atanır.

1. h1 span {
2. background: url(selam.gif) no-repeat;
3. position: absolute;
4. width: 100%;
5. height: 100%;
6. }

Örneği görmek için tıklayınız.

Bu metot hem ekran okuyucuları hemde resim göstermeyen tarayıcılarda sorunsuz çalışır. Tek dezavantajı fazladan bir <span> etiketi eklenmesidir.
Fakat bu metodun boş, anlamsız, ekstra bir <span> elementi ile gerçekleştirilmesi, “web anlamlılığı” bakımından iyi bir davranış değil. “Web Anlamlılığı” bize her HTML elementinin bir görevi olması gerektiği ve gereksiz kodlamadan kaçmamızı söylüyor. Mehmet Doğan

Bunların dışında Radu, Leahy/Langridge, Dwyer, Lindsay ve Shea Enhancement Teknikleride mevcuttur. Ayrıca hala bir çok teknik çıkarılmaktadır.
4- Inman Metin Yerine Flash ekleme Tekniği (Inman Flash Replacement (IFR)) ve Boyutlandırılabilir Inman Metin Yerine Flash ekleme Tekniği (Scalable Inman Flash Replacement (sIFR))

Metin yerine resim ekleme tekniklerinin amaçlarında bir taneside herkesin bilgisayarında olmayan fontları kullanmaktır. Mike Davidson ve
Shaun Inman daha yaratıcı bir teknik geliştirdiler. Metin Yerine Flash ekleme Tekniği ve Boyutlandırılabilir Metin Yerine Flash ekleme Tekniği.

Flash swf dosyalarına font gömmeye izin veriyor, metin yerine resim koymak yerine metin yerine niye flash dosyası koymayalım diye düşünen bu arkadaşlar bize gerçekten çok farklı bir tekniği öğrettiler, yani sFIR’ı. Bu yöntemde javascript, doküman içinde belirli bir metini veya belirlenmiş sınıf ismini bir döngü ile bulup yerine flash elementini koyuyor. Javascript metin yerine küçük flash dosyalarını koyuyor. Bu teknik ile sadece belirtilen yerler flash dosyası ile değiştirilir tüm sayfa değiştirilmez. Bu tekniğin bir diğer avantajı flash dokümanları seçilebilirdir yani eklediğimiz metni kopyalanıp yapıştırma imkanımız var demektir. Bu metot ile metinler tekrar boyutlandırılabilir.

Bu tekniği kolayca uygulamamız için Mike Davidson bu metod için gereken dosyaları içeren bir paket hazırlamıştır. Bu metodu uygulamak için ilk olarak buradan bu paketi indirmek gerekiyor. İndirdiğimiz paketin içinde;

* dokümantasyon
* css
* demo
* flash
* js

dokümanları var.
sIFR Nasıl Uygulanır

Bu teknik devamlı kendini geliştirmektedir, biz burada sIFR2.0.2 versiyonu üzerinden anlatacağız.

Flash

İlk olarak indirdiğimiz sIFR-2.0.2.zip doyasını açacağız ve flash do kümanı sifr.fla açacağız.

Dokümanı açtığımızda Scene1′deki gördüğümüz beyaz alana(holder Movie cilp’i) çift tıklayalım. Karşımıza yazılı olan metine dokunmamamızı isteyen bir dinamik metin alanı çıkacak(Do not remove this text.), dokunmasak iyi olur

Bu dinamik metin alanı fare ile seçip alttaki Properties penceresinden istediğimiz fontumuzu(Eğer fontu gömeceksek(embed) Türkçe karakter içeren fontları seçmemiz iyi olacak.) seçiyoruz.

Eğer fontu gömeceksek, Properites ekranından Embed… butonuna tıklıyoruz. Açılan pencereden All seçip ok tıklayıp bu pencereyi kapatıyoruz. Böylelikle kullandığımız fontu flash dokümanı içine gömmüş olduk, yani kullanıcının bilgisayarında bu font olmasa bile fontu görecektir.

Sonra flash dokümanımızı kaydedelim. Flash dosyası Flash 2004 ile üretildiği için eğer Flash 2004 sonraki versiyonları kullanıyorsak bize yükseltme yapıp yapmayacağımızı soracak bizde Save deyip yükseltme yapalım.

Son olacak Flash dosyamızı yayınlayalım(publish..). Şimdi elimizde kendi oluşturduğumuz bir sifr.swf dokümanı var. İsmini değiştirebiliriz, ben fatih.swf yaptım.

HTML

Html dokümanınız açıp <head> içine aşağıdaki kodları eklememiz gerekiyor.

1. <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
2. <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">

sonra bunların altına javascript dosyalarını ekleyelim.

1. <script src="sifr.js" type="text/javascript"></script>
2. <script src="sifr-addons.js" type="text/javascript"></script>

Sonra Html içeriğinin sonuna aşağıdaki kodu ekleyelim.

1. <script type="text/javascript">
2. //<![CDATA[
3. /* Replacement calls. Please see documentation for more information. */
4. if(typeof sIFR == "function"){
5. // This is the older, ordered syntax
sIFR.replaceElement("h2", "fatih.swf", "#000000", "#000000", "#FFFFFF", "#FFFFFF", 0, 0, 0, 0);
};
6. //]]>
7. </script>
8. </body>
9. </html>

Bu javascript kodunda metin yerine eklenecek swf fosyasını, metnin rengini, hangi elemente(etiket, id ve sınıf) uygulanacağını, padding, link rengi gibi bir çok özelliği buradan düzenleyebiliyoruz. İndirdiğimiz dökümandaki örnek html(index.html) ve dokümantasyonu inceleyerek bu konuda daha ayrıntılı bilgi edinebilirsiniz.

CSS

sIFR-screen.css dokümanın açıyoruz.

1. .sIFR-hasFlash h2 {
2. visibility: hidden;
3. letter-spacing: -7px;
4. font-size: 36px;
5. margin:0;
6. padding:0;
7. }

Burada ekleyeceğimiz fontun ayarlarını yapıyoruz. font boyutunu kendi seçtiğimiz fonta göre ayarlıyoruz. Örnek dosya üzerinden gidersek bu css dokümanında bir çok başlık tanımı mevcuttur biz burada sadece kendi kullandığımızı bırakıp diğerlerini silebiliriz.

Örneği görmek için tıklayınız.
Bu metodun ayrıntılı olarak anlatımı Adobe’un sitesinde Introduction to Scalable Inman Flash Replacement (sIFR) isimli çok güzel bir video var, buradan tekniğin nasıl uygulandığını ayrıntısı ile görebiliriz.

Bu tekniğin dezavantajı sayfa yüklenmeden önce javascript’in yüklenmesidir. Bu sitemizin açılış hızına etki edecektir.

Not(01.05.2008 eklendi): Bazen sFIR uyguladığımız metin ikinci satıra inmiyor bunun için başlığa bir genişlik tanımlamamız gerekiyor.

* h1{width:250px}

sIFR3‘ün betası var ancak kararlı sürümü çıkmadı.

Sonuç olarak şunu söyleyebiliriz ki; Metin yerine resim eklemek için bir çok teknik geliştirildi ve geliştirilmektedir kodlama yaparken hangisinin bizim için daha kullanışlı olduğunu seçerek uygulamalıyız. Metin yerine resim ekleme yöntemlerini sayfamızda çok fazla yerde kullanmak pek mantıklı gelmiyor bana ama gerektiği yerde, örneğin sadece başlıklar için kullanmak gayet mantıklı. Takdir ve seçim sizin.
Kaynaklar

* http://www.altiustutasarim.com/arsiv/2005/03/css_fir_teknigi.php
* http://www.ampsoft.net/webdesign-l/image-button.html
* http://www.mezzoblue.com/tests/revised-image-replacement/
* http://www.digital-web.com/articles/in_defense_of_fahrner_image_replacement/
* http://alistapart.com/articles/fir/
* http://www.mikeindustries.com/sifr/
* http://webdesign.maratz.com/lab/multi_color_sifr/
* http://usabletype.com/weblog/how-and-when-to-use-sifr/
* http://www.adobe.com/devnet/dreamweaver/articles/sifr_demo.html
* http://novemberborn.net/sifr3/beta1
* http://labs.tom-lee.com/HeadingReplacement/Alpha/

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:57 pm

CSS ile 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.
CSS ile Basit Şekilde Gölge Vermek

En basit css ile gölge verme yöntemi Dunstan Orchard‘in yaptığı yöntemdir. Bu yöntemde; resmi kapsayan katmana geniş gölge resmi; zemin resmi olarak tanımlanarak uygulanır. Eksi margin değeri ile gölge resmi ortaya çıkarılır.

Bu yöntemi uygulamak için ilk olarak 800×800 piksel genişliğinde bir gölge resmi oluşturmalıyız. Bu resmi zemin resmi olarak kapsayıcı katmana atayalım. Sonra resmi yukarı ve sola doğru 5 piksel mesafe verelim.

Xhtml kodu:

1. <div class="resimKutusu"><img src="resim.jpg" width="300" height="300" alt="Vizara Köyü - Sürmene " /></div>

Yukarıdaki kodda görüldüğü gibi bir resim ve onu kapsayan bir katmanımız var. Kapsayıcı katmana(.resimKutu) gölge zemin resmini atayacağız. Burada şöyle bir sorunumuz olacaktır ki katman bir blok-level bir element olduğu için gölge zemin resmi tüm blok boyunca uygulanacaktır. Bu durumu engellemek için sabit bir genişlik tanımlamamız gerekir, ancak bu yöntemin kullanılabilirliğini azaltacaktır. Daha kullanılabilir kodlama için float ataması yapacağız bu Mac IE 5x versiyonlarda sorun çıkarır bunu engellemek için bu kodu Mac IE5x den gizleyeceğiz. CSS kodu:

1. .resimKutusu {
2. background: url(images/golge.gif) no-repeat bottom right;
3. clear: right;
4. float: left;
5. }

Gölge zemin resmini ortaya çıkarmak için margin tanımlarını yapmalıyız.

1. .resimKutusu img {
2. margin: -5px 5px 5px -5px;
3. }

Efekti daha belirgin ve güzel hale getirmek için padding ve kenarlık ataması yaparsak.

1. .resimKutusu img {
2. background-color: #fff;
3. border: 1px solid #a9a9a9;
4. padding: 4px;
5. margin: -5px 5px 5px -5px;
6. }

Yukarıdaki kodun IE6 da çalışması için bir iki ekleme yapmalıyız.

1. .resimKutusu {
2. background: url(images/shadow.gif) no-repeat bottom right;
3. clear: right;
4. float: left;
5. position: relative;
6. }
7. .resimKutusu img {
8. background-color: #fff;
9. border: 1px solid #a9a9a9;
10. padding: 4px;
11. display: block;
12. margin: -5px 5px 5px -5px;
13. position: relative;
14. }

Kodlama IE5x versiyonlarda biraz sorunlu görünse de genelde uygulanabilir bir metottur. Bu metot uygulanabilirliğinin kolay olması sebebiyle tercih edilebilir.

Örnek çalışmayı görmek için tıklayınız.
Clagnut metodu ile gölge vermek

www.clagnut.com‘da yayınlandığı için bu isim verilmiştir. Bu metot bir önceki ile benzerlik taşır. Bu metottaki fark negatif margin vermek yerine göreceli(realtive) konumlandırma kullanmaktır.

1. .resimKapsulu {
2. background: url(images/golge.gif) no-repeat bottom right;
3. float:left;
4. line-height:0;
5. }
6. .resimKapsulu img {
7. background:#fff;
8. padding:4px;
9. border:1px solid #a9a9a9;
10. position:relative;
11. left:-5px;
12. top:-5px;
13. }

IE5x de padding sorunu olsa da tüm web tarayıcılarında gayet güzel sonuçlar verir.

Örnek çalışmayı görmek için tıklayınız.
Fuzzy metodu ile gölge vermek

Fuzzy

Bundan önceki gölgeleme metotları basit metotlardı. Şimdi anlatacağımız metot ise gerçeğe daha yakın gölge elde etmek için kullanılır.

Bu metod PNG ile oluşturulan saydam kenarlı bir gölge resmi ile yapılmaktadır. Ancak kodlamada şöyle bir sorun varki IE7′den önce saydam PNG’leri yorumlamıyor. Bunun içinde bu yöntemde IE’nin PNG desteklemeyen versiyonları için saydam gif resmi oluşturulacaktır.(Ayrıca png fix koduda uygulanacaktır)

Aşağıdaki gibi bir maske PNG dosyası oluşturalım. IE’nin eski versiyonları için .gif oluşturalım.

Maske PNG örneği

1. <div class="resimKapsulu">
2. <div>
3. <img src="images/koy_01.jpg" width="250" height="165" alt="Vizara Köyü - Sürmene" />
4. </div>
5. </div>

Bu metodu uygulamak için resimKapsulu katmanına alt sağa dayalı bir gölge zemin resmi ekleyelim.

1. .resimKapsulu {
2. background: url(images/golge2.gif) no-repeat right bottom;
3. float: left;
4. }

Bu kapsayıcı katmanın içindeki katmanın üst sağına üstte oluşturduğumuz maske resmini ekleyelim. Bu resim gölge resminin üzerine binecektir ve ortaya çok güzel bir gölge efekti çıkacaktır. İçteki katmana gölgenin ortaya çıkması için padding uygulayalım. Ayrıca gerçek gölge efektini yakalamak için png zemin resmini ekleyelim.

1. .resimKapsulu div {
2. background: url(images/mask.png) no-repeat left top !important;
3. background: url(images/mask.gif) no-repeat left top;
4. padding: 0 5px 5px 0;
5. }

Bu kodu eski versiyon IE versiyonlarına uygun kod yazarsak:

1. .resimKapsulu div {
2. background: url(images/mask.png) no-repeat left top !important;
3. background: url(images/mask.gif) no-repeat left top;
4. padding: 0 5px 5px 0;
5. float: left; /* IE5.2/Mac duzeltmek icin yazildi */
6. }

son olarakta efekti vurgulamak için kenarlık tanımı yapalım.

1. .resimKapsulu img {
2. background-color: #fff;
3. border: 1px solid #a9a9a9;
4. padding: 4px;
5. }

gif ve png ikileminden hoşlanmayanlar için bir yöntem daha var. IE5.5 den sonraki versiyonların desteklediği

1. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/mask.png’, sizingMethod=’crop’);

Bu kodu ie versiyonları için eklemeliyiz, diğer web tarayıcılarında gizlemeliyiz.

1. .resimKapsulu div {
2. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/shadow2.png’, sizingMethod=’crop’);
3. background: none;
4. }

diğer web tarayıcılarında gizlemek için

1. <!–[if gte ie 5.5000]>
2. <link rel="stylesheet" type="text/css" href="ie55.css"/>
3. <![endif]–>

Böylece tüm yeni nesil web tarayıcılarında bu metodu sağlıklı bir şekilde kullanmış olduk.
Bu metodu tüm png zemin resmi uygularınızda uygulayabilirsiniz.

Örnek çalışmayı görmek için tıklayınız.
Onion Skin metodu ile Gölge eklemek

Son gölge verme metodu yuvarlak kenarlı kutuları oluşturduğumuz metoda benzer bir metottur. Bu metotta içiçe girmiş üç katman kullanırız soğan gibi ondan zaten(onion skin) diyorlar. En alttaki katmana gölge zemin resmi, bir üstteki katmanın sol alt kısmına gölge kenarı, en üstteki katmanın sağ üst kısmına gölge kenarı vererek yapılır.
Onion Skinned

Temel html kodu:

1. <div class="nesneKapsayici1">
2. <div class="nesneKapsayici2">
3. <div class="nesneKapsayici3">
4. <img src="images/dunya.jpg" width="300" height="300" alt="Dünya" />
5. </div>
6. </div>
7. </div>

İlk önce en dıştaki katmana gölge zemin resmini atayalım:

1. .nesneKapsayici1 {
2. background:url(images/golge.gif) no-repeat right bottom;
3. float: left;
4. }

Sonra oluşturduğumuz iki adet gölge resminin bir tanesini üst sağ tarafa, diğerini alt sol tarafa zemin resmi olarak veriyoruz. Ayrıca tam resme göre gölge vermek için aşağıdaki gibi kodlama yapmalıyız:

1. .nesneKapsayici2 {
2. background:url(images/altsol.gif) no-repeat left bottom;
3. float: left; /* IE5.2/Mac duzeltmek icin yazildi */
4. }
5. .nesneKapsayici3 {
6. background:url(images/ustsag.gif) no-repeat top right;
7. padding: 0 5px 5px 0;
8. float: left; /* IE5.2/Mac duzeltmek icin yazildi */
9. }

ve son olarak ta güzel bir efekt olması için kenarlık ve padding tanımlarını yapıyoruz:

1. .nesneKapsayici1 img {
2. background-color: #fff;
3. border: 1px solid #a9a9a9;
4. padding: 4px;
5. display: block;
6. }

Örnek çalışmayı görmek için tıklayınız.

Bu metot kolay uygulanabilirlik bakımından avantajlıdır. Ancak fazladan iki adet katman kullanılması bakımından pek anlamlı kod yazımına(semantik) uygun değildir. Ama bir çok web tarayıcısında sorunsuz çalışması bir artısıdır. Bu metot CSS3 ile birlikte daha basit hala gelecektir. Çünkü CSS3 bize bir nesneye birden fazla zemin resmi tanımlamamıza olanak sağlıyor. Ama bunu için beklemek zorundayız.

* http://alistapart.com/articles/onionskin/
* http://alistapart.com/articles/cssdrop2/
* http://www.clagnut.com
* http://www.1976design.com/blog/archive/2003/11/14/shadows/
* http://www.friendsofed.com/book.html?isbn=1590596145

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:58 pm

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 :

1. <p>
2. <a href=”http://www.fatihhayrioglu.com/” class=”aracIpucu”>
3. Fatih Hayrioğlu<span> (Fatih Hayrioğlu’nun Not Defteri) </span></a>
4. web sitesine bir göz atın.
5. </p>

Araç İpucu eklenecek linke aracIpucu sınıfı atanmış ve Araç İpucu içinde görünecek açıklama <span> etiketleri arasına alınmıştır.

1. a.aracIpucu{
2. position: relative;
3. }
4. a.aracIpucu span {
5. display: none;
6. }

Buradaki espri konumlandırma(realtive->absolute) esprisidir. Araç İpucu eklenecek linke position: relative; ataması yapıp, içindeki span elementinide mutlak konumlandırma atayarak işi halledeceğiz. Ama sayfa ilk yüklendiğinde span içindeki bilgi görünmemesi için başlangıç durumunda span etiketini görünmez yapıyoruz(display:none;).

1. a.aracIpucu:hover span {
2. display: block;
3. position: absolute;
4. top: 18px;
5. left: 20px;
6. width:200px;
7. }

fare imleci link üzerine geldiğinde(:hover) span içeriğini göstermek için display:block ataması yapıyoruz. Ayrıca araç ipucunun yerini belirliyoruz. Araç İpucuna görsellik kazandırmak isteyenler için aşağıdaki kodları ekleyebiliriz.

1. a.aracIpucu:hover span {
2. display:block;
3. position:absolute;
4. top:18px;
5. left:20px;
6. width:200px;
7. padding:2px 6px;
8. border:1px solid #963;
9. background-color:#FF6;
10. color:#000;
11. }

Maalesef bu kod IE5x versiyonlarda tam anlamıyla çalışmayacaktır. Bu durumu düzeltmek için

1. a.aracIpucu:hover {
2. font-size: 100%; /* IE5.x/Win duzeltmek icin */
3. }

Örneği görmek için tıklayınız. Veyahut resimli bir tanıtım için başka bir örnek yaparsak tıklayınız.

Ayrıca Safari kullanıcıları için üzgünüz. Safari bu kodlara olumlu yanıt vermiyor.

Görselliği daha hoş olan araç ipuçlarıda yapabiliriz. Bunun için Xhtml kodumuzu aşağıdaki em eklemesini yapıyoruz. Amacımız bu elemente ikon resmini eklemek.

1. <p>
2. <a href=”http://www.fatihhayrioglu.com/” class=”aracIpucu”>
3. Fatih Hayrioğlu<span><em></em> (Fatih Hayrioğlu’nun Not Defteri) </span></a>
4. web sitesine bir göz atın.
5. </p>

CSS koduna gelince:

1. a.aracIpucu:hover span {
2. display:block;
3. position:absolute;
4. top:25px;
5. left:-5px;
6. width:200px;
7. padding:2px 6px;
8. border:1px solid #963;
9. background-color:#FF6;
10. color:#000;
11. }

düzeltmesini yapıyoruz. Ayrıca ikon için aşağıdaki eklemeyi yapıyoruz.

1. a.aracIpucu:hover span em {
2. position:absolute;
3. left:20px;
4. top:-6px;
5. width:11px;
6. height:6px;
7. background:#fff url(yukariok.gif) 0 0;
8. display:block;
9. font-size:1px;
10. }

Örneği görmek için tıklayınız.

* http://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
* http://www.cssplay.co.uk/menu/tooltips.html
* http://www.communitymx.com/content/article.cfm?page=1&cid=4E2C0
* http://psacake.com/web/jl.asp
* http://www.cssplay.co.uk/menu/tooltips.html
* http://www.peutetreunereponse.net/article-6614978.html

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:58 pm

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 :

1. <p>
2. <a href=”http://www.fatihhayrioglu.com/” class=”aracIpucu”>
3. Fatih Hayrioğlu<span> (Fatih Hayrioğlu’nun Not Defteri) </span></a>
4. web sitesine bir göz atın.
5. </p>

Araç İpucu eklenecek linke aracIpucu sınıfı atanmış ve Araç İpucu içinde görünecek açıklama <span> etiketleri arasına alınmıştır.

1. a.aracIpucu{
2. position: relative;
3. }
4. a.aracIpucu span {
5. display: none;
6. }

Buradaki espri konumlandırma(realtive->absolute) esprisidir. Araç İpucu eklenecek linke position: relative; ataması yapıp, içindeki span elementinide mutlak konumlandırma atayarak işi halledeceğiz. Ama sayfa ilk yüklendiğinde span içindeki bilgi görünmemesi için başlangıç durumunda span etiketini görünmez yapıyoruz(display:none;).

1. a.aracIpucu:hover span {
2. display: block;
3. position: absolute;
4. top: 18px;
5. left: 20px;
6. width:200px;
7. }

fare imleci link üzerine geldiğinde(:hover) span içeriğini göstermek için display:block ataması yapıyoruz. Ayrıca araç ipucunun yerini belirliyoruz. Araç İpucuna görsellik kazandırmak isteyenler için aşağıdaki kodları ekleyebiliriz.

1. a.aracIpucu:hover span {
2. display:block;
3. position:absolute;
4. top:18px;
5. left:20px;
6. width:200px;
7. padding:2px 6px;
8. border:1px solid #963;
9. background-color:#FF6;
10. color:#000;
11. }

Maalesef bu kod IE5x versiyonlarda tam anlamıyla çalışmayacaktır. Bu durumu düzeltmek için

1. a.aracIpucu:hover {
2. font-size: 100%; /* IE5.x/Win duzeltmek icin */
3. }

Örneği görmek için tıklayınız. Veyahut resimli bir tanıtım için başka bir örnek yaparsak tıklayınız.

Ayrıca Safari kullanıcıları için üzgünüz. Safari bu kodlara olumlu yanıt vermiyor.

Görselliği daha hoş olan araç ipuçlarıda yapabiliriz. Bunun için Xhtml kodumuzu aşağıdaki em eklemesini yapıyoruz. Amacımız bu elemente ikon resmini eklemek.

1. <p>
2. <a href=”http://www.fatihhayrioglu.com/” class=”aracIpucu”>
3. Fatih Hayrioğlu<span><em></em> (Fatih Hayrioğlu’nun Not Defteri) </span></a>
4. web sitesine bir göz atın.
5. </p>

CSS koduna gelince:

1. a.aracIpucu:hover span {
2. display:block;
3. position:absolute;
4. top:25px;
5. left:-5px;
6. width:200px;
7. padding:2px 6px;
8. border:1px solid #963;
9. background-color:#FF6;
10. color:#000;
11. }

düzeltmesini yapıyoruz. Ayrıca ikon için aşağıdaki eklemeyi yapıyoruz.

1. a.aracIpucu:hover span em {
2. position:absolute;
3. left:20px;
4. top:-6px;
5. width:11px;
6. height:6px;
7. background:#fff url(yukariok.gif) 0 0;
8. display:block;
9. font-size:1px;
10. }

Örneği görmek için tıklayınız.

* http://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
* http://www.cssplay.co.uk/menu/tooltips.html
* http://www.communitymx.com/content/article.cfm?page=1&cid=4E2C0
* http://psacake.com/web/jl.asp
* http://www.cssplay.co.uk/menu/tooltips.html
* http://www.peutetreunereponse.net/article-6614978.html

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:59 pm

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.

Herhangi bir stil tanımlaması yapmasak bile <blockquote> normal içeriğe göre daha içerden başlayacaktır. Bu küçük bir ayrıntıdır, ancak içerikten ayırmak için yeterlidir.

Sizler burada alıntıların kullanımı göstermeden önce <cite> etiketinden bahsedeceğiz.

Bu zamanı geçmiş bir etiket değildir. Bu kod alıntıları aldığımız siteleri belirtmek için kullanacağımız bir özelliktir. Bu kodu eklediğinizde birçok tarayıcı bunun farkına varmayacaktır bile. Ancak gerek CSS ve gerekse betikler ile bu kodu kullanabiliriz mesela indeksleme yaparken kullanabilriz. Bu bilgi bize alıntı hakkında ileride bilgi vermek için kullanılabilir.
Kodlama içinde Alıntı kullanmak

Sizlere kısaca kod içerisinde alıntı kullanımını anlatacağız. Eğer cümle için bir alıntı yaptı iseniz, <q> etiketini kullanabilirsiniz.

1. Bunu Mevlana’nın bir sözü ile destekleyelim <q>Nice insanlar gördüm, üzerinde elbisesi yok. Nice elbiseler gördüm, içinde insan yok.</q> ve <q>Ehil olmayanlara sabretmek ehil olanları parlatır.</q> sözleri bize yol gösterir.

Yeni nesil tarayıcılar bu kodu aşağıdaki gibi gösterecektir.

Örnek 2

Bu kodu IE normal içerik gibi yorumlayacaktır. IE için farklı stil tanımı yapmamız gerekiyor.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Alıntı Örneği</title>
6. <style>
7. /* IE icin */
8. q {
9. font-style:italic;
10. }
11. /* Safari ve Firefox icin */
12. html:not([dummy]) q {
13. font-style:normal;
14. }
15. </style>
16. </head>
17. <body>
18. <p>Bunu Mevlana’nın bir sözü ile destekleyelim <q>Nice insanlar gördüm, üzerinde elbisesi yok. Nice elbiseler gördüm, içinde insan yok.</q> ve
19. <q>Ehil olmayanlara sabretmek ehil olanları parlatır.</q> sözleri bize yol gösterir. </p>
20. </body>
21. </html

Örnek IE

Böylelikle Internet Explorer da kodumuz farklı görünecektir.

Bu etiketin birde dil özelliği vardır.

1. I said, <q lang="en-us">Herman, do you like bubblegum? </q> And he said, <q lang="en-us">Yes, the kind that comes with a comic.</q>

Tüm dil kodlarını öğrenmek için www.w3.org/TR/html4/struct/dirlang.html#langcodes adresini ziyaret ediniz.
Alıntı ve <blockquote> etiketi

Örnek bir kod yazalım:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Alıntı Örneği</title>
6. </head>
7. <body>
8. <blockquote>Sevgide güneş gibi ol, dostluk ve kardeşlikte akarsu gibi ol, hataları örtmede gece gibi ol, tevazuda toprak gibi ol, öfkede ölü gibi
9. ol, her ne olursan ol, ya olduğun gibi görün, ya göründüğün gibi ol.</blockquote>
10. <cite>Mevla’na Celaleddin-i Rumi</cite>
11. </body>
12. </html>

Alıntı Örnek 1

Görüntü istediğimiz gibi olmaya bilir. Biraz görüntüyü düzeltelim. Burada üç adet zemin resim ile görüntüyü düzeltebiliriz.

Alıntı Üst Zemin Resmi
Alıntı Üst Zemin Resmi

Alıntı Orta Zemin Resmi
Alıntı Orta Zemin Resmi

Alıntı Alt Zemin Resmi
Alıntı Alt Zemin Resmi

Şimdi CSS kodumuzu yazalım

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Alıntı Örneği</title>
6. <style>
7. blockquote {
8. width: 240px;
9. margin:0;
10. padding:29px 0 0 0;
11. background:url(images/alinti_ust.gif) no-repeat left top;
12. }
13. blockquote p {
14. margin:0;
15. padding:10px;
16. color: #fff;
17. text-align:center;
18. font:bold 14px/1.7em Georgia, "Times New Roman", Times, serif;
19. background: url(images/alinti_orta.gif) left bottom repeat-y;
20. }
21. cite
22. {
23. font-size: 1.2em;
24. padding-bottom:29px;
25. display:block;
26. text-align:center;
27. color:#C6D9F1;
28. text-decoration:underline;
29. width:240px;
30. background: url(images/alinti_alt.gif) no-repeat left bottom;
31. }
32. </style>
33. </head>
34. <body>
35. <blockquote><p>Sevgide güneş gibi ol, dostluk ve kardeşlikte akarsu gibi ol, hataları örtmede gece gibi ol, tevazuda toprak gibi ol, öfkede ölü gibi ol, her ne olursan ol, ya olduğun gibi görün, ya göründüğün gibi ol.</p></blockquote>
36. <cite>Mevla’na Celaleddin-i Rumi</cite>
37. </body>
38. </html>

Alıntı Örnek Sonuç

Yukarıda verdiğimiz zemin resimlerini yerleştirdik ve fon ve renk değerleri verdik.

Örnek sayfasına göz at.

Sonuçta hem güzel bir görüntü elde ettik hemde css desteklemeyen tarayıcı ve araçlarda da farklı bir görünüm sağlamış olduk.
Kaynaklar

* http://www.cameraontheroad.com/?p=154 iyi örnek
* Dan Cederholm - Web Standards Solutions The Markup and Style Handbook
* http://24ways.org/2005/swooshy-curly-quotes-without-images
* http://monc.se/kitchen/129/rendering-quotes-with-css
* http://www.shapeshed.com/journal/quotations_in_css/
* http://diveintomark.org/archives/2002/05/04/the_q_tag
* http://simonwillison.net/2003/May/21/stylingBlockquotes/
* http://www.456bereastreet.com/archive/200411/quotations_and_citations_quoting_text/
* http://juicystudio.com/article/fixing-ie-quotes.php
* http://historytalk.typepad.com/basic/2006/06/scholarship_xht.html

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:59 pm

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.

PNG kullanımın en büyük avantajı alfa kanılı desteği ile bizlere kusursuz geçiş efekti olanağı sunmasıdır.

Web dünyasında PNG yayılmasını engelleyen en büyük sebep Internet Explorer’ın PNG desteğini 7. sürümüne kadar desteklememesidir. Tabi web kodlayıcıları Internet Explorer’ı beklemeden bazı düzeltme kodları üretti. Internet Explorer’ın desteklediği filter‘ın AlphaImageLoader özelliği sayesinde saydam PNG desteği sağlanmıştır.

1. img {
2. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(…);
3. }

Bu kod problemimizi çözdü, ancak tümünü değil.
Saydam PNG düzeltmesi ile ilgili sorunlar

W3C ve Diğer farklı tarayıcı desteğinin olmayışı.

Bu kodu w3c ve diğer tarayıcılar desteklemediği için site doğrulamalarında(validation) sorun yaşamaktadır.

Artalan(background) olarak kullanımdaki sorunlar

Artalan olarak kullanılan saydam PNG’lerde konumlandırma ve yenileme özelliklerinin kullanılamaması sorunlarına neden oldu.

Geç yükleneme ve fazla kaynak kullanımı

AlphaImageLoader ile yüklenen resimler normal resme göre daha yavaş yükleniyor ve daha fazla kaynak tüketiyor. Ancak bu durum sadece ie6 kullanıcıları için geçerlidir.

Linklerde tıklama ve formlarda odaklanma sorunları

Artalan resmi olarak saydam png uygulanan elemanların içinde link bulunuyorsa bu linkler üzerine gidince tıklanamaz görünüyor ve form elemanlarıda odaklanamaz oluyor.

İlk yüklemede gösterilmeyen png’lerde ve Javascript ile oluştulmuş pnglerde sorun çıkarıyor

Bir içerik sayfa yüklendiğinde görünmez ise ve linke tıklayınca açılıyorsa png düzenlemesi işe yaramıyor.

Bir çok sorunları olmasına karşın tasarımcıların kod yazarlarını zorlayan sayfa tasarımlarını saydam PNG desteği olmadan çözmemiz çok zor. Bu nedenle sizlere saydam PNG kullanmanın yolları gösterecek bir iki örnek yapacağım. Benim kullandığım yöntem çok iyidir süperdir sakın başka yöntem kullanmayın demiyorum ben bu yöntemi kullanıyorum çünkü karşılaştığım tüm sorunların üstesinden bu yöntem geldi. Siz kaynaklar kısmındaki linkleri takip ederek farklı yöntemleri uygulayabilirisiniz.

İlk olarak bir saydam PNG resmini sitemize ekleyelim. Benim logomun bir gif birde png halini hazırlayıp saydam PNG’nin gözle görülür faydasını anlayalım.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Saydam PNG</title>
6. <style>
7. .kutu{
8. background:url(images/ardalan.gif) top left no-repeat;
9. height:80px;
10. padding:10px
11. }
12. </style>
13. </head>
14. <body>
15. <div class="kutu"><img src="images/fatihhayri_logo.gif" alt="Logo" width="166" height="82" /></div>
16. <p>fatihhayri_logo.gif uygulaması</p>
17. <div class="kutu"><img src="images/fatihhayri_logo.png" alt="Logo" width="166" height="82" /></div>
18. <p>fatihhayri_logo.png uygulaması</p>
19. </body>
20. </html>

Örnek sayfayı görmek için tıklayınız.

Saydam PNG resim

Yukarıdaki örnek görüldüğü gibi logonun kenarlarındaki geçiş kısmında gif ve png arasında bariz farklar var. Yukarıdaki görüntüyü yeni nesil tarayıcılarda göreceğiz. Ama İnternet Explorer 6 ve önceki versiyonlarda görüntü aşağıdaki gibi olacaktır.

saydam png ie6

Kırmızı ile işaretlediğim ve resmi saran bir gri alan gibi saracaktır. Bunun anlamı bu tarayıcının saydam PNG desteğinin olmadığıdır. Bu sorunu gidermek için yukarıda bahsettiğimiz İnternet Explorer 6′nın desteklediği filter tekniği uygulayacağız.

1. function fixpngs(){
2. var l = document.getElementsByTagName(’img’);
3. for(i=0;i<l.length;i++){
4. p = ‘images/0.gif’;
5. n = l[i].getAttribute(’src’);
6. g = n.toLowerCase();
7. if(g.substring(g.length-3)=="png"){
8. l[i].setAttribute(’src’,p);
9. l[i].style.cssText="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’"+n+"’)";
10. }
11. }
12. }
13. window.onload = fixpngs;

Yukarıdaki js dosyasını incelersek. Sayfadaki tüm resimleri tarayıp png uzantılı olanları bulup IE’nin göstereceği stil özelliklerini bu png’ye atayacaktır. Birde burada bize saydam 1×1 saydam gif resmi gerekecektir. Bu saydam gif resim alanını dolduracaktır. Bu saydam gifi koymazsak resmin sol üstünde kırmızı x işareti çıkacaktır.

Yukarıdaki kodlamada kalın olarak belirttiğimiz yere siz kendi saydam 1×1 gif’inizin yerini yazacaksınız.

Benim bu yöntemi kullanmamın nedeni bir projede dinamik oluşturduğum saydam PNG ve sayfa yüklendiğinde görünür olmaya(display:none) sonradan görünen alanlardaki saydam PNG ile yaşadığım sorunları bu kodun çözmesidir.

Yukarıdaki kodu sayfamıza sadece IE7 öncesi görecek şekilde eklersek

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Saydam PNG</title>
6. <style>
7. .kutu{
8. background:url(images/ardalan.gif) top left no-repeat;
9. height:80px;
10. padding:10px
11. }
12. </style>
13. <!–[if lt IE 7]>
14. <script type="text/javascript" src="pngDuzenlemeKodu.js"></script>
15. <![endif]–>
16. </head>
17. <body>
18. <div class="kutu"><img src="images/fatihhayri_logo.gif" alt="Logo" width="166" height="82" /></div>
19. <p>fatihhayri_logo.gif uygulaması</p>
20. <div class="kutu"><img src="images/fatihhayri_logo.png" alt="Logo" width="166" height="82" /></div>
21. <p>fatihhayri_logo.png uygulaması</p>
22. </body>
23. </html>

Örneği görmek için tıklayınız.

saydam png ie6

Yukarıdaki ekran görüntüsü Internet Explorer 6′da sayfamızın görüntüsüdür.
Ardalan resmi olarak saydam PNG kullanımı

Resimlerde kullanımının dışında ardalan(background) resmi olarakta saydam PNG resimlerini kullanmamız gerekebilir. Benim en çok karşılaştığım durumlar resimlerin üzerine dinamik içerikli gölgeli kutular eklemk istediğimde ve renk geçişli ardalanların üzerine konan dinamik içerikli kutular eklemek istediğimde saydam PNG kullanmam gerekiyor. Tabi bir çok durumda gerekebilir, ben burada kafamızda bir örnek oluşması için bu örnekleri verdim.

Bu duruma örnek bir tasarıma bakarsak.

Örnek Tasarım

Yukarıdaki bir tasarımda. Ardalanında resim olan tasarım üzerindeki gölgeli dinamik içerikli kutu bizi saydam PNG kullanmaya itiyor. Ardalandaki resmin farklı sayfalarda değişeceğini düşünerek kodlayalım.

Örnek Kesim

Bu bölüm farklı düşünülerek de kodlanabilir. Ben photoshop’da üç alanı saydam png olarak kaydettim

Saydam png kullanımının farklı yönlerini anlatmak için bu bölümü 3 kısma ayırdık. Bu şekilde kodumuzu yazarsak:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Saydam PNG</title>
6. <style>
7. #resim{
8. background:url(images/ardalan_resmi.jpg) top left no-repeat;
9. width:400px;
10. padding-top:15px;
11. height:300px;
12. }
13. #icerik{
14. width:207px;
15. margin-left:15px;
16. }
17. #icerikUstu{
18. background:url(images/icerik_ust.png) top left no-repeat;
19. height:10px;
20. }
21. #metinAlani{
22. background:url(images/icerik_orta.png) top left repeat-y;
23. font:11px Arial, Helvetica, sans-serif;
24. padding:0 10px
25. }
26. </style>
27. </head>
28. <body>
29. <div id="resim">
30. <div id="icerik">
31. <div id="icerikUstu"><img src="images/0.gif" width="1" height="1" /></div>
32. <div id="metinAlani"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ultricies orci quis erat. Nulla vulputate sapien sit amet elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed nunc. In at ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut augue. Phasellus scelerisque vehicula orci.</div>
33. <div id="icerikAlt"><img src="images/icerik_alt.png" width="207" height="18" alt=" " /></div>
34. </div>
35. </div>
36. </body>
37. </html>

Örnek sayfayı görmek için tıklayınız.

Saydam PNG ardalan olarak kullanımı

Burada beyaz gölgeli kutumuz dinamik olduğu için içeriğin artması ile şekli bozulmayacaktır.

Saydam PNG ardalan olarak kullanımı

Buraya kadar her şey güzel görünsede Internet Explorer 6′da bu sayfaya baktığımızda işin rengi değişecektir.

Saydam PNG ardalan olarak kullanımı

Yukarıdaki resimde görüldüğü gibi saydam png resimlerinin saydam olan kısımları gri bir çerçeve ile kaplanmış gibi görünüyor. Yukarıdaki kodumuz ekleyerek bu sorunu halledebiliriz.

1. <!–[if lt IE 7]>
2. <script type="text/javascript" src="pngDuzenlemeKodu.js"></script>
3. <![endif]–>

Ancak bu kod bize sadece alt kısma eklediğimiz resmi düzeltmeye yaracaktır. Orta ve üst kısımların ardalanında kullandığımız saydam png doyarının görünümü yine sorun görülecektir.

Saydam PNG ardalan olarak kullanımı

Peki bunun için bir çözüm yok mu? Elbette var. Yine filter özelliğin kullanarak bu işe bir çözüm getireceğiz.

1. <!–[if lt IE 7]>
2. <style>
3. #icerikUstu{
4. background:transparent;
5. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/icerik_ust.png’, sizingMethod=’crop’);
6. }
7. </style>
8. <script type="text/javascript" src="pngDuzenlemeKodu.js"></script>
9. <![endif]–>

Yukarıdaki kodu sayfamıza eklediğimizde IE6 içeriğin üst kısmına uyguladığımız ardalan resmi düzgün görüntülenecektir. Bu koda dikkat edersek. daha önce atadığımız ve yeni nesil tarayıcılarda görünen background özelliği sıfırlanıyor(background:none) Daha sonra filter özelliği uygulanıyor. Burada dikkat etmemiz gerek bir bölüm daha var filter özelliğinin iki parametresi var

1. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(parametre1, parametre2);

parametre1 resmin kaynağını göstermek için kullanılır. parametre2 ise kullanılan ardalan resminin nasıl şekillendirileceğini gösterir. İki değer alır, crop ve scale.

crop: Tek resim veya ardalan kullanacağımız yerlerde kullanılır.

scale: Bir resmi çekip uzatmaya yarayan bu özellik sayesinde background-repeat:repeat-y özelliğine karşılık gelen bir özelliktir. Bunun uygulamasını biraz sonra göreceğiz.

Gelelim metin girdiğimiz kısmın arkasına uyguladığımız ardalan resmini uygulamaya, bunu için:

1. <!–[if lt IE 7]>
2. <style>
3. #icerikUstu{
4. background:transparent;
5. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/icerik_ust.png’, sizingMethod=’crop’);
6. }
7. #metinAlani{
8. background:transparent;
9. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/icerik_orta.png’, sizingMethod=’scale’);
10. height:1%;
11. }
12. </style>
13. <script type="text/javascript" src="pngDuzenlemeKodu.js"></script>
14. <![endif]–>

Örnek sayfayı görmek için tıklayınız.

Saydam PNG ardalan olarak kullanımı

Bir önceki örneğe göre farkımız crop yerine scale uygulamak oldu. Burada scale tam olarak bizim background-repeat’e karşılık gelmiyor tabi. Sadece dikeyde bir tekrar için kullanıldığını unutmayalım. Ayrıca ben bu makaleyi yazarken öğrendim. Eğer bir height değeri tanımlamazsak ie6 bu düzeltmeye göstermiyor bunu için height:1%; değerini ekledim.

Bunun haricinde eğer saydam png uygulanmış metin alanımız için link var ise buda bir sorun oluşturuyor.

Yukarı gördüğünüz gibi link üzerine geldiğimizde link alanına erişemiyor ve tıkladığımızda ilgili linke gidemiyoruz. Burada link alanı sanki gizli bir alana altında kalıyor gibi. Bizde linkleri bu alanın üzerine çıkarmalıyız

Bu durumu çözmek için:

1. <!–[if lt IE 7]>
2. <style>
3. #icerikUstu{
4. background:transparent;
5. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/icerik_ust.png’, sizingMethod=’crop’);
6. }
7. #metinAlani{
8. background:transparent;
9. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/icerik_orta.png’, sizingMethod=’scale’);
10. height:1%;
11. }
12. #metinAlani a{
13. position: relative;
14. z-index: 1;
15. }
16. </style>
17. <script type="text/javascript" src="pngDuzenlemeKodu.js"></script>
18. <![endif]–>

Örnek sayfayı görmek için tıklayınız.
Sonuç

Sonuç olarak saydam PNG kullanmak çok güzel ama ie6 ile uğraşmak zor. Tabi sorunun çözümüm olması bizleri sevindiriyor. Başta bu düzeltme kodlarını yazmak zor olsada zamanla ve uyguladıkça alışıyoruz durum kolaylaşıyor. Ayrıca Microsoft’un Internet explorer 6′dan sonra bu hatasından geri dönmeside sevindirici ie7 ve yeni çıkacak ie8′de png desteği var.

Yazının başında da belirttiğim gibi saydam png sorunu için üretilen bir çok farklı yazım şekli var. Ancak ben karşılaştığım sorunlar ve çözümler için kullandığım yöntemi sizlerle paylaştım. Muhakkak daha iyi yöntemler çıkacaktır, bunlara açığım. Sizlerden öneriler bekliyorum.
Kaynaklar

* http://komodomedia.com/blog/index.php/2007/11/05/css-png-image-fix-for-ie/
* http://24ways.org/2007/supersleight-transparent-png-in-ie6
* http://www.satzansatz.de/cssd/tmp/alphatransparency.html
* http://homepage.ntlworld.com/bobosola/pnginfo.htm
* http://msdn2.microsoft.com/en-us/library/ms532969.aspx
* http://www.twinhelix.com/css/iepngfix/
* http://dean.edwards.name/ie7/
* http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
* http://www.campbellsdigitalsoup.co.uk/2007/11/27/a-new-png-fix-with-jquerys-helping-hand/
* http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/
* http://blog.creonfx.com/internet-explorer/ie6-png-transparency-css-background-repeat-fix
* http://www.digital-web.com/articles/web_standards_creativity_png/
* http://www.alistapart.com/stories/pngopacity/
* http://www.tigir.com/alpha_png.htm
* http://stylizedweb.com/2007/12/30/png-transparency-issues/
* http://blogs.pathf.com/agileajax/2008/04/hacking-transpa.html
* http://www.bluehostforum.com/archive/index.php/t-8396.html

» Css Dersleri