Web kod yazarları için büyük kolaylık sağlayan FireBug’ın yeni sürüm çıktı ama kimseden ses çıkmadı. Belkide Google Chrome duyurusunun altında ezildi. Ama Google Chrome’un benim için en büyük dezavantajı FireBug gibi gelişmiş bir CSS ve XHTML aracının olmamasıdır. Aslında ben bile geç kaldım, çünkü ben yazana kadar 1.2.1 sürüm çıktı.

FireBug’ın yeni sürümünde daha çok hata düzeltme, güvenlik düzeltmeleri ve kararlı hale getirme işlemleri göze çarpıyor.

Göze çarpan özellikleri incelersek;

Firefox 3 Desteği

Benim Firefox 3′e geçmememin en büyük nedeni FireBug’ın kararlı bir şekilde Firefox 3′de çalışmaması idi. FireBug 1.2 sürümünde Firefox 3 desteğini sunarak bizi bu dertten kurtarmış oluyor. Artık Firefox3 kullanıyorum ve çok memnunum.

Araçlar daha kaliteli hale getirilmiş

Javascript panel, net paneli  ve Konsol paneli yenilenmiş ve geliştirilmiş. Bu panellerdeki birçok sorun giderilmiş.

Panellerin Aktifleşmesini Seçebiliyoruz

John Resig’in söylediğine göre görünüşte o kadar önemli olmasada bu sürümün en önemli özelliği olarak gösteriyor.

Bu özelliğin bize ne gibi avantajı var derseniz. https://wiki.mozilla.org/User:Rcampbell/Firebug_performance bu çalışmaya göz atmanızı öneririm. Her pencerede FireBug Javascript panelinin açık olması performansı ciddi mana da etkiliyor. Bu nedenle böyle özellik ekleyerek FireBug’ın bir handikapınıda gidermişler.

Artık Javascript panel, net paneli  ve Konsol panellerinin aktif ve pasif olmasını ayarlayabiliyoruz. Normal durumda HTML, CSS ve DOM panelleri çalışıyor, Javascript, Net ve Konsol panelleri ise bizim seçimimize göre aktif ve pasif hale getirilebiliyor.

Yeşil ok işareti yerine FireBug kendi böcek ikonun koymuş. Böcek ikonu eğer Javascript panel veya net panel aktifleştirilirse normal rengini alıyor. Farenin imlecini üzerine getirince kaç sitede aktif olduğu bilgisini gösteriyor.

Önceki sürüm da olan bu sitede FireBug’ı kullanma özelliği biraz daha geliştirilmiş. Aktif site listesinin bulunduğu ayrı bir pencere ile bu kısım geliştirilmiş.

Birlikte Aç Ekranı

Belki birçok kişi için önemsiz gibi görünen bir özellik ancak benim için çok önemli ve kullanışlı bir ekleme oldu. Çünkü buradan kopyalayıp yapıştırmak sorun oluyor, koddan başka içerikleride alıyordu falan ve her defasında kopyala yapıştır gına getiriyordu bazı projelerde.

Bu ekrandan açmak istediğimiz editörleri seçebiliyoruz ekleyip çıkarabiliyoruz.

Suspend/Resume Firebug

Yeni eklenen bu özellik sayesinde FireBug’ın tüm panellerini bir tık ile askıya alabiliyoruz ve daha sonra bu işlemi geri alabiliyoruz. Bu daha çok cep telefonundaki tek tuş gibi bir şey.

Rainbow FireBug ile javascript kodları daha anlaşılır

FireBug’daki javascript kodları renklendirme yapılmadığı için kod yığını şeklinde görünüyor bunu aşmak için güzel bir eklenti hazırlamışlar.

https://addons.mozilla.org/en-US/firefox/addon/7575

Bu eklenti her ne kadar test aşamasında olsa da güzel bir eklenti.

Son olarak Firefox’um Türkçe olduğu için sanırım FireBug’ımda Türkçe oldu. İlk başta bazı sorunlar olsada kullandıkça alışıyor insan. Bazı bölümler hala İngilizce kalmış.

