Sayfalama

Web sitelerinde sayfalama genel olarak içeriğin uzun olduğu durumlarda kullanıcıya daha kullanabilir sayfalar üretmek için içeriğin belli mantıksal kısımlara ayrılmasıdır. Genelde arama sonuç sayfalarında, günlük(blog) sitelerinde, uzun içeriğe sahip makalelerde uygulamalarına rastlarız.

Sayfalama alanları genel olarak sitede gezinme alanlarının(navigation) bir parçasıdır. Sitedeki kullanılabilirliği ve düzeni sağlayan normal menü yapılarının dışındaki yapılardır. Aslında bir bakıma gezinme elemanı sınıfına da sokabiliriz. Sayfalama yaparken aşırıya kaçıp görünüşü çok hoş olsun diye kullanıcıyı zora sokan tasarımlardan kaçınmak gerekir. Sayfalamada önemli olan kullanıcı dostu ve işlevsel bir yapı oluşturmaktır, ondan sonra görsellik gelir. İşlevselliği kaybetmeden görsellikde geliştirilebilir.

Sayfalamada dikkat edilecek hususları Faruk Ateş‘in makalesinde çok güzel bir liste şeklinde görüyoruz. Biz buraya başlıklarını alalım.

1. Geniş tıklanabilir alanlar olsun. Kullanıcının tıklamasını kolaylaştırmak için.
2. Altı çizili kullanmayın. Zaten tıklanacak alanlar olduğu belli.
3. Mevcut sayfada olduğumuz belli olsun. Önemli bir ayrıntı.
4. Linkler arasına mesafeler bırakın. Kullanıcının kolay tıklaması için önemli.
5. “Önceki” ve “Sonraki” bağlantılarını verin.
6. Duruma göre “İlk” ve “Son” bağlantıları koyun.
7. İlk ve Son bağlantılarını sayfalama alanın en dışında olmasına dikkat edin.
8. Sayfa bilgisi kısmını ekleyin. Örn: (Sayfa 80 / 3). Listeye bunu ben ekledim :D

Sayfalama için genelde listeme elemanı(ul) kullanıyorum. Listeleme olmadanda kullanılabilir benim sitemde olduğu gibi. Ama benim tercihim liste elemanı ile oluşturmaktan yana çünkü tüm tasarımsal ihtiyaçları karşılayacak bir yapı bütünlüğü sağlıyor bize listeleme.

CSS ile Sayfalama

Sayfalama Örnek 1:

Basit yapılı sayfalamalarda, daha doğrusu resim, ovallik içermeyen sayfalamalarda;

XHTML Kodu:

<div class="sayfalama"><span class="pasif">&#171; Önceki</span><span class="secili">1</span><a href="/page/2/">2</a><a href="/page/3/">3</a><a href="/page/4/">4</a><a href="/page/5/">5</a><a href="/page/6/">6</a><a href="/page/7/">7</a>...<a href="/page/199/">199</a><a href="/page/200/">200</a><a href="/page/2/" class="next">Sonraki &#187;</a></div>

CSS Kodumuz:

.sayfalama {
    padding: 3px;
    margin: 3px;
    text-align:center;
}

.sayfalama a {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #EEE;
    text-decoration: none;
    color: #036CB4;
}

.sayfalama a:hover,
.sayfalama a:active {
    border: 1px solid #999;
    color: #666;
}
.sayfalama .secili {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #036CB4;
    font-weight: bold;
    background-color: #036CB4;
    color: #FFF;
}
.sayfalama .pasif {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #EEE;
    color: #DDD;
}

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

Basit kodlama tekniğinde linkler ve span kullanarak sayfalarımızı oluşturuyoruz. Sayfa şeklini belirlemek için kenar için boşluk(padding), kenar dışı boşluk(margin), kenar dışı çizgisi tanımlarını yapıyoruz.

Sayfalamada fare üzerine geldiğinde ve aktif haller için genelde farklı renk tanımları yapılarak fark belirtilir.

Mevcut sayfa için ayrı bir sınıf tanımı(örn: secili) yaparak ona göre bir tanım yaparız.

Ayrıca pasif alanlar için bir tanım yapıyoruz. Daha silik bir renk ile.

Sayfalama Örnek 2:

Yahoyt’da yaptığım örnek sayfalama. Genelde kullanılan sayfalamaya bir örnek olacak nitelikte. İkinci yöntem benim daha çok tercih ettiğim yöntem listeler ile sayfalama;

XHTML

<ul class="sayfalama">
    <li><a href="">|<</a></li>
    <li><a href="">Önceki</a></li>
    <li><span>1</span></li>
    <li><a href="" title="Sayfa 2">2</a></li>
    <li><a href="" title="Sayfa 3">3</a></li>
    <li><a href="" title="Sayfa 4">4</a></li>
    <li><a href="" title="Sayfa 5">5</a></li>
    <li><a href="" title="Sayfa 6">6</a></li>
    <li><a href="" title="Sayfa 7">7</a></li>
    <li><a href="" title="Sayfa 8">8</a></li>
    <li><a href="" title="Sayfa 9">9</a></li>
    <li><a href="" title="Sayfa 10">10</a></li>
    <li><a href="" title="Sonraki">Sonraki</a></li>
    <li><a href="" title="İlk Sayfa">>|</a></li>
</ul>

CSS kodu

ul.sayfalama {
    margin:0 auto;
    width:530px;
    padding:10px 0 0 0;
    clear:left
}
ul.sayfalama li {
    font:bold 12px Tahoma, Geneva, sans-serif;
    color:#fff;
    float:left;
    list-style:none;
    margin:0 2px;
    background:#005689;
}
ul.sayfalama li span {
    padding:5px 8px;
    display:block
}
ul.sayfalama li a {
    font:bold 12px Tahoma, Geneva, sans-serif;
    color:#005689;
    text-decoration:none;
    background-color:#e2e2e2;
    padding:5px 8px;
    display:block
}
ul.sayfalama li a:hover {
    background-color:#005689;
    color:#e2e2e2;
}

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

Sayfalama Örnek 3:

Son olarakda bonus.com.tr kampanyalarda yaptığım sayfalama.

XHTML kodu

<ul class="sayfalama kapsayamamaSorunu">
  <li class="oncekiSayfa"><a href="javascript:;">önceki</a></li>
  <li class="seciliSayfaNo"><a href="/page/1/">1</a></li>
  <li><a href="/page/2/">2</a></li>
  <li><a href="/page/3/">3</a></li>
  <li><a href="/page/4/">4</a></li>
  <li><a href="/page/5/">5</a></li>
  <li><a href="/page/6/">6</a></li>
  <li><a href="/page/7/">7</a></li>
  <li><a href="/page/8/">8</a></li>
  <li><a href="/page/9/">9</a></li>
  <li class="sonrakiSayfa"><a href="/page/2/">sonraki</a></li>
</ul>

CSS kodu:

ul.sayfalama{
    padding: 3px;
    border-bottom:1px solid #e7e7e7;
    border-top:1px solid #e7e7e7;
}

ul.sayfalama li{
    list-style:none;
    float:left;
    margin-right:10px;
    line-height:15px;
}

ul.sayfalama li.seciliSayfaNo{
	background: url(images/sayfalama_ard.gif) right top no-repeat;
}

ul.sayfalama li.seciliSayfaNo a{
    color:#e2ffcc;
    text-decoration:none;
    padding:0 4px;
    background: url(images/sayfalama_ard.gif) 0 -15px no-repeat;
    font-weight:bold;
}

ul.sayfalama li a{
    color:#5b5d5a;
    text-decoration:none;
    font-size:12px;
}

ul.sayfalama li.oncekiSayfa a{
    display: block;  
    width: 6px;  
    height: 10px;
    margin:3px 2px 0 0;
    background: url(images/sayfalama_ard.gif) 0 -36px no-repeat;
    text-decoration: none;  
    text-indent:-9999px;
}

ul.sayfalama li.sonrakiSayfa a{
    display: block;  
    width: 6px;  
    height: 10px;
    margin:3px 0 0 0;
    background: url(images/sayfalama_ard.gif) 0 -52px no-repeat;
    text-decoration: none;  
    text-indent:-9999px;
}

Listeleri yanyana koyup, seçili olan ardalanına yuvarlak kenarlı olması için li’ye ardalanın sag kısmını li içindeki bağlantıyada sol kısmını koyuyoruz.

Ayrıca ileri ve geri ikonlarını yine ardalan kaydırma tekniği ile aynı resimden yaralanarak ekliyoruz. Bu teknik şimdilerde sprite tekniği olarak adlandırılıyor. İşin mantığı birden fazla resmi ekleyip http isteklerin sayısı azaltarak sayfa yüklenme hızı arttırıyoruz.

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

Bu örnek bazı kısımlar yazının ilk kısmında anlattıklarınıza uymuyor diyebilirsiniz. Ama tasarımcının tercihleri böyle ve bu yazıyı daha yazmamıştım. Her yazıda bende bir şeyler öğreniyorum.

Bu sayfalamalar dışında bir çok örneği bulabileceğiniz. http://mis-algoritmos.com/2007/03/16/some-styles-for-your-pagination/ sitesini ziyaret etmenizi öneririm.

Kaynaklar

• http://kurafire.net/log/archive/2007/06/22/pagination-101
• http://mis-algoritmos.com/2007/03/16/some-styles-for-your-pagination/
• http://woork.blogspot.com/2008/03/perfect-pagination-style-using-css.html
• http://arjaneising.nl/html/tips-for-better-pagination
• http://www.dynamicdrive.com/style/csslibrary/item/css_pagination_links/
• http://www.thewebhelp.com/css/pagination_style_template/
• http://css.dzone.com/news/a-digg-flickr-pagination-style
• http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
• http://komunitasweb.com/2009/03/42-pagination-design-inspiration/

Google Chrome Safari’nin de alt yapısını oluşturan Webkit alt yapısı ile çalışıyor, buda bize Safari neyi destekliyorsa Google Chrome onu destekler ipucunu veriyor. Bir iki özellik(text-shadow ve @font-face) dışında aynı özellikleri destekliyor. CSS destek listesini görmek içintıklayınız.

Benim gördüğüm tek sorun kısayol background tanımında tanımlanan renkerler gelmiyor. Sayfa yenileme ve 5-10 saniye geçtikten sonra geliyor.

1. background:#f00 url(../images/ardalan.gif) top left repaet-x;

ardalan rengi olan #f00 gelmiyor.

CSS filtrelemesi olarak Safari için kullanılan filtreleme kullanılabilir.

1. <html>
2. <head>
3. <style>
4. body:nth-of-type(1) p{
5.    color: #ff0000; // sadece safari ve chrome görecek
6. }
7. </style>
8. </html>
9. <body>
10. <p>deneme olarak bunu yazıyorum</p>
11. </body>
12. </html>

Javascript ile yakalamak içinde 

1. var is_chrome = navigator.userAgent.toLowerCase().indexOf(‘chrome’) >
   -1;

yeterli oluyor. Ayrıca javascript hata yakalama konsolu için http://www1.qainsight.net:8080/2008/09/04/How+To+View+JavaScript+Errors+In+Google+Chrome.aspxsiteyi incelmenizi öneririm.

Erişilebilirlik açısından karnesi kötü bulunmuş. http://www.paciellogroup.com/blog/?p=92 sitesinde yazdığına göre erişilebilirlik açısından yeterli not alamamış. Tabi bu sitenin testi ne kadar kriter onu bilemem.

Eklentilerinin olmaması görünen en büyük eksiklik gibi. Yakında eklenti desteği geleceğini duymak bizi sevindirdi. 

Sonuç olarak tüm işlerini internetten gören Google gibi bir şirket için bir tarayıcı çıkarmak gecikmiş bir olay. Ayrıca benim acayibime giden Google’un Firefox ile arama alanı için 2011′e kadar uzattığı haberinin üzerinden kısa bir süre geçmesinden sonra internet tarayıcısı çıkarması. İşin içinde farklı hesaplar var gibi. 2006′da Firefox’a 56 milyon dolar ödediğini düşünürsek çok da anlamsız gelmiyor. 

Her yeni çıkan tarayıcının ardından web kod yazarları acaba bu da sorun çıkarırmı düşüncesi sarar ve hemen kodladığı sitleri kontrol eder ki bende öyle yaptım Allah şükür benim sitem(Üst menü ile resim arasında mesafede sorun var) hariç bir sorun yok. Google Chrome Acid 2 testinden geçerken Acid 3 testinden de mevcut tarayıcıların en yüksek puanı olan 79 alması ve standartlar uyması çok güzel bir gelişme. Böyle tarayıcının başımızın üstünde yeri var deriz.

Kaynaklar

Türkçe kaynak