Bu arada FireBug 1.3 çalışmalarına başlanmış bile.

Kaynaklar

• http://ejohn.org/blog/firebug-12-released/
• http://code.google.com/p/fbug/source/browse/branches/firebug1.2/docs/ReleaseNotes_1.2.txt
• https://addons.mozilla.org/en-US/firefox/addon/1843
• http://www.railsjedi.com/posts/24-Firebug-1-2-Excitement açılmıyorsa http://64.233.183.104/search?q=cache:nJW1FmPsOkUJ:www.railsjedi.com/posts/24-Firebug-1-2-Excitement+Firebug+1+2+Excitement&hl=en&ct=clnk&cd=1&client=firefox-a
• http://ajaxian.com/archives/firebug-12-beta-for-firefox-3-rc-1
• http://blog.mozilla.com/about_mozilla/2008/08/25/firebug-12-released/
• http://www.ajaxonomy.com/2008/javascript/firebug-12-released
• http://ajaxian.com/archives/firebug-12-the-final-release-is-out-there
• http://ostatic.com/171732-blog/firebug-group-releases-1-2
• http://justtalkaboutweb.com/2008/04/09/firebug-12-works-with-firefox-3-beta-5/

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

<div class="test"></div>

Bu kod Firefox’da sorunsuz çalışmasına karşın IE’de yükseklik 10px görünecektir. Bir bakıma IE boş içeriğin yüksekliğini 10px kabul ediyor, ancak bu bizim işimizi bozuyor. Çözüm ise çok basit.

.test {
font-size: 0;
height: 1px;
width: 100px;
background-color: black;
}

Sadece font-size tanımını 0 atamamız yeterli.

Kaynak: http://vaig.be/2007/04/07/div-styleheight-1px-bug-in-ie/

Bu konuya daha önce CSS ile konumlandırma(positioning) kısmında kısaca değinmiştik.

"Sabitkonumlandırma Mutlak Konumlandırmanın bir alt kategorisidir. Sabit konumlandırılmış elementin sayfadaki görünümü çok farklıdır. Bunu özellikle web sayfasında bir elementin konumunu sabitlemek için kullanabiliriz. Sabit konumlandırma ile yerleştirilmiş element belirtilen yerde asılı kalacaktır. Web tarayıcısının kaydırma çubuğu aşağı yukarı kaydırılması ile Sabit Konumlandırma ile yerleştirilmiş elementin yeri değişmeyecektir ve sabit kalacaktır. Ne yazık ki IE 6 bu özelliği desteklemiyor. IE 7 strick yorumlayıcısı kullanılıyorsa destekliyor diğer hallerde desteklemiyor. "

Şeklinde genel bir bilgi verip bırakmıştık. Şimdi biraz daha ayrıntısına inelim.

Sabit konumlandırmayı sayfanın belli bir alanını sabitleyip diğer alanları bu kısmın yanından, altından kaydırmak için kullanırız genelde.

Aslında bunun için CSS bize position:fixed kodunu sunmaktadır. Ancak bu kodu IE6 ve önceki sürümlerde desteklememesi bize alternatif çözümler aramaya sevk ediyor. Buda bize bir makale yazma gereksinimi doğuruyor.

İlk metodumuz normal konumlandırma özelliğinin fixed uygulanmış şeklidir.

<!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>
<style type="text/css">
body {
margin:0;
padding:0;
}
div#ustKisim {
position:fixed;
background: gray;
color: yellow;
height:50px;
width:100%;
top:0;
left:0;
}
div#icerik {
margin:75px 0 0 0;
}
</style>
</head>
<body>
<div id="ustKisim">Lorem ipsum dolor sit amet</div>
<div id="icerik">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nec erat. Fusce magna massa, nonummy eget, aliquam tempus, imperdiet vel, odio. Sed mauris. Quisque sodales urna vitae lorem. Vestibulum aliquet, odio aliquam convallis lobortis, turpis metus semper ligula, ut vulputate sem justo eu quam. Sed feugiat, lectus sit amet porttitor auctor, nulla odio volutpat nisl, sit amet egestas augue diam at urna. Sed justo arcu, luctus eget, porta in, auctor sit amet, massa. Integer interdum. Nunc condimentum scelerisque enim. Pellentesque orci. Maecenas at neque. Sed non diam ac turpis pretium dictum. Phasellus ligula felis, aliquet nec, tristique non, posuere a, magna. Duis eu quam quis tortor vehicula sodales. Donec et mi eget augue bibendum interdum. Proin dapibus odio.</p>
</body>
</html>

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