• http://www.macosxpc.com/2008/09/02/googledan-webkit-tabanli-internet-tarayicisi/
• http://cnetturkiye.com/haberler/1267
• http://www.savassakar.com/?p=2029
• http://www.kurumsalhaberler.com/google/bultenler/googledan-yeni-web-tarayicisi-google-chrome
• http://www.potkal.com/yazi_icerik.asp?y1405
• http://www.mondaynay.com/2008/09/google-chrome-beta-web-browser/
• http://www.blicca.com/programlar/internet-tarayicilari/google-chrome-beta.html
• http://turk.internet.com/haber/yazigoster.php3?yazi21847
• http://www.burakkutbay.com/google-chrome-tarayici-analizi/
• http://www.chip.com.tr/konu/Google-Chrome-dan-ilk-guvenlik-acigi_8529.html
• http://blog-tr-ego.blogspot.com/2008/09/chrome-nedir.html
• http://notoku.com/google-chrome-acik-kaynakli-tarayici-projesi/
• http://zokoba.blogspot.com/2008/09/google-chrome-ilk-izlenimler.html
• http://www.mafiamax.com/2008/09/google-chrome-on-incelemesi.html
• http://www.siberkultur.com/?q=google-chrome-cikti
• http://www.webrazzi.com/2008/09/03/google-chrome-hakkindaki-goruslerim-ve-gorusleriniz/
• http://www.mmistanbul.com/makale/title/google-chrome-ve-browser-savaslari

Genel kaynak

• http://www.google.com/chrome/
• http://gizmodo.com/5044958/dr-frankensteins-browser-the-strangely-obvious-ancestry-of-google-chrome
• http://www.mattcutts.com/blog/google-chrome-communication/
• http://mashable.com/2008/09/03/awesome-google-chrome/
• http://blog.wired.com/business/2008/09/chrome-eliminat.html
• http://www.popularmechanics.com/technology/industry/4280717.html
• http://blogs.zdnet.com/hardware/?p=2481
• http://googlesystem.blogspot.com/2008/09/google-chromes-about-pages.html
• http://lifehacker.com/5044484/google-chrome-first-look
• http://www.readwriteweb.com/archives/does_google_have_rights_to_all.php
• http://mashable.com/2008/09/03/awesome-google-chrome/
• http://mashable.com/2008/09/02/chrome-windows/
• http://www.niallkennedy.com/blog/2008/09/google-chrome.html
• http://gigaom.com/2008/09/02/why-did-google-abandon-firefox/
• http://www.tgdaily.com/content/view/39174/118/
• http://www.techcrunch.com/2008/09/02/getclicky-analytics-service-tracking-2-google-chrome-usage/
• http://ptech.allthingsd.com/20080902/first-test-of-googles-new-browser/
• http://webworkerdaily.com/2008/09/02/google-chrome-is-it-ready-for-web-workers/
• http://news.cnet.com/8301-17939_109-10030718-2.html?part=rss&tag=feed&subj=Webware
• http://news.cnet.com/8301-17939_109-10030962-2.html?part=rss&tag=feed&subj=Webware
• http://internetducttape.com/2008/09/02/why-google-chrome-isnt-my-default-browser/
• http://www.zeldman.com/2008/09/03/a-bug-in-google-chrome/
• http://www.evotech.net/blog/2008/09/css-hack-for-google-chrome-and-safari-31/
• http://davidwalsh.name/detecting-google-chrome-javascript
• http://lifehacker.com/5044518/enable-chromes-best-features-in-firefox
• http://lifehacker.com/5044668/beta-browser-speed-tests-which-is-fastest

javascript motoru 

• http://www.blicca.com/haberler/yazilim/mozilla-tracemonkey-vs-chrome-v8.html
• http://arstechnica.com/journals/linux.ars/2008/09/03/new-firefox-javascript-engine-is-faster-than-chromes-v8
• http://prosenjit23.wordpress.com/2008/09/03/google-chrome-mozilla-firefox-microsoft-ie-sunspider-javascript-performance-test-results/
• http://blogs.zoho.com/uncategorized/firefox-31-google-chrome-javascript-wins-flashsilverlight-lose/

Görünüm

Opera 9.5′ın görünümü değişmiş. Daha az seçeneklerin olduğu daha sadece bir görünüm var. Tabi bunu değiştirebiliyoruz.

Sağ altta Genişliği uydur ve Resim seçenekleri bölümü eklenmiş. Aslında bular vardıda buraya kaydırılmış ve biraz düzenlemiş gibi.

Ayrıca temalardan kendimize listede yer alan temalardan birini seçebiliyoruz.  Tem kısmındaki temalar Firefox’un kilere çok benziyor.

Speed Dial ile en sık kullanılan web sitelerini küçük resimleri ile birlikte listeleyebiliyoruz.

Hızlı Bulma

Opera adres barda çok hızlı bir arama söz konusu yazdığınız adrese çok hızlı erişmemizi sağlıyor. Bu özelliği çok sevdim. Ayrıca site içeriklerinide daha fazla ön bellekte tutuyor ve hızlı açmasına neden oluyor.

Standartlara Tam destek

Mevcut kullanılan standartları (X)HTML, XML, XSLT, CSS 2.1, SVG 1.1 ve JavaScript tam olarak desteklemenin yanında yeni özelliklerin (HTML5 ve CSS3) de desteğini barındırıyor. Acid testlerinden geçen Opera 9.5 Acid 3 testinden 83 puan alıyor.

Web Kod Yazarları için DragonFly

Firefox’un web kod yazarları için en büyük avantajı olan FireBug’ın önemini anlayan tarayıcı üreticileri kendi araçlarını üretmeye başladı. Opera için DragonFly bu işi görüyor. Ama daha geliştirlme aşamasında

Daha Hızlı

Opera 9.2′ye göre javascript ve Html yorumlamada 2 kat daha  hızlı.  Ayrıca eklentileri daha hızlı kullanmamıza olanak sağlıyor. Bellek kullanım oranıda çok düşük seviyede.

Güvenlik

Oltalama yöntemi(phishing) ve kötü yazılımlara karşı güvenlik ayarları yükseltilmiş bir Opera ile karşı karşıyayız.

Sonuç

Snuç olarak diyebilirm ki Opera’nın bu Firefox 3′e karşı çıkardığı bir sürüm. Bir şeyi kovalıyorsanız onun gerisinde kalırsınız. Opera’da bu duruma düşmüş gibi. Hızı ile beni etkileyen Opera benim için yine test edeceğim bir tarayıcı niteliğinde olacak

• http://www.opera.com
• http://www.css3.info/opera-95-launches-with-lots-of-css-improvements/
• http://css.dzone.com/announcements/opera-95-now-available-downloa-0
• http://nontroppo.org/timer/kestrel_tests/

z-index tüm elementlere uygulanamaz sadece konumlandırma değeri atanmış elementlere uygulanır. Bunun anlamı eğer bir elementi aynı z-ekseni üzerinde üste veya alt sıraya atmak istiyorsanız ilk olarak konumlandırma değeri atamalısınız.

z-index değeri dokümanımızdaki elementlerin istiflenme sıralarını belirler. z-index elementleri z-ekseninde nerede duracağınız belirler, üstte veya altta. z-indeks değeri küçük olan elementler altta büyük olan elementler ise üstte görünecektir. Sitenizi kodlarken birçok yerde z-index ihtiyaç duymayız çünkü normal sayfa akışında elementler yanyana durduğu için böyle bir özelliğe ihtiyaç yoktur, ne zamanki elementlere konumlandırma değeri tanımladığımızda elementler bir biri üzerine bindiğinde z-index değerine ihtiyaç duyarız. z-index mutlak, göreceli ve sabit konumlandırma atandığı veya elemente eksi değer verilerek konumu değiştirildiğinde uygulanır.

Yapısı: z-index: <deger>
Aldığı Değerler: <sayısal değer > | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: postion uygulanan elementlere
Kalıtsallık: Yok

Konumlandırma değeri relative, absolute ve fixed uygulanmış katmanların görünürlüğünü z-index ile ayarlayabiliriz.

div{
    position:absolute;
    width:150px;
    height:150px;
}
div.bir {
    background: #FEB3BE;
    border:2px solid #CC8B94;
    top: 0;
    left: 0;
}
div.iki {
    background: #E5ECF9;
    border:2px solid #BCCCEB;
    top: 10px;
    left: 10px;
}

Yukarıda örnekte görüldüğü gibi katmanlar üst üste sıralanmıştır. Birbirinden 10px üst ve 10px soldan mesafe bırakılmıştır. Üstte kalan katman alttakileri gizlemiştir. Tüm katmanların z-index değeri atanmamıştır bu nedenle başlangıç değeri olan z-index:auto değerini almışlardır.

<body>
    <div class='kapsul'>
        <div class='bir'></div>
        <div class='iki'></div>
    </div>
</body>

z-index değeri otomatik olduğu için her katman html’deki sırasına göre yerleşmiştir. İlk başta yazılmış olanlar altta sonrakiler üstte olacak şekilde sıralanmıştır.

Eğer katmanları istediğimiz sıra ile göstermek istiyor isek her katmana sırasına göre sayısal değer atamalıyız. Yüksek değer alan katmanlar üstte düşük değer alan katmanlar ise altta kalacaktır. Buna göre istediğimiz görüntüyü elde etmek için z-index değerleri vermeliyiz.

Yukarıda yaptığımız örnekte alttaki kırmızı katmanı üste çıkarmak için z-index değerini 2 versek. Mavi katmanın z-index değerini 1 verirsek katman görünümünü tersine dönecektir.

div{
    position:absolute;
    width:150px;
    height:150px;
}
div.bir {
    background: #FEB3BE;
    border:2px solid #CC8B94;
    top: 0;
    left: 0;
    z-index:2
}
div.iki {
    background: #E5ECF9;
    border:2px solid #BCCCEB;
    top: 10px;
    left: 10px;
    z-index:1
}

İçiçe girmiş katmanlarda z-index davranışları farklıdır. İçiçe geçmiş katmanlardaki z-index:auto değeri gibi davranır ve sayısal atamaları dikkate almaz.

<body>
    <div class='kapsul'>
	    <div class='bir'><div class='iki'></div></div>
    </div>
</body>

z-index değeri yüksek olmasına rağmen bir sınıfını alan katmana altta kalacaktır. Çünkü iç içe geçmiş elementlerde z-index’e atanan sayısal değerler geçersizdir. Sıralama z-index:auto ya göre yapılır.

Sonuç

Sonuç olarak z-index özelliğinin çok kullanışlı ancak sorunları çok bir özellik olduğunu düşünüyorum. Birçok makalede istediğim manada detaylı bir z-index anlatımı bulamadığımı itiraf etmeliyim. Ancak kodlama yaparken aklımızda olması gereken kuralları kavrarsak z-index özelliğini daha bilinçli kullanacağımız kesin:

• z-index değeri; aynı z-ekseninde bulunan(kapsayan elementler hariç) katmanların altta mı üstte mi kalacağınız belirlemek için kullanılır.
• z-index sadece position değeri relative, absolute ve fixed olan nesnelere uygulanır.
• Saydamlık değeri(opacity) 1′den küçük verilen nesnelerde z-index kullanımı daha kolay anlaşılır.

Konumlandırma uygulanmış elementlerde z-index etkileri

• Mevcut sıralama durumunda elementin sırasını belirler
• Elementin kendi kısmındaki durumun belirler

Eğer z-index değeri atanmamış ise z-eksenindeki arkadan öne doğru sıralama aşağıdaki gibidir:

• Normal akıştaki kutular koddaki sıraya göre sıralanır
• float uygulanmış kutular
• Konumlandırma uygulanmış elementlerde ise kodlamadaki sıraya göre

z-indeks ile ilgi bazı problemler ve çözüm önerileri var bunları aşağıda listeledik bu linklerdeki çözümleri incelemenizi tavsiye ederiz. Karşıma çıkan bazı problem ve çözümleri sitede yayınlamaya devam edeceğim.

Kaynaklar

• http://www.search-this.com/2007/08/15/give-me-some-zzzzzs/
• http://www.brainjar.com/css/positioning/default5.asp
• http://joshuaink2006.johnoxton.co.uk/blog/82/flash-content-and-z-index (flash ve html elemtnleri)
• http://www.blooberry.com/indexdot/css/properties/position/zindex.htm (tarayıcı destek)
• http://www.westciv.com/style_master/academy/css_tutorial/properties/page_layout.html#z-index
• http://developer.mozilla.org/en/docs/Understanding_CSS_z-index
• http://css-discuss.incutio.com/?page=OverlappingAndZIndex
• http://csscreator.com/blog/z-index
• http://www.fatihhayrioglu.com/?p=151
• CSS Mastery Advanced Web Standards Solutions
• Cascading Style Sheets The Definitive Guide
• Wrox Beginning CSS 2nd.Edition

Sorunlar ve çözümler