Baştada belirttiğimiz gibi buradaki en büyük sorunumuz IE6 ve daha eski sürümlerde bu kodun çalışmamasıdır. Bundan sonraki metot buna çözüm aramak içindir.

IE6′da çalışan postion:fixed metodu

Bu metot IE’un css içinde expression() komutunu yardımı ile javascript kodu işletmemize izin vermesi prensinden dayanır. Bizde bu metodda bu komut yardımı ile position:fixed sorununu çözeceğiz. expression() yardımı ile daha önce IE’nin min-width ve min-height sorununu çözdüğümüzü hatırlayın.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sabit Konumlandırma</title>
<style>
body {
background: #ffc;
font: 12px sans-serif;
margin: 0;
padding: 0;
}
div#ustAlan {
width: 100%;
height: 100px;
background: pink;
position: fixed;
top: 0;
left: 0;
z-index:100;
}
#icerik{
position:absolute;
top:105px;
}
</style>
<!–[if lt IE 7]>
<style>
body {
background: #ffc url(’http://’) fixed;
}
div#ustAlan {
position: absolute;
top: expression(eval(documentElement.scrollTop));
}
</style>
<![endif]–>
</head>
<body>
<div id="ustAlan">Sabit Konumlandırma</div>
<div id="icerik">
<p>Lorem ipsum dolor sit amet ….</p>
</div>
</body>
</html>

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

Yukarıdaki kodu iki kısımda inceleyebiliriz. Birinci kısım ilk örnekte olduğu gibi position:fixed kullanılan IE7, FF, Opera ve Safari için yazılan kısımdır. İkinci kısım IE7′den önceki sürümleri belirten şartlı koşul içerisindeki kodlamadır. Bu sürümlerde position:fixed desteklenmediği için postion:absolute değeri atanmış ve üst değerimizi(top) javascript’in documentElement.scrollTop değeri yardımı ile belirlenip sabitlenmiştir.

Ayrıca alt alanı sabitlemek için

bottom: auto;
top: expression((documentElement.scrollTop + documentElement.clientHeight – this.clientHeight));

Kodlaması kullanılır. Örneği görmek için tıklayınız.

Sabitlemek istediğimiz nesneyi üstten 10piksel aşağıda sabitlemek için

top: expression(eval(documentElement.scrollTop) + 10);

şeklinde kodlarız. Bu kodlama tekniği kullanılarak birçok farklı şablon elde edilebilir.

Bu yöntemin bazı sorunları vardır, bunlara değinmeden geçmeyelim.