• http://brandonaaron.net/docs/bgiframe/
• http://www.askapache.com/css/getting-flash-to-show-up-in-front-of-content.html
• http://www.last-child.com/conflicting-z-index-in-ie6/
• http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
• http://www.hedgerwow.com/360/bugs/css-select-free.html
• http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx
• http://randsco.com/index.php/2005/09/11/changing_z_index_on_hover

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.

<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 <q>Ehil olmayanlara sabretmek ehil olanları parlatır.</q> sözleri bize yol gösterir.</p>

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alıntı Örneği</title>
<style>
/* IE icin */
q {
font-style:italic;
}
/* Safari ve Firefox icin */
html:not([dummy]) q {
font-style:normal;
}
</style>
</head>
<body>
<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
<q>Ehil olmayanlara sabretmek ehil olanları parlatır.</q> sözleri bize yol gösterir. </p>
</body>
</html>

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

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

<p>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></p>

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alıntı Örneği</title>
</head>
<body>
<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
ol, her ne olursan ol, ya olduğun gibi görün, ya göründüğün gibi ol.</blockquote>
<cite>Mevla'na Celaleddin-i Rumi</cite>
</body>
</html>

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ı Orta Zemin Resmi

Alıntı Alt Zemin Resmi

Şimdi CSS kodumuzu yazalım

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alıntı Örneği</title>
<style>
blockquote {
width: 240px;
margin:0;
padding:29px 0 0 0;
background:url(images/alinti_ust.gif) no-repeat left top;
}
blockquote p {
margin:0;
padding:10px;
color: #fff;
text-align:center;
font:bold 14px/1.7em Georgia, "Times New Roman", Times, serif;
background: url(images/alinti_orta.gif) left bottom repeat-y;
}
cite
{
font-size: 1.2em;
padding-bottom:29px;
display:block;
text-align:center;
color:#C6D9F1;
text-decoration:underline;
width:240px;
background: url(images/alinti_alt.gif) no-repeat left bottom;
}
</style>
</head>
<body>
<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>
<cite>Mevla'na Celaleddin-i Rumi</cite>
</body>
</html>

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

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

Diğer makaleleri yazarken bazı konularda kaynak bulma konusunda ciddi sorunlar yaşadığım oldu, ancak tipografi hakkında makale yazmaya karar verip bilgi toplamaya başladığımda önceki yazılarımın aksine tipografi hakkında çok fazla bilgi bulunduğunu gördüm. Ne yazık ki bunların çoğu yine İngilizce. Bu kaynak çokluğu bu makalemin gecikmesine neden oldu. Ama olsun bilginin fazla olmasınınbir sakıncası yok.

CSS ile birlikte gelen bir çok avantaj mevcut bunları önceki derslerimizde yazdık. Şunu söyleyebilirim ki web sitelerine CSS en büyük katkıyı tipografi kısmından yapmıştır. CSS ile birlikte gelen özellikler sayesinde yazılarımızın birçok özelliğine tek elden kontrol imkanına sahibiz. CSS’in tipografiye direk etkisi olan capitalize, uppercase, lowercase, text-decoration, letter-spacing, word-spacing, text-indent ve line-height özelliklerinin yanı sıra dolaylı etkisi olan margin, border, padding, background-color ve background-images özelikleride vardır.

Ölçü

İlk olarak sayfanın ölçüsüne bakalım. Okunabilir sayfalar yaparken kullanıcıya sunulan metinlerin genişlikleri önem kazanmıştır. Birçok kaynakta sayfanın ölçüsü verilirken karakter sayısı bir birine yakın değerler verilmektedir. Genel olarak tek kolonlu yapı kullanan sayfalarda kolon genişliği 52-78 karakter(boşluklar dâhill) içerecek şekilde ayarlanması tipografi bakımdan uygun görülmüştür. İki kolon bir yapı düşünülüyor ise her bir kolonun 40-50 karakter içermesi daha uygun görülüyor.

400px genişliğinde bir katman içine 12px boyutunda 66 karakter sığdırabiliriz. Ancak yazı boyutunu 16px çıkardığımızda karakter sayısı 50′ye düşecektir.



Eğer genişliklerimizi em cinsinden verir isek katman genişliğini 33em yapıp yazı boyutunu 1em olarak belirlediğimizde 77 karakter sığacaktır. Yazı boyutunu arttırdığımızda mesela 1.5em’e çıkardığımızda satır içindeki karakter sayısı değişmeyecektir, çünkü genişlik değerimizde yazı boyutu ile bağlantılı olduğu için oda artacaktır. Em genellikle elastik sayfalar oluştururken kullanırız. Em ve elastik sayfalar hakkında daha ayrılı bilgi için CSS Birimleri ve CSS İLE WEB SAYFASI OLUŞTURMA II makalelerine  göz atın.

Yazı Tipleri

Tipografi yazı tipi seçimi ile başlar. Bir çok yazı tipi olmasına karşın web’de sadece kullanıcıların bilgisayarında bulunan yazı tiplerini kullanmamız gerekir. Web tarayıcı ve işletim sistemine göre yazı tipi kullanılma oranları gösteren visbone.com listesine bir göz atmanızı tavsiye ederim. Kullanıcının bilgisayarında bulunmayan yazı tiplerinin kullanımı sayfalarımızın kullanıcının bilgisayarında kötü görünmesine neden olabilir.

Burada bir konuya daha değinmeliyiz ki kullanıcının bazı tercihlerine karşı bizim yapacak pek bir şeyimiz kalmaz. Mesela Anti-aliasing(Yazı kenarlarındaki keskin hatların, kırıklıkların giderilmesi, etrafının yumuşak hatlar ile doldurulması.) seçimi genelde Windows kullanıcıları ve Mac kullanıcıları için standart gelen bir seçimdir. Bu yazılarımızın daha oval yani güzel görünmesini sağlar. Ancak kullanıcı anti-aliasing özelliğini kapatması halinde sitemizde kullandığımız yazı tiplerinin görünümü keskin kenarlı görünecektir ve bu bizim istediğimiz olay değildir.

Web üzerinde genel olarak yazı tiplerini iki gruba ayırabiliriz. serif yazı tipi ailesi ve san-serif yazı tipi ailesi. Bu ayrımı aşağıdaki resimde çok iyi bir şekilde görmekteyiz.

serif fontlar yazılı alanda bayağı popülerdir. Web âleminde ise sans-serif fontlar daha popülerdir. Bu söylediğimden web’de hiç serif font kullanılmaz diye bir mana çıkaramayız elbette kullanılabilir ancak sans-serif daha çok tercih edilir. Genel font kullanımı:

body{
	font-family:Arial, Helvetica, sans-serif
}