• Bu metot IE5′de ve IE7, IE6′da garip modda çalışmaz.
• Bu metot javascript’in hizmet dışı bırakıldığı tarayıcılarda çalışmaz.
• background: url(‘http://’) fixed; anlamsız kodu kullanılmaktadır. Bu kod kaydırma çubuğu hareket ettikçe sabitlenen nesnenin kıpranmaması içindir.

Bunun dışında bir çok alternatif yöntem vardır. Benim deneyip en son kullanmaya karar verdiğim metot bu olduğu için sizlere bu kodu gösterdim. Ancak diğer örnekleri görmeniz için alternatif çalışmaların linklerini kaynaklar kısmında sizlere vereceğim.

Kaynaklar

• http://home.tampabay.rr.com/bmerkey/examples/fake-position-fixed.html
• http://tagsoup.com/cookbook/css/fixed/
• http://annevankesteren.nl/test/examples/ie/position-fixed.html
• http://annevankesteren.nl/2005/01/position-fixed-in-ie
• http://annevankesteren.nl/2004/07/fixed-positioning
• http://www.howtocreate.co.uk/fixedPosition.html
• http://www.cssplay.co.uk/layouts/fixed.html
• http://www.cssplay.co.uk/layouts/body2.html
• http://www.cssplay.co.uk/layouts/fixit.html
• http://www.gunlaug.no/contents/wd_additions_15.html
• http://www.gunesintamicinde.com/ie-6-ve-position-fixed-problemi/

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 örneğimiz. Bir arama metin kutusuna başlangıç değeri olarak açıklayaıcı bir bilgi gireceğiz ve kullanıcı bu alana odaklandığında(onfocus) metni sileceğiz.

<p> Ad Soyad<br />
<input type="text" id="ara" name="ara" value="Ara" onfocus="if(this.value=='Ara'){this.value=''};" onblur="if(this.value==''){this.value='Ara'};" />
</p>

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

metin kutusunun onfocus olayına eğer değer bizim girdiğimiz değer ise boşaltmasını söylüyoruz. Tabi birde kullanıcının bu metin kutusu dışına çıktığında bu alanı eski hali getirmek içinde onblur olayını kullanıyoruz. Burada dikkat edilmesi gereken nokta metin kutusuna atadğımız bağlangıç değeri(value="Ara") ile sorgudaki alanın(if(this.value==”)) bir biri ile aynı olmasıdır.

İkinci örneğimizde bu efekte zemin rengi özelliğinide katarak daha güzel bir etki vereceğiz.

<p>Ad Soyad<br />
<input type="text" id="ara" name="ara" value="Ara" onfocus="if(this.value=='Ara'){this.value=''; this.style.backgroundColor='#efefef'};" onblur="if(this.value==''){this.value='Ara'; this.style.backgroundColor='#ffffff'};" />
</p>

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

Burada dikkat edilecek konu onblur durumunda zemin rengini ilk haline döndürmektir.

Form alanları genelde örnekte verdiğimiz gibi tek metin kutusundan oluşmaz. Genelde bir çok metin kutusu, işaret kutusu, açılır menü gibi elemanların alt alta sıralanmasından oluşur. son örneğimizde bu elementler arasında kullanıcının odaklandığı elementini kapsayan alanın zemin rengini değiştirerek dikkati bu alana çekeceğiz.

<style type="text/css">
.odaklan{
background-color: #FFFFE0;
padding:10px 5px;
border:1px solid #CCCCCC;
}
.normal{
background-color:#FFFFFF;
padding:10px 5px;
}
</style>
<p class="normal">Ad Soyad<br />
<input type="text" id="ara" name="ara" value="Ara" onfocus="if(this.value=='Ara'){this.value=''; this.style.backgroundColor='#efefef'; this.parentNode.className='odaklan'};" onblur="if(this.value==''){this.value='Ara'; this.style.backgroundColor='#ffffff'; this.parentNode.className='normal'};" /> </p>

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

Burada form alanına ve kapsayan paragrafa farklı renk atayarak daha fazla dikkat cekici lanlar oluşturduk.

Not: Bu örnekler FF1, IE5, Opera7.5 ve Safari3.0/Win çalışmaktadır.

Bu işlemleri aslında biz CSS ilede yapabiliriz. :focus özelliği bu işlevi görür, ancak bu özellikleri IE desteklemediği için bu özelliği kullanamıyoruz.

input:focus
{
    background-color: #FFFFE0;
    color: white;
}

Bu kodu IE’nin desteklemesi için bir javascript kodu eklememiz gerekiyor.

sfFocus = function() {
var sfEls = document.getElementsByTagName("INPUT");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onfocus=function() {
this.className+=" sffocus";
}
sfEls[i].onblur=function() {
this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfFocus);

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

İ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

Kutu elementlerin görünümüne çeşitli etkiler yapan özellikleri göreceğiz bu makalede çoğu CSS2 ile birlikte gelen bu özellikler aşağıda sıralanmıştır.

• overflow – taşma
• clip – kırpma
• visibility – görünürlük

Overflow

Yapısı: overflow: <deger>
Aldığı Değerler: visible | hidden | scroll | auto | inherit
Başlnagıç değeri: visible
Uygulanabilen elementler: blok-level elementler ve replacement elementlere
Kalıtsallık: Yok

Türkçeye taşmak(overflow) olarak çevirdiğimiz bu özellik sınırlarını belirlediğimiz kutu elementinin içeriğinin sınırları aşması durumunda nasıl davranacağını bildiren bir özelliktir. Özelliğe atanan değerleri tek tek incelersek.

• inherit – kalıtsallık üst elementin değerini alabilir
• visible – kutu sınırları dışına taşan alanları göster
• hidden – kutu sınırları dışına taşan alanları gizle.
• scroll – kutu sınırlarını taşan kısmı kaydırma çubuğu ile ulaşmamızı sağlar.
• auto – kutu sınırlarını aşması durumunda scroll ile aynı etkiyi yapar.

overflow:visible Overflow’ın başlangıç değeri visible’dır. Bu değer taşma olan kısımların gösterilmesini sağlar.

div#solMenu {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 120px;
background: #BBB;
overflow: visible;
}

Kodun yeni nesil tarayıcılardaki görünümü

overflow özelliğinin değeri visible olduğu için içerik taşmasına rağmen taşan bölümler gösterilmiştir.

overflow:scroll Eğer içeriğin taşmasını engellemek istiyorsak ama yinede taşan kısımlara ulaşılması için kaydırma çubuğu çıkması için scroll özelliği ekleriz.

div#solMenu {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 120px;
background: #BBB;
overflow: scroll;
}

overflow:scrool olma durumu

overflow:hidden Eğer overflow:hidden değeri atarsak. Sınırladığımız kutunun dışına taşan kısımlar gösterilmeyecektir.

div#solMenu {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 120px;
background: #BBB;
overflow: hidden;
}

kodu bu şekilde değiştirdiğimizde görüntü aşağıdaki gibi olacaktır.

overflow:auto Son olarakta otomatik değeri vardır. Bu değeri atayınca kutu içeriğine göre otomatik işlem yapacaktır. Eğer taşma olmuyorsa kaydırma çubuğu çıkmayacaktır. Ama eğer içerik taşıyorsa kaydırma çubuğu çıkacaktır.

div#solMenu {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 120px;
background: #BBB;
overflow: hidden;
}

Dikkat ederseniz scroll’dan farklı olarak sadece dikey kaydırma çubuğu çıkmıştır. Yatayda bir taşma olmadığı için yatay kaydırma çubuğu çıkmamıştır.

Örneği görüntülemek için tıklayınız.

Safari’nin eski sürümlerinde sorun çıkarıyor Javascript ile bir çözüm var. http://blog.deconcept.com/2005/03/25/safari-and-links-to-elements-in-overflow-auto-content

Operadaki sorun için ise sadece min-height ve min-width özelliklerini kullanmak yeterli. http://nontroppo.org/test/Op7/overflowbug.html

Bunların dışında Internet Explorer’ün tescillediği ve CSS3 standartlarında yer alan iki adet özellik daha vardır. overflow-x ve overflow-y

overflow-x ve overflow-y: Internet Explorer5x ve üzeri sürümlerden itibaren desteklediği bu özellikler aslında overflow gibi çalışır. Buradaki x ve y’dende anlaşıldığı gibi overflow özelliğini yatay ve dikey olarak ikiye ayıran özelliklerdir. overflow-x özelliği yatayda taşma olması durumunda taşan kısımlara uygulanacak özellikleri(visible, scroll, hidden ve auto) atmamızı sağlar. overflow-y’de dikeyde aynı şeyi yapar. Firefox’unda 1.1 versiyonundan itibaren bu özellikleri desteklemesi kullanılabilirliğini arttırmıştır. Tabi biraz daha beklemekte yarar var.