Şeklindedir. Burada birincil fontumuz Arial’dir alternatifi Helvatica ve yazı tipi ailesi sans-serif olduğunu belirtiyoruz. Normalde sadece Arial yazmamızda yeterlidir, ancak kullanıcının bilgisayarında bu yazı tipinin olmaması durumu düşünülerek alternatif yazı tipi ve yazı tipi ailesi yazılmıştır.

Her ne kadar sadece kullanıcının bilgisayarında bulunan yazıtiplerinin kullanılması önerilmekte ise farklı yazı tipi kullanımınada olanak vardır. Macromedia Flash’ın font gömme özelliğinden yararlanarak istediğimiz yazı tiplerini web sayfamızda kullanabiliriz. Yöntem biraz karmaşık olasada isteyenler için iyi bir çözümdür. Ayrıntılı bilgi için “Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement)” makalemize bir göz atın. Ayrı Microsoft’un yazı tipi gömmek üzerine çalışmaları sürmektedir. Eğer bu çalışmalar olumlu sonuç verirse tipografi açısından çok güzel gelişmeler yaşanacağı kesindir.

Yazı tipi seçimi için bazı kaynaklarda öneriler vardır. Daha geniş ve yüksek yazı tiplerinin web’de daha iyi seçilebildiği ve okunduğu belirtilerek Verdana, Trebuchet ve Helvatica yazı tiplerinin kullanılması önerilmektedir. Ancak ben bu konuyu tasarımcılara bırakmayı yeğlerim açıkçası.

Yazı Boyutu

Web tipografisinde en çok kullanılan özellik yazı boyutudur. Ekran kullanımını en kolay şekilde ayarlamamıza yardımcı olur. Yazı boyutunu belirlerken iki ölçümüz vardır sabit değerler(px vb.) ve göreceli değerler(em, % vb.) Farklı yazı boyutları ile sayfamızdaki hiyerarşiyi ayarlayabiliriz. Bölyelikle daha okunabilir ve düzenli sayfalar elde edebiliriz.

Bir çok web sayfası kodlayıcısı aşağı yukarı tüm sayfalarında belli standart yazı boyutları kullanır. Bizde burada bu genel kullanılan yazı boyutları önerilerini sıralayalım:

• İçerik metinleri için 11px/16.5px arasında değerler
• Ana başlıklar(Anasayfa, Ürünler gibi başlıklar için) 24px
• Ana başlıkların altındaki ikincil başlıklar için 18px
• Menü elemanları ve üçüncü derece başlıklar için 16px
• Diğer başlıklar için 13px

Genel bir css kodunu yazarsak

body {font: 11px/1.5em "Lucida Grande"; } 

h1, h2, h3, h4, h5, h6 {font-family: helvetica, arial, verdana, sans-serif; font-weight: normal;} 

h1 { font-size: 24px; }

h2 { font-size: 18px; }

h3 { font-size: 16px; line-height:2; }

h4 { font-size: 13px; line-height:1.25; font-weight:bold; }

h5 { font-size: 12px; font-weight:bold; }

h6 { font-size: 12px; }

veya em cinsinden

body {font: 11px/1.5em "Lucida Grande";} 

h1, h2, h3, h4, h5, h6 {font-family: helvetica, arial, verdana, sans-serif; font-weight: normal;} 

h1 { font-size: 3em; }

h2 { font-size: 2em; }

h3 { font-size: 1.5em; line-height:2; }

h4 { font-size: 1.2em; line-height:1.25; font-weight:bold; }

h5 { font-size: 1em; font-weight:bold; }

h6 { font-size: 1em; }

Bu konuda çok güzel bir doküman hazırlayan BluePrint CSS Anaçatısının tipografi kısmına göz atmanızı tavsiye ederim.

Satır Yüksekliği(line-height)

Web tipografisinin en önemli özelliklerinden biridir satır yüksekliği tanımı. Metinlerin görünümünde büyük etkisi vardır. Satır yüksekliği için genel kabul yazı boyutunun1.4-1.6 katı kadar bir mesafedir.

body {
    font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    line-height: 1.5em;
}

CSS kısaltmalarında tek yazı tipi değerine tüm yazı özellikleri ekleme imkanı sunar.