Örnekler için tıklayınız. (brunildo.org’dan)

clip

Yapısı : clip: rect(<üst>,<sağ>,<alt>,<sol>)
Aldığı Değerler : rect(top, right, bottom, left) | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: mutlak konumlandır uygulanmış elementler (CSS2′den itibaren blok-level elementler ve replacement elementlere )
Kalıtsallık: Yok

clip, elementin içeriğinin belli bir bölümünün gösterilmesi sağlar. Başlangıç değerinin auto atanmış olması herhangi bir kırpmanın olmayacağını gösterir.

Resim düzenleme araçlarında yaptığımız kırpma işini CSS yardımıyla yapmamızı sağlayan bu özelliği Javascript ile birlikte kullanarak çok güzel uygulamalar yapabiliriz.

Clip’e atanan değerler em cinsinden verilerek esnek sonuçlar elde edilebilir. Ayrıca negatif değerlerde alabilir. Negatif değer atandığında element kutusunun dışına doğru kırpma yapacaktır.

Bir örnek yapalım.

CSS kodu:

.kirpma{
position:absolute;
clip:rect(50px 130px 153px 40px);
}

HTML kodu:

<ol>
<div class="kirpma">
<img src="recepemice.jpg" alt="ahmet emice" />
</div>

örneğin görüntüsü

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

visibility

Yapısı : visibility: <deger>
Aldığı Değerler : visible | hidden | collapse | inherit
Başlnagıç değeri: visible
Uygulanabilen elementler: tüm elementlere
Kalıtsallık: Yok

Görünürlük(visibility) özelliği nesnelerin görünümünü belirler. Değeri visible ise element görünür. Eğer değeri hidden ise element görünmezdir. Eğer bir elementin görünürlük değeri hidden olarak atanmış ise element sayfa yapısındaki yeri korur ancak gözle görülmez.

<ol>
<html>
<head>
<title>visibility Örneği</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
  <li class="alternatifard">body {font-family: sans-serif; font-weight: bold; font-size: 14px}</li>
</style>
  <li class="alternatifard"></head>
<body>
<h1 style="visibility: visible">Görünür Başlık</h1>
<h1 style="visibility: hidden; background-color:#f00; border:1px solid #000; margin:20px 0; padding-top:10px;">Görünmez Başlık</h1>
<h1 style="visibility: visible">Görünür Başlık</h1>
<p style="font-size: large">Görünür metin parçası<b style="visibility: hidden">görünmez metin parçası</b> ve burası görünüyor.</p>
</body>
</html>
</ol>

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

Örnekte gördüğümüz gibi element görünmediği halde sayfadaki yerini korumaktadır. Ayrıca gizli nesneye atanan kenarlık ve zemin rengide görünmemektedir. Ancak elementin konumu etkileyen kenar boşluğu(magrin) ve padding değeri görünmese de sayfayı etkilemektedir.

Ata elementi görünmez olan bir çocuk elemente eğer görünür özelliği atanmış ise ata element görünmez ancak çocuk element görünür. Bu ters bir durum olarak görünür ancak bu bize avantaj sağladığı durumlarda yok değildir. Örnek yaparsak

CSS kodu

p.gorunmez {visibility: hidden;}
p.gorunmez strong {visibility: visible;}

HTML kodu

<p class="gorunmez" <strong>Lorem ipsum dolor sit amet</strong>, consectetuer adipiscing elit. Cras sem. In  sagittis mauris eu turpis. Mauris ut lorem nec pede consequat suscipit. </p>

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

visiblity:collapse özelliği vardır. collapse tablo elementler için hidden etkisi yapar. Ancak burada bir fark var gizlene elementler yerini korumaz. Ayrıca bu özelliği tüm tarayıcılar desteklemiyor, bunun yerine display:none özelliği kullanılır.

Kaynaklar

• http://www.w3.org/TR/CSS21/visufx.html
• http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html
• http://www.ibloomstudios.com/articles/misunderstood_css_clip/
• http://www.w3schools.com/css/pr_pos_clip.asp