body {
	font:11px/1.5em "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

Yazılara Vurgu Eklemek

CSS ile yazılarımızın önemli kısımlarını vurgulamak için bir kaç yöntem kullanırız.

Kalın: Vurgu için en çok kullanılan özellik yazıyı kalın yapmaktır. Normalde yazı tiplerinin kalın halleride vardır ancak web yazı tiplerinde böyle bir seçim yapamıyoruz bu nedenle yazılarımıza kalınlık kazandırmak için

h1{
	font-weight:bold;
}

kodunu kullanırız. Kalın yazılmış yazılar diğer yazılara göre  daha dikkat çekici görünecektir. Genelde başlıklar ve önemli alanlar kalınlaştırılır.

Eğik: Vurgu için ikinci olarak eğik(italik) yazı şekli kullanılır. Eğik yazı şekli ekranda okunurluğu azaltsa da kullanıcıya farklı bir görünüm ile dikkat çeker.

blockquote  { margin: 1.5em 0 1.5em 1.5em; color: #666; font-style: italic; }

Altıçizili: Üçüncü olarak altı çizili yazılar kullanılır. Web’de genelde altı çizili yazılar link olarak kullanılır ve böyle algılanır.

a{ color: #125AA7; text-decoration: underline; outline: none; } 

Renk: Yazılarımızda farklı alanlara vurgu yapmak için kullanılan özelliklerden biride renk(color) özelliğidir. Meselahatalı alanları belirlemek için kırmızı renk kullanımı yaygındır.

.hata{ color:#f00}

Büyük Yazı: Vurgu yapmak için nadiren de olsa tipografi bakımdan buda kullanılabilir bir seçenektir ama en azkullanılan vurgu tipidir.

Metin hizalama

CSS’in metin ve sayfa yatay hizalaması içintext-align özelliğini kullanırız. 

Aldığı değerler:  left(metni sola yaslar), right(metni sağa yaslar)ve  justify (metni iki yana yaslar) ve center(metini ortalar). Genelde leftdeğeri kullanılır. justify değeri uzun içerikli metinlerde kullanılanılabilir ancakbazı bölümlerde kötü görünüme neden olabilir. Özellikle son satırda sorunları vardır.

justify(iki yana hizalı)  kullanımında meydana gelen sorunları gören W3C çalışmaları devam eden CSS3 ile birlikte inter-word veinter-character özelliklerini eklenmiştir.Bu özellikler yardımı ile ileride justify özelliğini daha fazla kullanacağımızıdüşünüyorum.

Ayrıca CSS3 ile birlikte text-align-lastözelliğide gelmektedir ki  bu özellik sayesinde justify ataması yaptığımızmetinlerin son satırında meydana gelen kelimeler arası fazla boşluk sorununuçözmüş olacağız. Ancak biraz daha sabır gerekiyor.

Harf Aralığı(letter-spacing)

Aslında bir kod yazarı letter-spacing özelliğine pek dokunmaz. Webtarayıcılarının tercihine bırakır bu değeri. Genelde atanan değerler makuldeğerlerdir, ancak mesela başlıklarda daha yüksek harf aralıkları kullanarakbaşlık ve metin arası farklılığı belirtilmiş olur ve başlıklarımız daha belirginhale getirebiliriz. Özel kullanımlarda yararlı olabilecek bir özelliktir.

Sözcükler Arası Mesafe(word-spacing)

Bu özellikte genelde dokunulmayan özellikler arasındadır. Ancak her web sayfası aynıdeğerleri kullanacak diye bir şey yoktur. Bazen farklı sonuçlar elde etmek içinfarklı değerler kullanabiliriz.

p {word-spacing: .2em;} 

Paragrafın ilk satırını içeriden başlatmak (text-indent)

Birçok dergi, gazete ve yazıda karşılaştığımız bu yöntemi CSS yardımı ile çok basit bir şekilde yaparız.

p {
	text-indent: 2.5em;
}

Göreceli değer kullanmak daha mantıklıdır.

Sonuç

blueprint tipografi uygulamalarını göz atın . http://bjorkoy.com/blueprint/typography-test.html

Web tipografisinde CSS’in yeri çok önemlidir. sFIR gibi yeni metotların geliştirilmesi ile web’de tipografi bakımından daha iyi sonuçlar alacağımıza inanıyorum. Ancak sFIR bana biraz zorlama bir metot gibi geliyor. Bu konuda işletim sistemi üreticilerinin daha farklı çözümlere gitmeleri gerektiğini düşünüyorum. Microsoft‘un bu yönde çalışmaları var ancak hala tam sonuçlanmış çözümler değil.

Son olarak CSS ile yapılabileceklere bir örnek olması açısından 3point7designs.com yaptıklarına bir göz atmanızı öneriyorum. Sınırları zorlayan güzel örnekler

Kaynaklar

• http://webtypography.net/toc/
• http://www.sitepoint.com/print/anatomy-web-fonts
• http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/
• http://www.digital-web.com/articles/css_typography/ (css ve tipografi hakkında genel bir yazı)
• http://www.digital-web.com/articles/css_101/ (uygulamalı css ve tipografi)
  
• http://www.fotografya.gen.tr/issue-6/hasip.html (genel tipografi bilgisi Türkçe)
  
• http://www.webmonkey.com/design/fonts/tutorials/tutorial3.html (Çok geniş bir tipografi bilgisi)
  
• http://clagnut.com/search/index.php?q=typography (tipografi linkleri)
• http://www.wpdfd.com/issues/23/typography/ (genel bilgi)
• http://www.3point7designs.com/blog/2006/09/20/advanced-typography-techniques-using-css/  (farklı metin uygulamaları)
  
• http://www.alistapart.com/articles/sizematters/ (font boyutunu farklı tarayıcılarda farklı olma sorunu ve çözümü)
  
• http://www.lifeclever.com/web-typography-40-resources-tools/ (Tipografi araçları)
  
• http://www.mandarindesign.com/troops.html (uygulamlar var)
  
• http://www.3point7designs.com/blog/2007/08/16/web-typography-50-sources-for-inspiration-and-instruction/
• http://typetester.maratz.com/
• http://www.webstyleguide.com/type/
• http://www.sitepoint.com/blogs/2007/04/30/typography-baseline-rhythm-deciphered/
  
• http://ceyhunaksan.com/css-ve-tipografi/
• http://topfunky.com/baseline-rhythm-calculator/ (tipografi çevirimiçi aracı)
• http://www.wpdfd.com/issues/23/typography/
• http://www.peachpit.com/store/product.aspx?isbn=0321305256

CSS2 ile birlikte gelen bu özelliklerden birçoğumuzun haberi olmayabilir. Ancak bizlere yardımcı olacak bu özelliklere göz atmak güzel. Bu özellikleri uygulamamızda en önemli etken tabiki IE’nin bu özelliklerin bir kısmını desteklememesidir. Bu tabiki IE’ye puan kaybettiriyor ve Microsoft’da bunun farkına geçte olsa vardığı söyleniyor ve IE8 ile birlikte tam CSS desteğini bizlere sunacakmış, tabi o zamana kadar Firefox IE’yi silip süpürmezse :D

• table-layout
• caption-side
• border-collapse
• border-spacing
• empty-cells

table-layout

Yapısı : table-layout: <deger>
Aldığı Değerler : auto | fixed | kalıtsallık
Başlnagıç değeri: auto
Uygulanabilen elementler: display: table ve display:inline-table olarak belirlenen elementlere
Kalıtsallık: Var

Normalde tablolar içeriğindeki bilgiye göre genişliğini arttırır. Bu bize bir esnek kazandırır ancak bazen tablo genişliğimizin sabit kalmasını isteriz. table-layout:fixed değeri tablo genişliğimizi sabitlememizi sağlar. table-layout:auto ise tablo genişliğini içeriğe göre arttırır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table-layout örneği</title>
<style>
table.otomatik {table-layout: auto; width: 350px; border-collapse: collapse;}
table.sabit {table-layout: fixed; width: 350px; border-collapse: collapse;}
td, th {border: 1px solid;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="otomatik">
  <caption>
  Limitli ADSL Fiyatları
  </caption>
  <tr>
    <th>Hızı*(Kbps) </th>
    <th>Kota(GB) </th>
    <th>Bağlantı Ücreti** </th>
    <th>Aylık Ücret </th>
    <th>Limitin Üzerindeki Her MB için Ücret*** </th>
  </tr>
  <tr>
    <td>1024/256'e kadar</td>
    <td>4</td>
    <td rowspan="3">29 YTL</td>
    <td>29 YTL</td>
    <td>0,010 YTL</td>
  </tr>
  <tr>
    <td>1024/256'e kadar</td>
    <td>6</td>
    <td>39 YTL</td>
    <td>0,009 YTL</td>
  </tr>
  <tr>
    <td>2048/512'e kadar</td>
    <td>6</td>
    <td>49YTL</td>
    <td>0,009 YTL</td>
  </tr>
</table>
&nbsp;
<table cellpadding="0" cellspacing="0" class="sabit">
  <caption>
  Limitli ADSL Fiyatları
  </caption>
  <tr>
    <th>Hızı*(Kbps) </th>
    <th>Kota(GB) </th>
    <th>Bağlantı Ücreti** </th>
    <th>Aylık Ücret </th>
    <th>Limitin Üzerindeki Her MB için Ücret*** </th>
  </tr>
  <tr>
    <td>1024/256'e kadar</td>
    <td>4</td>
    <td rowspan="3">29 YTL</td>
    <td>29 YTL</td>
    <td>0,010 YTL</td>
  </tr>
  <tr>
    <td>1024/256'e kadar</td>
    <td>6</td>
    <td>39 YTL</td>
    <td>0,009 YTL</td>
  </tr>
  <tr>
    <td>2048/512'e kadar</td>
    <td>6</td>
    <td>49YTL</td>
    <td>0,009 YTL</td>
  </tr>
</table>
</body>
</html>

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

caption-side

Yapısı :caption-side: <deger>
Aldığı Değerler :top | bottom | inherit
Başlnagıç değeri:top
Uygulanabilen elementler:display: table-caption olarak belirlenen elementlere
Kalıtsallık:Yok

Not: CSS2 ile birlikte left ve right değerleride vardı ancak kullanışsızlığı nedeni ile CSS2.1′de kaldırıldı.

caption-side:Tablonun başlığının(<caption>) nerede(altta mı üstte mi) olacağını belirler.

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

Bu özelliği IE(ie5+/mac destekliyor) desteklemiyor. Tüm tarayıcıların desteklediği şekilde kod yazmak için <caption> etiketininalignözelliği kullanılmalıdır. Örnek:

<caption align="bottom">
ve
<caption align="top">

border-collapse

Yapısı :border-collapse: <deger>
Aldığı Değerler :collapse | separate | kalıtsallık
Başlangıç değeri:separate
Uygulanabilen elementler:display:table ve display:table-caption olarak belirlenen elementlere
Kalıtsallık:Var

border-collapse, tablo hücrelerinin etrafındaki kenarlık ile olan mesafeyi azaltmamızı veya açmamızı sağlar.separateataması yapılmış ise hücreler arasına bir kaç piksellik mesafe konur, HTML içinden bu boşlukları <table> etiketinin cellspacing özelliği ile kaldırmak istesek bile tarayıcılar bu seferde iki kenarlığı bir bir üstü gösterecektir. Eğercollapsedeğeri verilirse iki hücre arasındaki mesafe kalkacaktır ve tek kenarlık görünecektir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border-collapse örneği</title>
<style>
table.ayri { border-collapse: separate; }
table.birlesik { border-collapse: collapse; }
td { border: 1px solid black; padding: 3px; }
</style>
</head>
<body>
<table cellspacing="0" class="ayri">
  <tr>
    <td>hücre1</td>
    <td>hücre2</td>
  </tr>
  <tr>
    <td>hücre3</td>
    <td>hücre4</td>
  </tr>
</table>
&nbsp;
<table border="0" cellspacing="0" class="birlesik">
  <tr>
    <td>hücre1</td>
    <td>hücre2</td>
  </tr>
  <tr>
    <td>hücre3</td>
    <td>hücre4</td>
  </tr>
</table>
</body>
</html>

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

border-spacing

Yapısı :border-spacing: <deger>
Aldığı Değerler :<uzunluk> <uzunluk>? | inherit
Başlangıç değeri:0
Uygulanabilen elementler:display:table ve display:table-caption olarak belirlenen elementlere
Kalıtsallık:Var

border-spacing, normal uzunluk değerleri alır veborder-collapse:separateile birlikte kullanılır. Eğer tek değer verilirse bu tüm kenarlar için geçerlidir, iki değer atanırsa ilki yatayda boşluk için ikincisi dikey de boşluk vermek için tanımlanmıştır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border-spacing örneği</title>
<style>
table.ayri { border-collapse: separate; border-spacing: 3px 5px; }
table.birlesik { border-collapse: separate; }
td { border: 1px solid black; padding: 3px; }
</style>
</head>
<body>
<table cellspacing="0" class="ayri">
  <tr>
    <td>hücre1</td>
    <td>hücre2</td>
  </tr>
  <tr>
    <td>hücre3</td>
    <td>hücre4</td>
  </tr>
</table>
&nbsp;
<table border="0" cellspacing="0" class="birlesik">
  <tr>
    <td>hücre1</td>
    <td>hücre2</td>
  </tr>
  <tr>
    <td>hücre3</td>
    <td>hücre4</td>
  </tr>
</table>
</body>
</html>

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

empty-cells

Yapısı :empty-cells: <deger>
Aldığı Değerler :show | hide | kalıtsallık
Başlangıç değeri:show
Uygulanabilen elementler:display:table-cellolarak belirlenen elementlere
Kalıtsallık:Var

Bir tabloya bazı değerler atadığımızda(örneğin kenarlık değeri) boş olan hücreler bu değeri görmez, bu durumu düzeltmek için boş olan hücreler için boş karakter( ) koyarız genel.empty-cellsözelliği ile boş kalan hücrelere nasıl davranması gerektiğini bildirebiliriz. göster(show) değeri ile hücrenin içeriği olan hücreler ile aynı özellikleri almasını sağlayabiliriz. gizle(hide) değeri ile de hücrenin yokmuş gibi davranmasını sağlarız.

Bu özellik Internet Explorer tarafından desteklenmemektedir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>empty-cells örneği</title>
<style>
table.goster { empty-cells:show }
table.gizle { empty-cells:hide }
td { border: 1px solid black; padding: 3px; }
</style>
</head>
<body>
<table cellspacing="0" class="goster">
  <tr>
    <td></td>
    <td>hücre2</td>
  </tr>
  <tr>
    <td>hücre3</td>
    <td>hücre4</td>
  </tr>
</table>
&nbsp;
<table border="0" cellspacing="0" class="gizle">
  <tr>
    <td></td>
    <td>hücre2</td>
  </tr>
  <tr>
    <td>hücre3</td>
    <td>hücre4</td>
  </tr>
</table>
</body>
</html>

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

Kaynaklar

• http://www.w3.org/TR/REC-CSS2/tables.html
• http://www.w3schools.com/css/css_table.asp
• http://www.blooberry.com/indexdot/css/propindex/table.htm