CSS ile yatayda ortalamak deyince aklımıza hep genişliği sabit olan alanlar geliyor. Ancak genişliği sabit olmayan elemanları ortalamak biraz daha farklı oluyor.

Genişliği sabit olan blok-level elemanları ortalamak için birçok kaynak var iken genişliği belli olmayan blok-level elemanları ortalamak için çok fazla kaynak bulamıyoruz. Google’da yaptığım aramalarda rastladığım makalelerde 2 yöntem ile karşılaştım. Bu iki metodu sizlerle paylaşacağım, siz kendinize uygun olan metodu uygulayabilirsiniz.

Metot 1 – Yüzde Yöntemi ile Ortalama

Genelde bu yöntemi anlatırken menü örnekleri üzerinden anlatılmış bende geleneği bozmayayım.

<div id="menuKapsulu">
<ul>
   <li>Elma</li>
   <li>Armut</li>
   <li>Malta Eriği</li>
</ul>
</div>

Alışkın olduğumuz bir menü kodu. CSS kodumuzu ekleyelim. İlk olarak kapsayıcı eleman tanımlarını yazalım.

#menuKapsulu{
  float:left;
  width:100%;
  background:#369;
  overflow:hidden;
  position:relative;
}

Menü kapsayıcısının sayfayı tam kaplaması için %100 değeri ve float:left değeri atandı.

#menuKapsulu ul{
  clear:left;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  left:50%;
  text-align:center;
  background-color:#990000
}

float:left değeri ile içeriği çepeçevre kapsaması sağlanıyor. left:50% değeri ile menu ortalanıyor. Ancak bu ortalama içeriğin genişliğini içermez.

#menuKapsulu ul li{
  display:block;
  float:left;
  list-style:none;
  margin:0 10px 0 0;
  padding:10px 0;
  position:relative;
  right:50%;
}

Buradaki püf noktası; right:50% değeri ile menü genişliğinden dolayı sağa doğru kayan içeriği tam olarak ortalı hale getiriyoruz.

İnternet Explorer 6+, Firefox2+, Safari, Chrome ve Opera destekliyor.

Avantajları

• Tüm tarayıcılar destekliyor.
• Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
• Kolay kullanımı
• Farklı tarayıcılar için farklı kod yazımı gerektirmemesi

Dezavantajları

• Kapsayıcı elemana atana overflow:hidden nedeni ile yaşanabilecek olumsuzluklar. Mesela açılır menülerde sorun olur.
• Ortalanacak eleman kapsayıcısı, yani burada ul ortalı olmadığı için background, border ve kendini gösterecek diğer tanımların yapılmaması gerekir. Buda bir dezavantajdır.

Metot 2: display:table Metodu

Genişliği belli olan elemanları ortalarken kullandığımız margin:0 auto tanımını bu sefer genişliği belli olmayan alanlar içinde kullanıyoruz.

HTML kodumuz aynı;

<div id="menuKapsulu">
   <ul>
       <li>Elma</li>
       <li>Armut</li>
       <li>Malta Eriği</li>

</ul>
</div>

Ortalanacak alana margin:0 auto ve display:table tanımlarını yapıyoruz.

#menuKapsulu ul{
 list-style:none;
 margin-left: auto;
 margin-right: auto;
 display: table;
}

#menuKapsulu ul li{
 float:left;
 margin:0 10px 0 0;
 padding:10px 0;
}

Sonuç istediğimiz gibi, ancak bir sorunumuz varki oda display:table özelliğini İnternet Explorer 6 ve 7. sürümleri desteklemiyor. Peki, ne olacak derseniz bu bir hasLayout sorunu ve çözüm için zoom:1 tanımı kullanmamız gerekiyor.

*:first-child+html #menuKapsulu{
   text-align:center
}

* html #menuKapsulu{
   text-align:center
}

*:first-child+html #menuKapsulu ul{
 display: inline;
 zoom: 1;
}
* html #menuKapsulu ul{
 display: inline;
 zoom: 1;
}

Kapsayıcı kapsüle text-align:center tanımı yapıyoruz sonra listemize display:inline yapıyoruz. text-align:center inline elemanları ortalıyor bildiğiniz gibi. Burada yaptığmızda bu

Avantajları

• Tüm tarayıcılar destekliyor.
• Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
• Birinci mettodaki overflow:hidden dan kaynaklana sorun burada yoktur.
• Birinci metotdaki ul ye görsel özellik tanımlayamama sorunu bu metotda yok.

Dezavantajları

• Farklı tarayıcılar için farklı kod yazımı gerektirmesi

Kullandıkça avantaj ve dezavantajlarını daha iyi göreceğiz.

Kalın sağlıcakla.

Kaynaklar

• http://css-discuss.incutio.com/wiki/Centering_Block_Element
• http://www.solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css
• http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
• http://haslayout.net/css-tuts/Horizontal-Centering
• http://www.katcode.com/css-horizontally-centering-div-of-unknown-width/
• http://www.tightcss.com/centering/center_variable_width.htm

Bir çoğunuz biliyordur ama ben bilmeyenler için hatırlatayım yaklaşık 9 aydır öncesinde messengerfx.com ve şimdiki adı ile www.livego.com’da çalışmaktayım. Bu proje sürecinde bir çok şey öğrendim ve öğrenmeyede devam etmeyede devam ediyorum. Bu proje dünya çapında olması ve farklı yapısı ile diğer projelerde öğrendiklerimden çok fazlasını bana öğretti. Ajansta çalışırken bir çok proje ile uğraşıyordum burada 9 aydır bir proje ile uğraşıyorum, ancak şöyle bir şey var ki ajansta 2 senede öğrenebileceğim(bazı bilgileri ajansta öğrenme ihtimalide yok) bilgiyi burada 9 ayda öğrendim diyebilirim.

Arayüz geliştiricileri olarak devamlı kendimizi geliştirmek durumundayız bu sadece bizim çabamızla olacak bir şey değil, kendimiz geliştirmek için bize bu olanaklarında sağlanması lazım. Ajanslar bu bakımda çok önemli bir kilometre taşıdır, neredeyse her ay 1-2 proje elinize geçer ve 2-3 ya içinde bitirmeniz istenir. Bu bize hem öğrenme fırsatı verir ve hemde kendimiz geliştirme imkanı verir. Ayrıca benzer işleri yapsakta aynı işleri yapa yapa bir bakıma elimizi hızlandırmış oluruz. Bu nedenle burada naçizane bir tavsiyem var eğer bu meslekte bir yerlere gelebilmek ve bir şeyler öğrenmek istiyorsanız en az çalışma hayatınızın belli bir bölümünü belli bir seviyenin üstündeki ajanslarda geçirmeyi planlayın ve bunun için uğraşın. Niye belli bir seviyenin üstünde diyorum, çünkü kendinizi geliştirmenizde sadece ajansların değil çalıştığınız şirketlerinde çok büyük katkısı vardır. Mesela çatladıkapıspor’un sitesini yapmak ile, büyük bir bankanın sitesini yapmak arasında dağlar kadar fark vardır. Müşterini büyük olması isteklerin büyük olmasıdır ve sizin portföyünüz içinde büyük bir kazanım olacaktır.

Gelgelim benim LiveGO.com ile yaşadıklarıma, baştada dediğim gibi farklı ve geniş çaplı bir olması LiveGO.com’un bana çok şey öğretti ve öğretmeyede devam ediyor. Öğrendiklerimin belli bir kısmını sizlere aktardım ve aktaracağım yazılarımda var. Aktardıklarımın listesi;(Bir çoğunda örnekleri farklı yerden vermek durumunda idim. Çünkü proje daha yayında değildi. Hem örnekleri daha basit vermek anlaşılırlığı arttırıyor)

• CSS ile metinlere gölge vermek
• İE kalıtsal margin sorunu: form elementleri ve hasLayout
• ie6/7′da postion:relative Uygulanmış Elemanlarda z-index Sorunu
• İE6 sorunu: Bağlantı içi elemanlarda hover sorunu
• CSS Seçicilerinin Optimizasyonu
• IE’de Liste elemanları arasındaki boşluk sorunu
• CSS İpucu 28: FireBug yardımı ile daha kolay CSS Sprite Uygulamak
• Kutulara Gölge Vermek (box-shadow)
• overflow ve position:relative kullanımında ie sorunu
• jQuery ipuçları – 3
• display:inline elemanlar arasındaki doğal boşluklar
• Yuvarlak kenarlı kutular(border-radius) oluşturmak
• Float:left ve Text-align:right Atanmş Elemana Metin Yerine Resim Uygulama
• Çift çizgili ayraç kullanımı
• Önden Resimleri(Preloading images) Yükleme Yöntemleri
• CSS İpucu 27: Chrome ve Safari’de textarea genişletme işlevini kaldırma
• IE6 ve IE7′de bağlantılardaki cursor sorunu
• IE’de Textarea’da Enter çalışmıyor
• Resim Kullanmadan 1 piksellik Yuvarlak Kenarlı Kutu Oluşturmak
• jquery ipuçları – 4

Tabi daha yayınlama imkanı bulamadıklarımda var; zamanım olursa aşağıdaki konularıda yazmaya çalışacağım.

• Web Sitelerimizi iPad’e Uyarlamak
• CSS ile iphone, ipad, desktop ve iphone4 ayrımını sağlamak
• FireBug Javascript Sekmesine Göz atalım
• CSS Sprite Tekniği
• Aksak Kolon ve Çözümleri
• Input Prompt
• Livego’yu kodlamak 1 – 2 – 3 – 4 – 5

ve de daha yazacağım belki 10’larca makale daha. Başta dediğim gibi bende öğreniyorum sizlerle paylaşıyorum hepimiz öğreniyoruz.

Bu projede öğrendiklerim bu kadarmı, değil tabi daha fazlası var ama benim not tuttuklarım bu kadarı.

Tanıdığım ve bildiğim bir çok arkadaşım var bu sektörde çalışan her biri yaptıkları projelerden 3-5 bişey akatrsalar ne güzel olur. Memleketteki bilgi eksikliği giderilmiş olur. Lütfen bunu bir ukalalık olarak algılamayın, amacım belki Türkçe içeriğin çoğalması için bir çağrı. Tanımıyorum ve biliyorum gerçekten çok iyi bilgiye sahip insanlar var Türkiye’de umarım onlarda bilgilerini bizlerle paylaşırlar.

Yeni sürüm ile birlikte gelen yenilikler ;

CSS Inspection

Aslında Live View özelliği bir önce sürümde de mevcut ancak bu sürümden tam anlamıyla geliştirilmiş bu özellik Inspect butonu yardımı ile gerçek zamanlı kodumuza müdahale edebiliyor, düzenleme yapabiliyoruz.

Bu özelliğe biz pek yabancı değiliz Firefox’un FireBug eklentisi bize bu imkanı sağlıyor aslında ve daha fazlasını sağlıyor. Bir önceki sürümde bunu tam ekleyemediklerini söylemiştik, bu sefer tam anlamıyla eklenmiş.

En büyük yeniliklerden birisi bu olmuş.

Adobe BrowserLab

Adobe firmasının daha önce açtığı bu çevirimiçi tarayıcı test etme aracı bu yeni sürüm ile birlikte programdan direk erişilebilir hale getirilmiş. Örnek sayfanızı direk siteye gönderip test edebiliyoruz.

Ben aslında bu konuda pek tatmin olmadım. Çünkü BrowserLab zaten yeterli bir araç değildi. IETester tarzı bir test aracı daha makbul olacak bir araç olabilirdi.

Her şeye rağmen bir artıdır ama eksik olduğu kesin.

CSS Aktik/Pasif

Mevcut kod üzerinde gezerken elemanlara atanan css özellikleri bir tıklama ile aktif ve pasif hale getirme özelliği.

FireBug ile alışık olduğumuz bu özellik yeni sürüm ile birlikte kullanıcının kullanımına sunulmaktadır. Güzel bir özellik.

CSS başlangıç sayfaları

Bir önceki sürüme göre daha fazla hazır sayfa yapısı imkanı sunuyor yeni sürüm bizlere.

Ben bu özelliği kullanmasam da kullananlar için artı bir özellik.

HTML5 ve CSS3 Desteği

Program ilk çıktığında beraber çıkmaması çok büyük bir eksiklikti, ancak sonradan bir güncelleme ile bu paketi eklemeleri hatalarını çok çabuk anlamları güzel oldu. HTML5 ve CSS3 tanımlarını otomatik tamamlama ile ekleyebliyoruz artık.

Hele CSS3′te farklı tarayıcılardaki bu önek karmaşasına bir çzöüm olması güzel oldu.

PHP Tabanlı CMS Desteği

Bu sürümdeki en büyük atılım bence bu dur. PHP tabanlı CMS’leri WordPress, Drupal ve Joomla tam anlamıyla düzenleme imkanı sağlıyor bu yeni sürüm.

Bu CMS’leri geliştirenler için biçilmiş kaftan bence yeni sürüm.

Kolay entegrasyon, düzenleme, dosya upload etme vb. özellikleri ile tam bir CMS editörü olmuş Dreamweaver. Dinamik yapılı bu CMS’leri tam anlamıyla bir statik sayfa gibi kolayca değiştirebilme ve test edebilmeyi sağlıyor bizlere. Ayrıca otomatik tamamlama özelliği ile çok büyük kolaylık sağlıyor.

PHP özel sınıfı kod ipuçları

PHP ile oluşturulan özel sınıflar içinde otomatik tamamlama özelliği eklenmiş. PHP’ye yönelik bir editör olma eğilimi sergilemiş yeni sürümde Dreamweaver, bence mantıklı Visual Studio’yu geçemeyeceğini anlayınca PHP’ye yönelmiş.

Dinamik İlişkili Dosyalar

Bir önceki sürümde statik sayfalar için sunulan ilişkili dosyalar özelliği şimdi dinamik dosyalar içinde eklenmiş. Dreamweaver üzerinden PHP yaznalar için çok güzel bir özellik bence.

SVN(Subversion) Desteği Geliştirilmiş

Daha öncedende sunulan SVN(Subversion) özelliği bu sürüm ile birlikte bayağı bir geliştirilmiş. Diğer SVN programları ile uyum ve çerçevenin geliştirilmesi bu özelliği daha kullanılabilir yapmış.

Business Catalyst® ile uyum

Programlamaya gerek kalmadan güçlü çevrimiçi işletmeler oluşturmak için Dreamweaver ile Adobe Business Catalyst® hizmeti uyumu sağlanmış.

Basit Site Kurulumu

Mevcut site kurulumu penceresi biraz daha geliştirilerek kullanıcıya daha fazla seçenek ve kolaylık sunulmuş. Site kontrolünü Dreamweaver üzerinden sağlayanlar için güzel bir gelişme.

Widget Browser Özelliği

Bu özellik bize diğer insanların geliştiridiği yapıları sitemize ekleme imkanı sunuyor. Güzel bir özellik eğer uygulama sayısı artarsa gayet kullanışlı bir özellik

Özellik hakkında daha fazla bilgi için  http://tv.adobe.com/watch/learn-dreamweaver-cs5/using-the-widget-browser/ videoyu izlemenizi tavsiye ederim.

İlişkili Dosyaları Filtreleme

Dreamweaver çalıştığımız doküman ile ilgili dosyalarıda gösteriyor, yeni sürüm ile birlikte dinamik dosyalarıda göstermeye başlıyor. Bu bazen karmşaya neden oluyor, bunu içni bir çözü üretilmiş. Filtreleme menüsünden itediğimiz dosya tipini veya dosyaları filtreleye biliyoruz. Bu sayede ilişkili dosyaları daha düzenli bir hale getirme imkanımız oluyor.

Sonuç

Yeni sürümün CSS ve PHP üzerine yoğunlaşmış bir sürüm olmuş. PHP CMS geliştirenler için bir çok yenilik var. CSS için getirilen yenilikler ve daha fazlası zaten mevcut kullanımımda vardı benim. Gerek FireBug ve gerekse IETester. Benim asıl beklentim büyük bir ivme kazana javascript kütüphaneleri hakkında bir gelişme idi. Örneği jquery kütüphanesi ile çok çalışan biri olarak jquery otomatik tamamlama özelliği olması benim çok sevindirirdi, ne yapalım bundan sonraki sürümleri bekleyeceğiz artık bunun için.

Yukarıda belirttiğim gibi sitelerimiz farklı platformlarda ve tarayıcılarda test için AdobeLabs yeterli gelmiyor bence daha fazla gelişmiş bir araç ile bu açık kapatılmalıdır.

Kalın sağlıcakla.

Kaynaklar

• http://tv.adobe.com/watch/learn-dreamweaver-cs5/getting-started-gs-what-is-dreamweaver-cs5-/ (video)
• http://www.mymac.com/2010/07/cs5-dreamweaver-whats-new/
• http://webdesign.about.com/od/dreamweaver/p/differences-dreamweaver-cs5-and-dreamweaver-cs4.htm
• http://www.wpbeginner.com/news/wordpress-themes-made-easy-with-adobe-dreamweaver-cs5/
• http://www.thinkdigit.com/Features/Adobe-Dreamweaver-CS5-Review_4420.html
• http://www.pcmag.com/slideshow_viewer/0,1205,l%253D249944%2526a%253D249895%2526po%253D9,00.asp?p=y
• http://cs5.org/?p=1373
• http://www.adobe.com/tr/products/dreamweaver/whatsnew/

Bir önceki makalemde sizlere kodlamaya başlamadan önceki süreci anlattım. Şimdi sizlerle sitenin Ana Sayfasını nasıl kodladığımı anlatmaya çalışacağım. Bu makaleye yazacağımı düşünerek kodlama yaparken notlar tutmuştum, bu makale biraz da o notların derlemiş hali şeklinde olacaktır.

• I -Kodlama Öncesi Hazırlıklar
• II – Ana Sayfa Kodlaması (bu sayfa)
• III – Alt Sayfaların Kodlaması (yayına hazırlanıyor…)

İlk olarak site ardalan resmini jpeg olarak kaydediyorum. jpeg seçmemin nedeni Adobe Phoshop’da "Save for Web.." ile kaydederken en küçük boyut ve en iyi görüntüyü vermesidir. Resimleri kaydederken eğer az renk varsa gif, çok fazla renk varsa jpeg kaydediyorum, son zamanlarda png’yi deniyorum ara sıra. Ardalan resmi biraz farklı bir yapıya sahip tekrarlayan kısmı biraz geniş olduğu için geniş kesmek durumunda kaldık. Ardalan resmini body’ye atıyorum.

Sayfa ve site sabit bir genişlikte ve ortalı olduğu için ana bir kapsül(anaKapsul) için alıyorum. katmanı kapattığım yere bir not düşüyorum ki nerede bittiğini bilelim.

<!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>FanatikMarşlar.Com</title>
<style type="text/css">
<!--
@import url("style/fanatikmarslar.css");
-->
</style>
</head>

<body>
    <div id="anaKapsul">

    </div><!--[if !IE]>anaKapsul sonu<![endif]-->
</body>
</html>

İE6 ile bazı sorunları yaşamamak için yorum satırlarını biraz daha farklı kodluyorum. Detay için IE6′un Tekrarlayan Karakter Sorunu makalemi okumanızı tavsiye ediyorum. Zamanla alışkanlık haline gelen bu yorum kodunu Adobe Dreamweaver’da Snippets‘e ekledim böylelikle daha kolay oluyor eklemesi.

Şimdi sayfayı ortalamak için css kodumuzu yazalım. Açalım fanatikmarslar.css dosyasını ve yazmaya başlayalım.

/************************************************** genel tanimlar */
body{ background:url(../images/ardalan.jpg) 0 0 repeat;}
	#anaKapsul{width:990px; margin:20px auto; background:#fff url(../images/ust_ard.gif) 0 0 no-repeat;}

Ayrıca sayfa kenarları oval bunları ardalan resmi olarak anaKapsul ardalan resmi olarak tanımlayabiliriz.

Üst Alanın Kodlaması

Eskizdeki gibi sayfayı belli bölümlere ayırarak kodluyorum. ustAlan tanımlamasını yaparken kendi genel standart isimlendirme sistemimi kullanıyorum. İsimlendirme yapılırken ilk harf küçük sonraki baş harfler ayrımı kolaylaştırmak için büyük ve bitişik yazılır. İsimlendirme ve kod yazma düzeni hakkında daha ayrıntılı bilgi için CSS kod Yazma Düzeni makalemi okuyunuz.

Logo ve Banner alanı

Logo ve yanındaki banner alanını kodlamaya başlarken bu iki alanı bir satır gibi düşünerek bir katman içine alıyorum. Bu katmana logoBannerAlani adını veriyorum. Her satırı böyle kapsayıcı bir katman içine almak bize bir çok yönü ile kolaylık sağlayacaktır. Logoyu sola yaslıyoruz ve üstten 14px yukarı çekiyoruz(logoyu yukarı çekerken eksi margin de kullanabiliriz ancak ie6 sorun yaşamayalım diye position ve top özellikleri yardımı ile yukarı çektik). Banner’ı logonun yanına koymak için float:left ve genişlik tanımı yapıyoruz ve logo ile arasındaki mesafeyi ve yukarıda mesafeyi ayarlamak için kenar dış boşluğu mesafelerini(margin) tanımlıyoruz.

HTML kodu

<div id="logoBannerAlani" class="kapsayamamaSorunu">
    <div id="logo"><img src="images/logo.gif" width="226" height="126" alt="Fanatikmarslar.com" /></div>
    <div id="ustBanneralani"><img src="images/ust_banner.gif" width="728" height="90" /></div>
</div>

CSS Kodu

#logoBannerAlani{margin-bottom:10px;}
    #logo{float:left; width:226px; position:relative; top:-14px; left:6px;}
    #ustBanneralani{float:left; width:728px; margin:14px 0 0 16px}

Menü ve Arama Alanı

Menü ve arama bölümünü kodlarken menü alanının genişleyebileceğini düşünerek. Arama alanına float:right tanımı menü alanına float:left tanımı yapıyoruz. Arama alanı genişliğini tanımlarken menü alanı genişliği değişebileceği için genişlik tanımlamıyoruz. Menü alanını listeler(ul) ile kodluyoruz(ul) liste elemanlarını yan yana dizmek için ul li ye float:left tanımı yapıyoruz. "Sesi Kapat" flash olacağı için bu bölümün yazı tipi özelliklerini tanımlamadan geçiyoruz, diğer linklerin tanımlarını yapıyoruz. Arama kısmında dışa arama alanı ardalan resmini atıyoruz. input alanı ve button alanı ekliyoruz. Niye button kullanıyoruz input type="submit" kullanmıyoruz derseniz. type="submit" elemanına direk erişemediğimizden. input ve button elemanlarımıza float:left ve genişlik tanımı yaparak yan yana koyuyoruz ve yine yorum kodlarımızı ekliyoruz.

<div id="menuAramaAlani" class="kapsayamamaSorunu">
    <div id="aramaAlani">
        <input type="text" id="ara" name="ara" value="Arama" onfocus="if(this.value=='Arama'){this.value=''};" onblur="if(this.value==''){this.value='Arama'};" />
        <button></button>
    </div>
    <ul id="ustMenu">
        <li>Sesi Kapat</li>
        <li><a href="">Giriş Yap</a></li>
        <li><a href="">Sen de Katıl!</a></li>
        <li><a href="">Fanatik Marşlar Nedir?</a></li>
    </ul>
</div><!--[if !IE]>menuAramaAlani<![endif]-->

Büyük Resim

Büyük resmin olduğu kısmı ve bu resmin üzerindeki “Tezahürat Gönder” butonunu kodlarken; Büyük resmi bir katman oluşturup bunun ardalanına koyup tezahürat gönder düğmesini de alt ve sağdan 21px mesafede koymak için büyük resmi ardalanına atadığımız katmana position:relative tanımlıyoruz ve düğmeye position:absolute, bottom:0 ve right:21px tanımı yapıyoruz. ie6′da alttan 1px kadar fazlalık vardı bu durumda ie6 özel kodu ile aştım. ie6 için bottom:-1px; tanımı yaptım. Tarayıcılar için özel kodlar hakkında detaylı bilgi için tıklayınız

<div id="buyukResim">
	<a href=""><img src="images/tezahurat_gonder_but.jpg" width="181" height="45" alt="Tezahürat Gönder" /></a>
</div>

Önemli Sözler

Önemli sözler kısmı beni biraz düşündürdü. Kodlarken bu alanı normal akış dışına çıkarmalıydım. Bunun için position:relative tanımı ve genişlik ve yükseklik tanımı yaptım. Ana kapsayıcı katmanın dışına çıkarmak içinde eksi left ve margin-right değeri verdim ve oldu.

<div id="manset">
	<p>"Real Madrid'den korkmuyoruz"<strong>Didier Deschamps</strong></p>
</div>

İçerik Alanının kodlaması

Ana Sayfa içerik alanını üç kolona ayırıyoruz. Sol, orta ve sağ kolon.

Sol İçerik Alanının Kodlanması

Sol kolona genişlik ve float tanımı yaparak yerleştiriyoruz.

Başlıklara h1 ile tanımlıyoruz ve özelliklerini veriyoruz.

Html kodu;

<div id="solIcerikAlani">
    <h1>Tezahürat Ligleri</h1>
    .....
</div>

CSS kodu;

#solIcerikAlani{float:left; width:200px; margin-right:20px}
	#solIcerikAlani h1{margin-left:10px}

Lig Menüsü

Lig menüsünü her zamanki ardalan kaydırmaca yöntemi ile kodluyoruz. ul listleri ve her liste elemanına ilgili id isimlerini veriyoruz. Daha sonra bu adlandırdığımız öğelere backgroud-position ile ilgili resimlerini atıyoruz. Metodun genel mantığı tek bir resim üretip öğelere farklı background-postion değeri ile kendi background’unu vermek. Metot ve uygulama hakkında detaylı bilgi almak için basit menü yapımı makalemi okuyunuz.

HTML Kodu

<ul id="ligMenu">
    <li id="superLig"><a href="">Turkcell Super Lig</a></li>
    <li id="birinciLig"><a href="">Bank Asya 1. Lig</a></li>
    <li id="digerLigler"><a href="">Diğer Ligler</a></li>
    <li id="dunyadanTezahuratlar"><a href="">Dünyadan Tezahüratlar</a></li>
</ul>

CSS Kodu

ul#ligMenu{margin-bottom:10px}
    ul#ligMenu li{ background:url(../images/lig_menu.gif) 0 0 no-repeat;}
    ul#ligMenu li a{text-indent:-9999px; display:block; margin-bottom:1px; width:200px; height:45px; }
    ul#ligMenu li#superLig{ background-position:0 0;}
    ul#ligMenu li#birinciLig{background-position:0 -46px;}
    ul#ligMenu li#digerLigler{background-position:0 -92px;}
    ul#ligMenu li#dunyadanTezahuratlar{background-position:0 -138px;}

Zirvedeki Taraftarlar

Zirvedeki taraftarlar kısmını tablo ile kodlayacağız.

CSS ile kodlama yaparken bazılarının yanlış anladığı bir nokta vardır. Katmanlarla kodlama yaparken hiç tablo kullanmamalıyız yanılgısına düşer bazı arkadaşlar. Aslında durum böyle değildir. Anlamalı kodlama açısındanda sakıncalı olan bu anlayış yanlıştır. HTML sayfalarımızı oluştururken her elemanın ilgili etiketleri ile kodlamalıyız. Bu anlaşılabilirlik ve anlamlı kod yazma açısından önemlidir ve karmaşayı engeller. HTML sayfalarını oluşturmak için çeşitli yöntemler vardır bizi sonucu götüren ancak biz en uygun olan yolu bulmalıyız ve kodlamayız. Peki en uygun yöntem hangisidir buna nasıl karar vereceğiz noktasında kalırsak. Her zaman standartlar ve anlamlı kodlama yolunu seçmeliyiz.

Tabloyu kodlarken sayı kolonu için bir sınıf tanımlayıp özelliklerini atarız ve kolonu seçip bu sınıfı tüm hücrelere tanımlarız. Bu tüm hücre seçip sınıf atma işini dw ile kolayca yapabiliriz. Ayrıca tablo geneline yazı tipi ve renk tanımı yaparak genel tablo özelliklerimizi atadıktan sonra isim kısmı ve puan kısmını büyük yapmak için bu kısımları normal içerikten ayırmamız gerekir. Ben bunun için bu alanları strong etiketi içine aldım. Böylece direk html elemanına etki edebilecek ve istediğim değerleri atayabilecektim.

Not: Kodlarımı yazarken hep mümükün oldukça html elemanlarını(p, strong, em, span, ul, li) kullanmaktan yanayım. Çünkü html elemanlarını tarayıcılar daha hızlı yorumlayacaktır, ayrıca yalın html kodumuzda daha düzenli duracaktır.

Logoları bir resim olarak hazırlayıp css sprite(ardalan kaydırma) yöntemi ile bu logoları kodladık.

<tr class="farkliSatir">
    <td width="16%" align="center" valign="middle" class="taraftarSayi">1</td>
    <td width="18%" align="center" valign="middle"><div class="logoTrabzon">Trabzon</div></td>
    <td width="51%" valign="middle"><a href=""><strong>Fatih</strong> Trabzon</a></td>
    <td width="15%" align="center" valign="middle"><strong>28</strong></td>
</tr>

Tablonun tek satırını incelersek kod yapısını anlayacağız. tr’deki farkliSatir sınıfı bir satırın açık bir satırın daha kapalı bir renk tanımı yapmak içindir. İlk hücremiz 1′den 10′a kadar sayılar olacağı kolon bu sayıların her biri aynı özellikleri taşıdığı için bu kolondaki hücrelere taraftarSayi sınıfını tanımladım ve özellikleri bu sınıfa atadım.

Site genelinde kullanılacak logoları düşününce bunları bir resim dosyası olarak hazırlayayım ve ardalan kaydırma metodu ile çağırayım diye düşündüm. CSS Sprite adı verilen bu tekniği bir çok yerde kullanıyoruz artık. Metodun çıkış amacı bir çok resmi ayrı ayrı sayfada çağırınca her istek bir zaman aşımına neden oluyor, resmi teke indirdiğimizde tek resim ve tek istek olduğu için bu zaman aşımından kurtulmuş oluyoruz.

table#taraftarZirveTablo td div{ display:block; width:32px; height:32px; text-indent:-9999px; background:url(../images/takim_logolari.gif) 0 0 no-repeat}
....
....
 div#icerikAlani div.logoTrabzon{ background-position:right -105px}
 div#icerikAlani div.logoGalatasaray{ background-position:right -69px}
 div#icerikAlani div.logoFenerbahce{ background-position:right 2px}
 div#icerikAlani div.logoGaziantep{ background-position:right -574px}
......

Logoları daha optimum kodlamak için iki farklı tanım ile aynı kodun tekrarını önledik. table#taraftarZirveTablo td div tanımında genel özellikleri tanımladık, daha sonra her takım logosu için sadece background-position tanımı yaptık, böylece her takım için birbirini tekrarlayan kodları tek elde topladık ve kodumuz daha az oldu.

Sol kolonda son olarak "Takımını Destekle!" ve "Takip Et!" kısımlarını kodladık. Ben sitede toplu olarak iki adet resim toplama(css sprite) tekniği uyguladım. Birincisi yukarıda anlattığım logolar için diğeri ise sitedeki sprite tekniğine uyacak diğer resimler için.

yukarıdaki resim site genelinde uyguladığım sprite tekniği sonucu ortaya çıkmıştır. CSS Sprite tekniği hakkında genel bir makale ayrıca yazacağım, ama burada da yeri geldikçe metot hakkında bilgi vereceğim. "Takımını Destekle!" ve "Takip Et!" kısımları başlıkları ve resimleri olan kısımlar, bunların sabit genişlik ve yüksekliği olduğu için CSS Sprite’a en uygun alanlar oldular. Genişleyebilir alanlarda sprite tekniğini kullanırken daha dikkatli olmalıyız.

HTML kodu

<h1>Takımını Destekle!</h1>
<a id="tezahuratgonderBanner" href="">Sende tezahürat gönder takımını Tezahürat Ligi'nde Şampiyon yap!</a>
<h1>Takip Et!</h1>
<a id="twitterTakip" href="">Fanatik Marşları Twitter'da takip edin</a>

CSS kodu;

a#tezahuratgonderBanner{ background:url(../images/genel_resim.gif) 0 -88px no-repeat; width:188px; height:88px; display:block; text-indent:-9999px; margin:0 0 10px 10px}
a#twitterTakip{background:url(../images/genel_resim.gif) 0 -176px no-repeat; width:175px; height:50px; display:block; text-indent:-9999px; margin-left:10px}

Böylece sol kolon kodlamasını bitirdik.

Orta İçerik Alanının Kodlanması

Orta içerik alanının genişlik ve float tanımı yapıyoruz.

#ortaIcerikAlani{float:left; width:440px; margin-right:20px}

Sonra üstteki resmi ekliyoruz.

<img src="images/orta_resim.jpg" width="440" height="250" alt="Fanatikler" />

Sonra Lig Tablosunu kodlamaya başlıyoruz.

Lig Tablosu

Lig Tablosu içeriğini bir tablo yapacağız. Üst ve alttaki oval kenarları ayrı bir katmana koyup, ardalan resmi olarak kodlayacağız. Peki resim değilde niye ardalan resmi olarak koyduk. Ardalan resimlerini tek bir resim şeklinde hazırlayıp kodlarken iki ayrı resim gibi kullanabiliyoruz. Ancak resim olarak hazırlasa idik, iki ayrı resim hazırlamak ve eklemek durumunda olacaktık, buda daha fazla http isteği demek oluyor.

div#ligTabloUstu{ display:block; text-indent:-9999px; width:440px; height:5px; background:url(../images/puan_tablosu.gif) 0 0 no-repeat}
....
div#ligTablosuAlti{display:block; text-indent:-9999px; width:440px; height:5px; background:url(../images/puan_tablosu.gif) 0 bottom no-repeat}}

Tabloyuda bir katman içini alıp kenar boşluğunu katmandan vereceğiz. Bu kenar boşluklarını tablo içindende verebilirdik, ancak tablomuz işlevi dışında kullanmış olurduk, tablo sadece lig tablosu amacı ile kullanmak daha anlamlı.

div#ligTabloKapsul{width:440px; padding:0 5px; background-color:#f3f3f3; voice-family: "\"}\""; voice-family:inherit; width:430px;} html>body div#div#ligTabloKapsul{width:430px;}

Yukarıdaki kodlamada fazladan kodlar dikkatinizi çekmiştir. Kutu modeli sorunu olarak Türkçeleştirdiğimiz "box model hack" yöntemidir bu. Bir elemana hem genişlik hemde yatay ve dikey padding veya kenar çizgisi atadığımızda(her ikisini atadığımız durumlarda da) ie6 ve diğer tarayıcılar arasındaki yorumlama sorununu gidermek için kullandığımız bir yöntemdir. Ayrıntılı bilgi almak için http://www.fatihhayrioglu.com/kutu-modeli-sorunlari-ve-cozumleri/ inceleyin.

Tablomuz standart bir tablo en sağdaki kolonumuz sayıları içeren farklı renk ve boyutta rakamlar içeriyor. Birde her satırın altında gri bir kenar çizgimiz(border) var.

En sağ kolon için bir sınıf tanımı yapıp kolon boyunca bunu uyguluyoruz.

table#ligTablosu td.sayi{font:bold 18px Arial, Helvetica, sans-serif; color:#acd1e1}

Her satırın altındaki kenar çizgisini atamak için ilk olarak (tr) elemanına tanımladım ancak burada ie6 ile sorun yaşadım. Çözüm için tıklayınız. Bu detay sayfasındaki makaleyi burada yaşadığım sorundan sonra yazdım. Genelde makalelerim sorun-çözüm makaleleri böyle çıkıyor. Bir sorun ile bir kaç defa karşılaştıktan sonra çözüm ve önerilerini siteye yazıyorum. Hem aklımda kalmış oluyor hemde bir daha karşılaştığımda çözümü nerede bulacağımı biliyorum. Tabi birde insanlarla paylaşıp aynı sorunu yaşayan insanlara yardımcı olmak gibi güzel bir yanıda var.

table#ligTablosu{border-collapse:collapse; }
table#ligTablosu td{padding:1px 2px; font:14px Arial, Helvetica, sans-serif; color:#828282; border-bottom:1px solid #d5d5d5;}

En son satırda kenar çizgisi olmayacağı için son satıra bir sınıf atayıp kenar çizgisini kaldırdım.

table#ligTablosu tr.enAlt td{border:0}

Ayrıca tablo baş kısmı için içerikten farklı tanımları yaptım (table th)

table#ligTablosu th{font:bold 14px Arial, Helvetica, sans-serif; color:#000; padding:5px 2px}

Takım Adı ve Armaları

Bu tablodaki takım adı ve logoları için sol kolonda yaptığımıza benzer kodları kullanıyoruz. Bunu yukarıda sol kolona ait toplu kodlarda görebilirsiniz. Aynı tanımlar olduğu için sadece virgül ie yanına seçiciyi ekledik.

div#icerikAlani div.logoWerderBremen, a.WerderBremen{background-position:right -1440px}

görüldüğü gibi div#icerikAlani div.logoWerderBremen kısmı ile a.WerderBremen kısmına aynı tanımlar yapıldığı için virgül ile ayrılmıştır. Böylece daha kısa kod ve daha optimize kodlar elde edilmiştir.

Sol kolonda kullanmadığımız ama burada lazım olan aşağıdaki kodlarıda ekledik.

a.takimLogo{ display:block; background:url(../images/takim_logolari.gif) right 0 no-repeat; padding:8px 30px 8px 0; color:#0c2b90; text-decoration:underline}
a.takimLogo:hover{text-decoration:none;}

Sağ İçerik Alanının Kodlanması

İçerik alanı 3 kolonlu yapının sonuncu kolonuna (sagIcerikAlani) ismini verdik ve diğer kolonları yanında durması için genişlik tanımı ve float:left tanımı yaptık.

#sagIcerikAlani{float:left; width:300px}

İlk olarak banner alanını hazırlıyoruz. Normalde ben buraya resmi direk koyabilirdim, ancak banner flash ise ve buraya javascript ile eklenecekse bir id’ye ihtiyaç duyulabilir diye, bir katman içine alıyorum resmi.

<div id="sagBannerAlani"><img src="images/band_website_banner.jpg" width="300" height="250" alt="Web" /></div>

Not: Bir HTMLci, daha cancanlı isimlendirme ile Arayüz Kod geliştiricisi sadece kod yazmak ile kalmaz aynı zamanda yazdığın kodun nereye gideceği, neler içere bileceğinide düşünerek kodunu yazmalıdır. Bir bakıma bir programcı gibi düşünerek kodunu daha esnek yazmalıdır.

Kategoriler Kısmı

Kategoriler kısmını blok şeklide kodlayacağım. Her kategoriye bir satır olacak şekilde kodlamak için burada "ul li" listelerini kullandım.

<ul id="lKategoriiler">
    <li id="kMarslar"><a href=""><strong>Marşlar</strong>All the legendary football terrace anthems are here. </a></li>
    <li id="kEglenceliTezahuratlar"><a href=""><strong>Eğlenceli Tezahüratlar</strong>All the legendary football terrace anthems are here. </a></li>
    <li id="kSohretlerGecidi"><a href=""><strong>Şöhretler Geçidi</strong>All the legendary football terrace anthems are here. </a></li>
    <li id="k18"><a href=""><strong>+18</strong>All the legendary football terrace anthems are here. </a></li>
    <li id="kNostaljikTezahuratlar"><a href=""><strong>Nostaljik Tezahüratlar</strong>All the legendary football terrace anthems are here. </a></li>
</ul>

Her öğenin farklı ikonu olduğu için her liste öğesine bir id vereceğiz ve buna göre atamalarımızı yapacağız. Listede bir başlık ve içerik alanı var bu ayrımı sağlamak için başlık kısmını strong etiketi içine alıyoruz.

#sagIcerikAlani ul#lKategoriiler{width:300px; float:left; font-family:Arial, Helvetica, sans-serif; margin-bottom:10px}
ul#lKategoriiler li a{ display:block; background:#eeeeee url(../images/notalar.gif) 0 0 no-repeat; margin-bottom:2px; padding:10px 5px 10px 40px; font-size:12px; color:#000}
ul#lKategoriiler li a:hover{background:#dbdbdb url(../images/notalar.gif) 0 0 no-repeat;}
ul#lKategoriiler li#kMarslar a{ background-position:0 -2px;}
ul#lKategoriiler li#kEglenceliTezahuratlar a{ background-position:0 -72px;}
ul#lKategoriiler li#kSohretlerGecidi a{ background-position:0 -141px;}
ul#lKategoriiler li#k18 a{ background-position:0 -215px;}
ul#lKategoriiler li#kNostaljikTezahuratlar a{ background-position:0 -289px;}
ul#lKategoriiler li a strong{display:block; font:bold 14px Arial, Helvetica, sans-serif; color:#0c2b90}

Videolar

Video kısmında resmi sola yazıları ve oylama kısmını sağa koyuyoruz. Burada oylama alanını css ile kodlarken yine ardalan kaydırma yöntemini kullanıyoruz.

Oylama html kodu

<ul class='oylama'>
    <li class='mevcutOy' style="width:60px">3/5 Yıldız</li>
    <li><a href='#' title='1 puan' class='birYildiz'>1</a></li>
    <li><a href='#' title='2 puan' class='ikiYildiz'>2</a></li>
    <li><a href='#' title='3 puan' class='ucYildiz'>3</a></li>
    <li><a href='#' title='4 puan' class='dortYildiz'>4</a></li>
    <li><a href='#' title='5puan' class='besYildiz'>5</a></li>
</ul>

5 adet yıldızımız var birde mevcut durumu gösteren bir li öğemiz. Burada da ardalan kaydırma metodu kullanarak oylama kısmı kodlanmıştır.

ul.oylama{list-style: none; margin:0 3px 3px 3px; padding: 0px; width: 85px; height: 17px; position: relative; background: url(../images/yildiz.gif) top left repeat-x;}
    ul.oylama li{float:left; padding:0px; margin:0px;}
        ul.oylama li a{display:block; width:17px; height: 17px; text-decoration: none; text-indent: -9999px; z-index: 20; position: absolute; background-image:none;}
        ul.oylama li a:hover{background: url(../images/yildiz.gif) left bottom; z-index: 1; left: 0px;}
        ul.oylama li.mevcutOy{background: url(../images/yildiz.gif) left bottom; position: absolute; height: 17px; display: block; text-indent: -9999px; z-index: 1;}
        ul.oylama a.birYildiz{left: 0px;}
        ul.oylama a.birYildiz:hover{width:17px;}
        ul.oylama a.ikiYildiz{left:17px;}
        ul.oylama a.ikiYildiz:hover{width: 34px;}
        ul.oylama a.ucYildiz{left: 34px;}
        ul.oylama a.ucYildiz:hover{width: 51px;}
        ul.oylama a.dortYildiz{left: 51px;}
        ul.oylama a.dortYildiz:hover{width: 68px;}
        ul.oylama a.besYildiz{left: 68px;}
        ul.oylama a.besYildiz:hover{width: 85px;}

Sosyal Alanın ve Alt Alanın Kodlanması

Burada üstteki beyaz oval alanı için fazladan bir katman açıp ona atamaktan ise zaten ekleyeceğiz sosyalAlan’a üstteki kapsayıcı katmanın alt ovalliğini ekleyerek daha az kodlama bu işi çözmüş olduk.

Sosyal Alanın Kodlanması

Sabit genişliği ve yüksekliği olan bir alan ve yan yana dizilmiş öğelerimiz var. Yukarıda bir çok defa uyguladığımız listeler ve ardalan kaydırma metodunu burada da uyguluyoruz.

<div id="sosyalAlan" class="kapsayamamaSorunu">
    <ul>
        <li id="sBaslik">Sosyal Medya</li>
        <li id="sRSS"><a href="">RSS</a></li>
        <li id="sFacebook"><a href="">facebook</a></li>
        <li id="sFriendfeed"><a href="">friendfeed</a></li>
        <li id="sTwitter"><a href="">twitter</a></li>
        <li id="sYoutube"><a href="">youtube</a></li>
    </ul>
</div>

CSS Kodu

/* sosyalAlan */
#sosyalAlan{width:990px; margin:0 auto; background:url(../images/yatay_ayrac.gif) 0 0 no-repeat; height:71px}
    #sosyalAlan ul{float:right; width:310px; margin:30px 10px 0 0;}
        #sosyalAlan ul li{float:left; background:url(../images/sosyal_medya.gif) 0 0 no-repeat; text-indent:-9999px; margin-right:12px}
        #sosyalAlan ul li#sBaslik{ background-position:0 0; width:114px; height:23px}
        #sosyalAlan ul li#sRSS{ background-position:-125px 0; width:23px;}
        #sosyalAlan ul li#sFacebook{ background-position:-158px 0; width:23px}
        #sosyalAlan ul li#sFriendfeed{ background-position:-192px 0; width:23px;}
        #sosyalAlan ul li#sTwitter{ background-position:-226px 0; width:23px}
        #sosyalAlan ul li#sYoutube{ background-position:-260px 0; width:23px;}
        	#sosyalAlan ul li a{display:block; height:23px;}

Alt Alanın Kodlanması

altAlan kısmına baktığımızda 3 kolonlu bir yapıya sahip olduğunu görürüz. Sabit bir genişliği ve yüksekliği var. Tüm alt kısmı kapsayan bir background resmi var. Bu değerlendirmeleri yaptıktan sonra kodumuzu yazarsak.

#altAlan{ background:url(../images/alt.png) 0 0 no-repeat; width:990px; height:122px; margin:0 auto; padding-top:10px; voice-family: "\"}\""; voice-family:inherit; height:112px;} html>body #altAlan{height:112px;}

Yukarıda bahsettiğimiz gibi bir elemana genişlik veya yükseklik tanımı yaptıktan sonra padding ve/veya border tanımı yaptığımızda kutu modeli sorunu ile karşılaşmamak için farklı bir kod yazıyoruz. Ayrıca ardalan resmindeki geçiş nedeni ile saydam png koymalıyız. Saydam pngler ie6′daki sorununu çözmek için kodumuz

#altAlan{ background:url(../images/alt.png) 0 0 no-repeat; width:990px; height:122px; margin:0 auto; padding-top:10px; voice-family: "\"}\""; voice-family:inherit; height:112px;} html>body #altAlan{height:112px;}
* html #altAlan{background:transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/alt.png', sizingMethod='crop');}
* html #altAlan a, * html #altAlan input, * html #altAlan button{position:relative; z-index:1}

şeklinde olmalıdır. Ayrıntılı bilgi için Internet Explorer 6 için saydam PNG desteği adlı makalemi okuyunuz.

Alttaki logoyu yerleştirmek için genişlik ve float tanımı yapıyoruz. Bu resmide CSS Sprite ile genel resimden çekiyoruz.

#logoAltta{ background:url(../images/genel_resim.gif) 0 -236px no-repeat; width:123px; height:69px; text-indent:-9999px; margin:0 20px 0 10px; float:left;}

Ortadaki linkler ve copyright kısmını liste ve paragraflı bir yapı ile kodluyoruz.

<div id="altLinkler">
<ul><li><a href="" title="Telif Hakları">Telif Hakları</a></li><li><a href="" title="İletişim" class="sonAltLink">İletişim</a></li></ul>
<p>© 2009 Fanatik Marşlar. Her hakkı saklıdır. Kaynak gösterilmeden kullanılamaz.</p>
<ul><li><a href="" title="Marşlar">Marşlar</a></li><li><a href="" title="Eğlenceli Tezahüratlar">Eğlenceli Tezahüratlar</a></li><li><a href="" title="Şöhretler Geçidi">Şöhretler Geçidi</a></li><li><a href="" title="Klasikler">Klasikler</a></li><li><a href="" title="+18">+18</a></li><li><a href="" class="sonAltLink" title="Nostaljik Tezahüratlar">Nostaljik Tezahüratlar</a></li></ul>
</div>

Listeleri yan yana dizmek için li’ye display:inline tanımı yapıyoruz.

#altLinkler{float:left; width:635px; font:12px Arial, Helvetica, sans-serif; padding-top:10px}
#altLinkler p{margin:3px 0}
#altLinkler ul li{display:inline;}
#altLinkler ul li a{color:#0c2b90; background:url(../images/genel_resim.gif) right -312px no-repeat; padding-right:8px; margin-right:5px}
#altLinkler ul li a.sonAltLink{background:none;}
#altLinkler ul li a:hover{text-decoration:underline}

Son olarakta RSS ve e-posta üyeliği kısmını kodluyoruz.

<div id="rssEpostaUye">
    <a href="" id="altRSSLink">RSS</a>
    <p>E-posta Üyeliği</p>
    <input type="text" /> <button>Gönder</button>
</div>

Bu gibi durumlarda şöyle bir seçim yapıyorum. Kapsayıcı bir katman içinde tek kullanımlık html elemanları koyarak css kodlamayı daha kolay hale getiriyorum. Burada mesela tek a, tek p, tek input ve tek button kullanmamın nedeni bu.

Sonuç

Bu makaleye kodlama yazarken tuttuğum notlardan yararlanarak hazırladım. Bazı bölümleri hızlı geçmiş, ayrıntısına inmemiş olabilirim, kafanıza takılan veya ayrıntısını öğrenmek istediğiniz kısımları yorumlar kısmında yazarsanız yardımcı olmaya çalışırım. Bir kusurumuz eksiğimiz oldu ise affola.

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

Tüm kodları indirmek için tıklayınız.(rar dosyası index.html, images, style ve scripts klasörünü içerir) 388 Kb

Hazırladığımız bu dosyayı ilk makalemizdeki 30 – Musteriye kalsörü içine atıyoruz ve sıkıştırıp gönderiyoruz.

Not: Burada anlattığım kodlar ile yayındaki site arasında ufak tefek farklılıklar olabilir. Ben burada başta benim kodladığım sitenin kodları ve anlatımını yapıyorum.

Bir sonraki makalem Alt Sayfaların Kodlaması ile ilgili olacaktır. görüşmek dileğiyle hoşçakalın.

Ocak 

• Kuleli 1919 – Şeref Tipi Senenin ilk yazısı bir hatıra kitabı.
• sIFR, Flash Player10 ve Firefox sorunu Sorunlarla daha ilk günlerden boğuşmaya başlamışız.
• Operasyon Ergenekon – Şamil Tayyar Şimdi anlıyorum ki eskiden daha çok kitap okuyormuşum.
• WordPress 2.7′ye geçtikten sonraki sorunlarım – 1 En çok sorun yaşadığım sürümlerden birisi idi 2.7
• Windows Vista / Windows Defender Güncellemesindeki Sorunu ve Çözümü 2009 sorunlarla başlamış, orası kesin.

Şubat 

• Şâh-ı Cihan Fatih Sultan Mehmed Han – Ahmet Çoşkun Tarih kitapları ile devam ediyor süreç.
• Float Uygulanmış Elementleri Tam Kapsayamama Sorunu İpuçları Bir çok projede defalarca karşılaştığımız float uygulanmış nesnelerin kapsayamama sorunu için ipuçları.
• CSS İpucu 18: Optimizasyon İçin CSS Medya Dosyalarını Birleştirmek Daha önceleri projemizde farklı bölümler için farklı css dosyaları kullanmayı önerir iken sonradan fazla dosya çağırmanın optimizasyon bakımından dezavantajlı olduğunu öğrendik.
• CSS İpucu 19: Tüm Tarayıcılar İçin CSS İle Saydamlık(Opacity) Ard arda ipuçları. saydamlık için css tanımları.

Mart

• Basit Resimli Menü Yapmak Ardalan kaydırma yöntemi ile menü oluşturmayı daha önce anlatmıştım ancak çoğu insana o anlatım karmaşık geldi. Bende daha basit nasıl anlatırım diyerek bu yazıyı yazmıştım.
• Internet Explorer 8′in Nihai Sürümü Çıktı O zaman yazmışım bu tarayıcının yetersiz olduğunu. İE9 seslerinin çıktı bu günlerde daha iyi anlıyoruz durumu.
• Internet Explorer 8′i 7 gibi yorumlama kodu İE8′in bize kaznadırdığı en güzel özelliklerden birisi bu galiba. Sen 7 gibi yorumla.
• RSS Adresimi Google’a Taşıdım Google’un feedburner’ı almasından sonraki bir değişiklik. Ben google’dan bu aracı daha da geliştirmesini beklerdim ama çok atıl kaldı bence.
• Futbol ve Küreselleşme – Pascal Boniface Seyretmek için çok zmana harcasamda hakkında pek kitap okumadığımı bir kez daha gördüm. Futbol hakkında okuduğum ilk ve tek kitap. Şimdilik

Nisan

• Tablo Satırına Verilen Ardalan Resminin Tekrarlama Sorunu Genel itibari ile sorun ve çözüm önerileri hakkında makalelerle geçmiş.
• CSS İpucu 20: Firefox’da Kaydırma Çubuğu Çıkarma Bazıları için bir sorun olarak görünsede bence bir sorun olmayan bir özellik.
• Sessiz sedasız 3. seneyi aştık Seneler çok çabuk geçiyor.

Mayıs

• Jquery İle IFrame Yüksekliğini İçeriğine Göre Otomatik Ayarlamak Çok kullanışlı ve güzel bir eklenti, bence tek sorunu yavaş çalışması.
• jQuery ile Basit Sekme Yapımı jQuery ile ilgili ilk makalem. jQuery 2009′da benim için tavan yaptı.
• CSS ile sayfalama görselliğini ayarlama Bir metot ve görselliği arttırma yöntemini anlattığım bir makale

Haziran

• CSS İpucu 21: CSS ile Seçilen Metinlerin Rengini Değiştirmek Tamamen görselliğe yönelik bir özellik ve hala ie desteklemiyor.
• CSS Kod Yazma Düzeni 2009′da yazdığım makaleler arasında en çok beğendiğim yazılarımdan bir tanesi. Genelde kodlardan bahsederim, ama bu sefer işin farklı ama önemli bir kısmını anlattığım bir makale.
• IE 8 için CSS Düzeltmesi(Hack) Bu düzeltmeyi pek kullanmadım. Bunun yerine ie gibi yorumla kodunu kullandım.
• Sayfa Dibine Yapışık Alt Alanlar(Sticky Footer) Bir çok kere kullandım ve sonunda yazdım.
• CSS ile Ziyaret Edilen Sayfa Bağlantılarına Şekil Vermek Pek kullanmasak dahi önemli bir özellik.
• Windows Vista .net Framework güncelleme sorunu ve çözümü Vista sorunları sene boyu bizi zorladı, ama yinede idare etti.
• Firefox’un Negatif Değerli z-index Desteği Firefox’un en büyük artılarından birisi sorunları olsada çabuk hallediyor ve bizleri uğraştırmıyor.
• Dış hat çizgisi(outline) özellikleri outline bir kişinin gözünden kaçan bir özellik. Bizimde gözümüze fazla batmamış ki yazmamız bu kadar gece kalmış.
• Dış Hat Çizgilerini(outline) Kaldırmak Her nekadar makale ismi kaldırmak diye geçsede içinde kaldırıp kaldırmamayı tartıştık ve alternarif yöntemleri sunduk.
• Firefox 3.5 çıktı Şimdilerde hız artışını daha iyi anladığım Firefox 3.5 sürümünün çıkışı önemli idi. Şu aralar dünyada lider.

Temmuz

• FireBug 1.4 sürümü çıktı Sadece görsellik olduğunu ve bayağı bir sorun çıkardığını şimdilerde görüyorum. Beni bu sürümü ile çok üzdü. Ama yinede kalbimizdesin FireBug
• CSS İpucu 22: iPhone için CSS Yazmak iPhone için web siteleri yaptık ama sonrasında biraz durağanlaştık.
• Safari ve Chrome’da metin girdi(textbox) alanlarını kenar çizgileri kaldıralım outline üzerine bir çok yazı yazmışız. Farklı tasarım uygulandığında kötü sonuçlar doğuruyor.

Ağustos

• iframe virüsü ve Saldırgan Site damgalamasından kurtulmanın yolu Virüslerin artık şekil değiştirdiği artık sistemler yerine sitelere yöneldiği şu günlerde bizim gibi arayüz geliştiricilerin daha dikkatli olması gerektiğini öğrendik.

Eylül

• VMware Kurarken “Setup failed to write data to the registry” hatası aldım Farklı yerlede ama yine sorunlar konumuz.

Ekim

• İE 6 iki CSS seçicisi Sorunu ve Çözümü ie6 ve sorun. ie6′dan bana çok ekmek çıkmış. Ama olmasa daha çok sevinirim.
• İnternet Explorer 6 ve 7 için Tablo tr elementine kenar çizgisi atamak sorunlar, sorunlar, sorunlar = ie
• Jquery ipuçları jquery çalışma hayatımı çok fazla etkilesede makalelerime fazla konu olamadığı kesin. 2010′da daha fazla değinmeye çalışacağım.
• @font-face kullanımı Çok güzel bir özellik hala bazı sorunlarıda olsa yakında daha cesurca kullanabileceğiz. Bu makale için çok zaman harcadığımı hatırlıyorum.

Kasım

• Arayüz Geliştiricilerin Görev Tanımı Bu makaleyi ilk başta yazmam gerekirdi ama sistemin oturması ve anlaşılması için zaman gerekti. Hala tam anlamıyla gerçekleşmese dahi büyük mesafe katettiğimizi düşünüyorum. 
• Eksi Margin Kullanımı Çok eski süredir bekleyen bir makale konusu idi. Önemli bir konu anlaşılması ve derinlemesine bilinmesi gereken.
• CSS Yorumlarında Türkçe Karakter Kullandığımızda İE6′da Sorun Çıkarıyor Sosyal medyanın etkilerini yavaş yavaş hissettiğim bu senede friendfeed’de boy göstermeye ve geri dönüşlerden makale çıkarmaya başladım. İkinci makalem.

Aralık

• IE6′da Liste Ardalan Görmeme Sorunu Bilmiyorum bir şey yazmaya gerek var mı? ie6 = sorun
• PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması 2 senelik bir isteğin sonucunda sene sonunda anca çıkarabildim. Devamı 2010′da gelecek.

Fanatik Marşlar Nedir?

Fanatik Marşlar, taraftar marşlarının toplantığı tüm fanatiklerin buluşma noktasıdır. Barlarda, sahalarda, tirübünlerde, maç yolunda otobüslerde, trenlerde, salonlarda, stadyumlarda kısacası taraftarların her yerde söylediği tezahüratları bulabileceğiniz, sizin de takımınız için marşınızı paylaşabileceğiniz bir taraftar sitesidir.

Ayrıca Mustafa’nın siteyi tanıttığı televidyon’daki etohum programınıda izleminizi öneririm.

Bu projede Mustafa Özyurt ve Hasan Yalçın ile birilikte çalıştım. İki arkadaşımada teşekkürlerimi sunarak yazıma başlıyorum. Mustafa Özyurt hem projenin sahibi, hemde programlamasını yaptı. Tasarımlarda sevgili dostum Hasan Yalçın’a ait. Bende html, css ve javascript kodunu yazdım.

Yazının biraz uzun olacağı ve derlemesi zaman alacağı için makaleyi üçe böldüm

• I -Kodlama Öncesi Hazırlıklar
• II – Ana Sayfa Kodlaması
• III – Alt Sayfaların Kodlaması

I – Kodlama Öncesi Hazırlıklar

Projelere başlamadan önce tüm projelerde kullandığım klasör yapısını sizlerle paylaşmak isterim. İkonlar Windows Vista’nın kütüphanesinden, farklı ikonlar olabilirdi ama o zaman farklı bilgisayarlara o ikonları taşımak gerekiyor. İkon kullanmanın avantajı seçmek daha kolay oluyor. Her klasör isminden önce rakamlar koymamın nedeni sıralamayı istediğim gibi yapmak. Klasör ismi verirken Türkçe karakter kullanmamaya dikkat ediyoruz. Gerçi dosyalara, klasörlere isim verirken Türkçe kullanmayacağımızı biliyoruz.

00 – Gonderilen: Bu klasöre proje için gönderilen dosyaları koyuyorum. Projenin şablon psd’leri, içerik dokümanları(doc), resimler (jpeg, gif, png vd.), projede geçen yazı tiplerini(ttf) bu klasöre koyuyorum.

10 – Program: Bu kısma eskiden projede yazdığım program kodlarını koyuyordum. Son zamanlarda pek program yazmıyorum genelde css, xhtml ve javascript kısmını yapıyorum projelerin. Bu klasörü şimdilerde kullandığım eklentileri koymak için kullanıyorum. Örneğin akordiyon eklentisi, lightbox eklentisi, galeri eklentisi vb.

20 – Arsiv: Arşiv kısmında proje adımlarını belli aralıklarla arşivleyerek bu klasöre koyuyorum. Ayrıca devamlı güncelleme yaptığım projelerde güncellediğim her sayfa veya dokümanın yedeğini alıp bu klasöre koyuyorum. Bu mesleği iş olarak edinmek isteyen herkes yedek almayı bir görev bilmeli kendine. Yedeksiz çalışmanın bedeli çok ağır sonuçlar doğura bilir.

30 – Musteriye: Müşteriye klasörünü yaptığım projenin, işin, güncellemenin son dosyalarının sıkıştırılmış hallerini koyuyorum. Böylelikle çalıştığım ve müşteriye gönderdiğim dosyaların ayrımını daha kolay yapabiliyorum. Devamlı güncelleme yaptığım sitelerde bu klasörü daha yoğun kullanıyorum.

40 – HTML: Projede çalıştığım dosyaları bu klasöre koyuyorum. html, css, javascript, resimler ve flash dosyaları. Bu klasör içinde de bir düzenim var.

images: resimleri(jpeg, gif ve png) ve flash dosyalarını(.swf) buraya koyuyorum.

scripts: javascript dosyalarını(.js) buraya koyuyorum.

style: css dosyalarımı buraya koyuyorum.

html dosyalarıda HTML klasörü içinde kalıyor.

Bu genel proje standardım. Bazı projelerde bu klasör yapısı değişik olabiliyor. Mesela resim galerisinin olduğu sitelerde images/galeri/ klasörü açıp resimleri onun içine koyuyorum. Xml’leri yoğun olarak kullandığım projelerde bunlara ek olarak /xml/ klasörü oluşturuyorum. Flash yoğunluklu projelerde /swf/ klasörü açıyorum. Yani projeden proje farklılıklar gösterebiliyor, ama standardım bu.

Buraya kadar anlattıklarım hazır klasör yapısıdır, bundan sonra projeyi kodlamaya başlamadan önceki hazırlıklar olacak.

1- İlk olarak tüm psd’leri kontrol ederek hangi bölümlerin tüm sayfalarda aynı olduğu belirleyip ona göre kodlama yapmayı düşünüyorum. Genel bir değerlendirme bakışıda diyebiliriz buna.

2- İkinci olarak genel yapıyı görebileceğimiz bir eskiz çiziyoruz. Çizim her zaman bize neyin nasıl olacağı ve hangi alanlarda hangi teknikleri kullanacağımızı göstermesi bakımından önemlidir.

Her ne kadar sanal dünyada çalışıyor olsak da gerçek çizimler bize yardımcı olacaktır.

3- Eskizini çıkardığımız bu yapıyı sırası ile kodlamaya başlayacağız. İlk olarak boş bir html sayfası açıp index.html adı ile kaydederiz. Sonra boş bir css dosyası açarız. Aslında ilk açtığım bu boş dokümanlar bile bir şeyler içerir.

XHTML sayfamız

<!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>FanatikMarşlar.Com</title>
</head>
<body>
</body>
</html>

Bu dokümanı Adobe DreamWeaver ile oluşturduğumda dw benim için oluşturuyor.

• DocType olarak xhtml-strict kullanıyoruz. Doküman tipleri hakkında ayrıntılı bil için tıklayınız.
• Karakter kodumuz utf-8. uft-8 seçimi bizim karakter kodu konusunda sorunsuz çalışmamız için önemlidir. Ayrıntılı bilgi için tıklayınız.
• Genel html kodları (html, head ve body)

İlk yaptığım iş başlık kısmını değiştirmek olur.

<title>FanatikMarşlar.Com</title>

Daha sonra boş bir css dokümanı oluştururum. Genelde isim verirken ana, main, iskelet, veya sirket_adi nokta css şeklinde tanımlarım bu seferde site ismini tanımlıyorum fanatikmarslar.css Oluşturduğum bu dokümana sırası ile imza alanımı ve sıfırlama kodlarını ekliyorum.

/************************
************************
Fanatik Marşlar - http://fanatikmarslar.com/
fatih hayrioglu
24 Eylul 2009
ie6, ff, opera, chrome, safari
************************
************************/

Bunu benim imzam olarak nitelendirebilirsiniz. Genelde tüm projelerime eklerim. Bazılarında unuttuğumda oluyor. Daha sonra css sıfırlama kodlarını ekleyelim. Ben genelde standart sıfırlama tekniklerini kullanmam kendi ufak bir iki tekniğim vardır onları yazar geçerim. Ama bu sefer bazı sıfırlama kodlarının elenmiş halini kullandım ve koduma ekledim. Bide kapsayamama sorunu kodunu ekledim.

/* Css Sifirlama */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; text-decoration:none;}

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
/* remember to define focus styles! */
:focus, a:focus, a:active{    outline: 0; }

/* remember to highlight inserts somehow! */
ins{ text-decoration: none; }
del{ text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse: collapse; border-spacing: 0;}

/* float uygulanan elemanları kapsayamama sorunu */
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/* IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */

/* Css Sifirlama */

CSS sıfırlama tekniğini kısaca açıklarsak; Farklı tarayıcılarda farklı şekillerde yorumlanan html elemanlarının özelliklerini her tarayıcıda aynı görünmesini sağlayacak kodlara sıfırlama denir. Bu sayede her tarayıcıda bu elemanlar aynı sıfır noktasına gelecektir. Örneğin p{margin:0; padding:0}

Daha sonra xhtml sayfamıza css kodumuzu ekleyelim.

<style type="text/css">
<!--
@import url("style/fanatikmarslar.css");
-->
</style>

Bundan sonra genelde ben psd’yi açıp sırası ile eskizde çizdiğim yapıya uygun olarak kodlamama başlarım. Bunun dışında bir yöntem daha vardır ki ben genelde bu yönteme başvurmuyorum. Genel sayfa yapısını içeren kısımlar(üst alan, promo alanı, içerik alanı alt alan vb.) kodlanır ve içleri doldurulur. Dediğim gibi ben psd yi açarak sırası ile kodlamaya başlarım.

Tasarımlara bakınca site genel olarak anasayfadaki üç kolonlu yapı ve alt sayfadaki iki kolonlu yapı olarak ikiye ayrılıyor. Ana Sayfa kodlaması ile başlayalım

Bir sonraki makalede kaldığımız yerden devam edeceğiz.

Aslında bundan önce bir web ajansının yapısını ve iş akışını çıkarmak gerekir ve buna göre görev tanımları yapılmalıdır, ama o biraz daha kapsamlı bir iş.

Bizim memlekette genelde bir iş yapılır daha sonra standartları yerleşir. Aynı durum web mecrasında da var. Bir çok kişi bu mecrada çalışmasına ve bir sektör oluşmasına rağmen iş akışı ve görev tanımları tam olarak oturmamıştır. Ben yaklaşık 10 senelik bir çalışma hayatımdaki yaşadıklarım ve okuduklarım ile Arayüz Geliştiricileri için şöyle bir liste çıkardım;

• HTML bilmek: Çok iyi derecede HTML bilmelidir ve uygulamada gereksiz kod yığınlarında kaçınmalıdır.
• CSS Bilmek: Çok iyi derecede CSS bilmelidir. Katman tabanlı kodlamayı bilmelidir. Tablosuz sayfa yapısını tasarlamalıdır.
• Javascript: Çok iyi derecede javascript bilmelidir. Ajax ve  javascript kütüphanelerinden birine(jquery, mootools, vd.) hakim olmalı ve uygulama geliştirebilmelidir.
• Gelişmiş Kod Yazma: Arama motorlarına, erişebilirlik ilkelerine, farklı platform ve tarayıcılara uygun kod yazmalıdır. En az kod ile en yüksek performansı almalıdır.
• İçerik Yönetim Sistemleri: Şirket içi CMS vb. içerik yönetim sistemlerini bilmeli ve kullanmalıdır.
• Mailing: Mailing standartların bilemeli ve buna uygun mailing kodları hazırlamalıdır. HTML Mailing -1: Mailing Kodlarken Dikkat Edilmesi Gerekenler | HTML Mailing 2 – Mailing HTML Kodunun Yazılması
• Görsel Araçlar: Adobe Photoshop, Firework veya benzeri bir programı kendi işini yapacak kadar bilmelidir.
• Takım Çalışması: Takım çalışmalarına uyumlu olmalıdır. Proje Yöneticisi, tasarımcı, flashçı ve programcılar ile etkileşimli çalışmalıdır.
• Yenilikçi: Web mecrasındaki gelişmeleri takip etmeli ve uygulamalarında bu yenilikleri gerektiğinde kullanmalıdır.
• Yabancı Dil: En az yenilikleri takip edecek kadar İngilizce bilmelidir.
• Sunucu Taraflı Diller: Asp.Net, PHP vb. sunucu taraflı dillerin genel mantığını bilmelidir.
  

Bu liste tasarımcı, programcı, flashçı ve Arayüz geliştirici ayrımını yapabilmiş şirketler için geçerlidir. Memlekette hala bu ayrımı yapmamış şirketlerin olması üzücü. Ayrıca yukarıda tanımladığımız Arayüz Geliştiricilerinin Görev Tanımı zamanla gelişebilir. Örneğin Arama motoruna uygunluk ve erişebilirlik ve javascript  için gelecekte ayrı birimler kurulabilir. Daha da ileri gidip jquery geliştirici bile aranabilir. Malum sektör hızlı gelişiyor.

• http://v1.garrettdimon.com/archives/the-time-is-now-for-front-end-architects
• http://www.cherny.com/webdev/105/front-end-web-designers-developers-and-engineers
• http://fuelyourcoding.com/steps-to-becoming-a-front-end-web-developer/
• http://onlinetools.org/articles/fed2.html

Bir kaç sitede gördükten sonra ve bende bir iphone projesine başlayacak olmamdan dolayı buraya eklemeyi uygun gördüm. Daha önce çıktı almak için(print) benzer bir yapıyı kullanmıştık.

Kodumuz çok basit

<!--[if !IE]>–>
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
<!–<![endif]–>

veyahut

@media only screen and (max-device-width: 480px) {
  body {color:#000;}
}

şeklinde bir tanımlamada yapabiliyoruz. İlk koddaki ie şartlı koşulu bazı eski ie sürümlerinde bu kodu algılama durumu içindir.

Yukarıdaki tanımlar sadece iPhone’da görünecektir. İşin püf noktasını max-device-width: 480px kısmı oluşturuyor.

Kaynaklar

• http://www.w3.org/TR/css3-mediaqueries/
• http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/
• http://squaregirl.com/blog/2009/6/1/iphone-css.html

Site içeriğinin az olduğu durumlarda sayfanın alt kısımları normal akış içerisinde ise yukarı doğru kayacaktır ve hoş olmayan görüntülere neden olacaktır. Bu gibi durumları engellemek için sayfamızın alt kısımlarını sayfa dibine yapıştırmalıyız, böylece sayfa içeriğinin az olması ve çok olması durumunda  alt kısmın yerini aynı olacaktır.

Bu işi yapmak için bir kaç türlü yöntem geliştirilmiştir, mantık olarak aynı olan bu yöntemlerde farklı tarayıcılardaki sorunlara çözüm bulmak için farklılıklar içerir. Ben bunlarda bazıları çeşitli projelerimde uyguladım, ancak makaleyi yazarken en iyisi hangisi ise onu yazmaya karar verdim. cssstickyfooter.com‘um anlattığı yöntem benim gördüğüm en iyi yöntem.

Kodumuzu yazmaya başlarsak.

XHTML kodu:

<div id="kapsul">
    <div id="ustAlan">
		<h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div id="icerikAlani">
        <div id="icerik">
        </div>

        <div id="icerikSagAlani">
        </div>
    </div>
</div>
<div id="altAlan">
</div>

XHTML kodunda dikkate değer olan kısım içerik alanı ve alt alanı iki farklı bölüm olarak kodlamamız. altAlan ve diğer alanları kapsayan bir kapsayıcı katmandan(#kapsul) oluşuyor kodumuz. Bizim yaptığımız örnekte üst alanı ve iki kolonlu içerik kısmını kapsayıcı katman içine alıyoruz.

CSS Kodu

html, body, #kapsul {height: 100%;}
body > #kapsul {height: auto; min-height: 100%;}
#icerik {padding-bottom: 133px;} /* altAlan yukseligi ile ayni olmali */
#altAlan {
	position: relative;
    margin-top: -133px; /* altAlan yuksekliginin eksi degeri */
    height: 133px;
    clear:both;
}

Buradaki 133px tanımına dikkat etmemiz gerekiyor. 133px altAlan yüksekliğidir ve 3 yerde birden aynı değeri kullandığımıza dikkat edeniz.

Kodu incelersek birinci ve ikinci satırda yüksekliklerin tüm alanı kapsaması için farklı tarayıcılar için %100 tanımını yapıyoruz.

3. satırda alta yapışık alan kadar padding değeri vererek içerik kısmının alt kısmın altında kalmasını engelliyoruz.

4-8 satır arasında alt alan tanımlarımızı yapıyoruz. Göreceli konumlandırdığımız alanı içerik alanında padding-bottom değeri ile açtığımız boşluğa yerleştirmek için negatif üst kenar boşluğu değeri veriyoruz.

Bu yöntemde float uygulanmış içerik kısmında tam alanı kapsayamama sorunu ile karşılaşıyoruz. Float uygulanmış alanların kapsayamama sorunu çözmek için http://www.fatihhayrioglu.com/float-uygulanmis-elementleri-tam-kapsayamama-sorunu/ makalemiz anlattığımız yöntemi kullanıyoruz.

.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */

Bu sınıfı tanımlıyoruz ve içeriği kapsayan(#icerikAlani) katmana atıyoruz.

<div id="kapsul">
    <div id="ustAlan" class="kapsayamamaSorunu">
		<h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div id="icerikAlani" class="kapsayamamaSorunu">
        <div id="icerik">
        </div>

        <div id="icerikSagAlani">
        </div>
    </div>
</div>
<div id="altAlan">
</div>

Bu yöntemin ryanfait.com’un yöntemine göre en büyük avantajı bence ryanfait.com’un yöntemindeki anlamsız tampon katmanı gibi bir fazla kodlamadan kaçınış oluyoruz.

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

Sorunlar ve Çözümleri

- Benim kullandığım projede body ve üstAlan’daki margin-top değeri sorun çıkardı. Bunun yerine padding kullanarak sorunu çözdüm. Üst kısım body’deki margin-top ve margin-bottom tanımları sorun çıkarıyor, bunun yerine padding kullanın.

- Ayrıca yazı tipi boyutunu büyük kullanmak isteyen kullanıcılarda sorun çıkabileceği söyleniyor. Eğer yazı tipi boyutunu piksel(px) vb. kesin değerler ile belirlerseniz bu tip sorunları engelleyebilirsiniz.

- Son olarakta asp.net ile oluşturulan sayfalarda <form> elemanı ile kapsanan sayfanızda sorun çıkabilir. Bunu engellemek için kodunuzu

	html, body, form, #kapsul {height: 100%;}

şeklinde değiştirmelisiniz.

Kaynaklar

• http://www.cssstickyfooter.com/
• http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
• http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
• http://cokbasit.blogspot.com/2009/01/yapkan-taban-sticky-footer.html
• http://css-tricks.com/sticky-footer/
• http://www.waycoolwebdesign.com/Blog/2008/11/15/CSS-Sticky-Footer
• http://stever.ca/web-design/css-sticky-footer/
• http://brassblogs.com/blog/sticky-footer
• http://www.davidjrush.com/blog/2009/01/css-sticky-footer/

• Daha hızlı kod yazma: Belli bir standardınız oluşturunca kod yazmak daha hızlı olacaktır.
• Birden fazla kişinin çalıştığı durumlarda kolaylık sağlar: Aynı kodlama düzenine sahip olmak beraber çalışmayı kolaylaştırır. Koordinasyonu arttırır.
• Daha okunabilir kodlar elde ederiz.
• Daha performanslı sayfalar elde ederiz.
• Daha sonra kodları güncellememiz gerektiğinde bize kolaylıklar sağlar. Mesela bir projeyi bitirdik 3-4 ay sonra değişiklik geldiğinde düzenimiz standart olduğu için düzeltmelerimizi daha kolay yaparız.

CSS kodu yazarken bazı standartlar oluşturmanın avantajlarından bahsettik yukarıda. Peki bu standartlar nasıl olmalı neler yapmalıyız ki optimum kod elde edelim.

1. CSS doküman indeksini oluşturun

CSS dokümanınız indeksini hazırlayınız. Büyük projelerde tercih edilecek bir husus bence. Şimdiye kadar hiç uygulamadım ama büyük projelerde uygulamanın yararlı olacağını düşündüğüm bir uygulama

/*------------------------------------------------------------------
[CSS Kod indeksi]
1. Body
2. Üst Alan / #ustAlan
2.1. Menü / #menu
3. İçerik Alanı / #icerik
	3.1. Sol Kolon / #solKolon
	3.2. Sidebar / #yanKolon
		3.2.1. RSS / #rss
		3.2.2. Arama / #arama
		3.2.3. Kutular / .kutu
4. Alt Alan / #altAlan
-------------------------------------------------------------------*/

2. CSS dokümanınıza imzanızı atın

Kod yazarının veya yazarlarının imzası ve genel bilgilerini yazarak kodlarımızı başlamalıyız.(Bende bunu ara sıra unutuyorum. Ama unutmamak gerekli)

/************************
************************
MYK Medya - http://myk-medya.com/
yahoyt.com
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/

3. Seçici isimlendirirken standart ve anlamlı isimler verin

Seçici isimleri ve genel isimlendirmede bir standardı oturtun.

Anlamlı isimler verin. Anlamlı isimler vermek kod yazarken ve daha sonrası için çok büyük kolaylık sağlayacaktır. XHTML kodların nasıl bir anlamı(body, p, form vd.) varsa, kendi oluşturduğumuz seçici isimlerinde bir anlamı olması mantıklıdır.

#maviKutu yerine #haberKutusu veya #haberAlani tanımı daha mantıklı ve anlamlı bir isimlendirmedir.

İsimlendirmede bir standardınız olsun. Benim standardım bu konuda ilk harf küçük, sonraki kelimelerin baş harfi büyük ile başlar ve bitişik yazılır.

#icerikOzu{..}
#solIcerikAlani{..}

Bu benim standardım. Başka türlü standartlarda vardır. Her kesin kendince bir standardı olabilir. Mesela alt çizgiyle ayıranlar var. (-)Tire ile ayıranlar var.

#icerik_ozu{..}
#sol-icerik-alani{..}

Bu standardı herkes kendince yapabilir. Benim önerim aynı projede çalışan insanların aynı kodlama yöntemini kullanması, diğer türlü pek hoş olmuyor. Göz aşina olmayınca bir eksik hissediyor insan kod yazarken.

4. Kısaltma kullanın.

CSS tanımlarında kısaltmaları kullanın. CSS kısaltmaları hakkında daha fazla bilgi için http://www.fatihhayrioglu.com/cssde-kisaltmalar/ okumanızı tavsiye ederim.

font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 15px;

yerine

font: bold 11px/15px verdana, sans-serif;

5. CSS dokümanlarınızı anlamlı bölümlere ayırın.

Büyük projelerde css dokümanlarını birden fazla bölümlere ayırarak daha düzenli ve kolay kodlanabilir dokümanlar elde ederiz.

@import url(/css/iskelet.css);
@import url(/css/fontlar.css);
@import url(/css/renkler.css);
@import url(/css/sifirlama.css);

Ben yukarıdaki yöntemi genelde çok büyük projelerde kullanmayı tercih ediyorum. Normalde ve genellikle tek ve iki css dokümanı ile projeyi bitiriyorum. Performans açısından bu daha iyi ayrıca.

Eğer CSS sıfırlama tekniklerinden birini kullanacaksam Bunu imzadan sonraya yazmak. Yada site genel tanımlarını başa yazmak. YUI CSS Reset ve Eric Meyer‘in ki var mesela.

/************************
************************
MYK Medya - http://myk-medya.com/
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/

body{margin:0; padding:0;}
ul{margin:0; padding:0; list-style:none;}

/*kapsayamam sorunu */
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu{display: inline-block;}
/* IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu{height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
/*kapsayamam sorunu */

6. Her satıra bir tanım yöntemini kullanın

CSS özelliği tanımlarken her satıra bir tanım yazarak daha uygun kod elde edebiliriz.

Ben daha önce her satıra bir özellik tanımı yapıyordum.

#aramaAlani{
    float:left;
    width:265px;
    background-color:#fff;
    border:3px solid #525252;
}

Bu yöntemde kod açık ve görüntü olarak daha kullanışlı görünse de, fazla boşluklar sorun oluşturmaya başladı. CSS kodları çok uzayınca kaydırma çubuğu ile çok aşağılara in yukarı çık zaman kaybına neden oluyordu.

Her Satırda Bir Tanım Yapma Yöntemi

Bende her satıra bir tanım yöntemini kullanmaya başladım. Aslında benim bu yönteme ilk geçme nedenim olan optimizasyonda css kodlarımı optimize ederken fazla boşluklardan kurtulmam gerektiğiydi. Daha sonra bu yöntemin daha avantajlı olduğunu gördüm, ayrıca daha derli toplu kodlar oluşturmama yaradı. Bundan sonra böyle kod yazamaya başladım.

#anaKapsul{...}    
#ustalan{...}    
#icerikAlani{...}    
#solIcerikAlani{...}    
#sagIcerikAlani{...}
#altAlan{...}   

Kodlarımızın daha okunabilir olması içinde girintili bir yapıyı tercih etmeliyiz.

#icerikAlani{float:left; clear:left; padding-top:20px;}   
	#solIcerikAlani{float:left; width:647px; margin-right:13px}
		#icerikOzu{float:left; clear:left; margin-top:20px}   
	#sagIcerikAlani{float:left; width:300px; margin:0;}  

7. Kodlarınızı yorum satırları ile açıklayıcı hale getirin.

Kodumuzun anlaşılabilir olması için yorum satırları eklemeliyiz. Bölümleri ve özel alanları yorum kodu ile belirleyerek anlaşılabilirliği arttırabiliriz. Böylelikle bölümler arasında daha kolay ayrım yapabiliriz. Kod okunabilirliği daha fazla olacaktır.

#anaKapsul{margin:0 auto; width:960px;}    
/**************************************************** ustalan   */
#ustalan{padding-top:20px;}

/**************************************************** icerikAlani   */
#icerikAlani{float:left; clear:left; padding-top:20px;}

/*sol icerik alani */    
	#solIcerikAlani{float:left; width:647px; margin-right:13px}
		#icerikOzu{float:left; clear:left; margin-top:20px}

/* sagIcerikAlani */

	#sagIcerikAlani{float:left; width:300px; margin:0;}       

8. CSS özellik tanımlarını sıralayın.

Özellik tanımlarında sıralama uygulayın. Özellik tanımlarında şablon tanımlarını başta yazmak. CSS tabanlı kodlama yazarken site yapısını oluşturan özellikler(float, width, height gibi özellikleri) ilk sırada yazıp sonra diğer özellikleri yazmayı tercih ediniz.

#solIcerikAlani{float:left; width:647px; margin-right:13px}

Burada bir diğer yöntemde özellikleri alfabetik sıraya göre yazmaktır. Buradaki amaç bir standart oluşturup göz aşinalığı sağlamak ve böylelikle daha hızlı kod yazmaktır.

Sıralayı şöyle yapmak mantıklı olacaktır.

• Konumlandırma, boyutlar (width, height, position, float, clear)
• Kenar için ve kenar dışı boşluklar ve kenar dışı çizgisi (margin, padding, border)
• Metin tanımları (font, line-height, color)
• Diğer özellikler

9. Çalışma gruplarınızda ortak standardınızı oluşturun.

Bir projede beraber çalıştığınız insanlarla aynı kodlama düzeninde çalışması çok önemlidir. Projede çalışan kişilerin bir araya gelip ortak bir düzen oluşturmaları ve projede bu düzen üzerine çalışmaları herkes açısından büyük katkı sağlayacaktır. Ayrıca css düzeltmelerinde(hack) de aynı şey söz konusu. Mümkünse aynı css düzeltmelerini kullanmanız ortak çalışılan projelerde size kolaylık sağlayacaktır.

10. CSS Editör araçlarından yararlanın

Daha öncede yazdığım gibi css editörü olarak Adobe Dreamweaver kullanıyorum. Bunun bir kaç sebebi var. Eskiden beri kullana gelmenin verdiği bir el alışkanlığı. CSS ve son sürümde de javascript editör kısımların gayet güzel çalışması.

Gelelim CSS Editörlerinin bizim CSS düzenine katkılarına

10.1 Otomatik tamamlama özelliği bize kod yazarken çok yardımcı oluyor. Bu özellik kod yazma hızımızı arttırıyor ve yanlış yazımları engelliyor.

10.2 Kodların renklendirilmesi de editörün güzel özelliklerinden biridir. Seçici, özellik, tanım ve yorum satırı ayrımı bize göstererek kod ayrımına yardımcı olur ve daha okunabilir kod görünümü sağlar.

10.3 Sık kullandığımız css düzeltmelerini(hack) snippets(dw özelliği) alanına ekleyerek hız kazanabiliriz. Daha hızlı olmak için bu tanımlara bir kısa yol bile atayabilirisiniz.

10.4 Dreamweaver’ın stil dosyalarını standarda oturmak çok kolay.

Edit -> Preferences.. tıklayınca gelen pencereden Code Format kısmını seçince sağ tarafta CSS.. düğmesine tıklayınca CSS doküman formatını ayarlama ekranından css düzenimizi ayarlayabiliyoruz.

Notepad ++ daki hizalama çizgileride çok güzel dw olmaması çok üzücü. DW’da hala tam olarak istedikleri karşılaya bilmiş değil, ama bildiğim en iyi editör.

Sonuç

Burada ben kullandığım ve araştırma sonucu elde ettiğim css düzeninden bahsettim. Bu stadartları kendinize göre değiştirebilir ve kendi stadartlarınızı oluşturabilirsiniz, Amaç stadart ve düzenli bir css kodlama düzenine erişmek. Son olarak örnek bir css dokümanı nasıl olmalıya bir örnek yazarsak:

XHTML kodu:

<div >

    <div >
    </div><!--[if !IE]>ustAlan sonu<![endif]-->

    <div >
        <div >
            <div ><img src="images/promo.jpg" width="647" height="264" alt="Promo" /></div>
            <div >
            </div><!--[if !IE]>icerikOzu sonu<![endif]-->
        </div><!--[if !IE]>solIcerikAlani sonu<![endif]-->
        <div >
        </div><!--[if !IE]>sagIcerikAlani sonu<![endif]-->
    </div><!--[if !IE]>icerikAlani sonu<![endif]-->

    <div  class="kapsayamamaSorunu">
    </div>    

</div><!--[if !IE]>anaKapsul sonu<![endif]-->

CSS kodu

/************************
************************
MYK Medya - http://myk-medya.com/
yahoyt.com
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/

/************************************************** Genel Tanımlar   */

body{margin:0; padding:0;}
ul{margin:0; padding:0; list-style:none;}

/*kapsayamam sorunu */
    .kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    .kapsayamamaSorunu{display: inline-block;}
    /* IE-mac de bu bolumu sakla \ */
    * html .kapsayamamaSorunu{height: 1%;}
    .kapsayamamaSorunu {display: block;}
    /* IE-mac bu bolumu saklam artik */
/*kapsayamam sorunu */

#anaKapsul{margin:0 auto; width:960px;}    

/************************************************** ustalan   */
#ustalan{padding-top:20px;}
            
/************************************************** icerikAlani   */
#icerikAlani{float:left; clear:left; padding-top:20px;}
    
/*sol icerik alani */    
    #solIcerikAlani{float:left; width:647px; margin-right:13px}
    #icerikOzu{float:left; clear:left; margin-top:20px}
    
/* sagIcerikAlani */

    #sagIcerikAlani{float:left; width:300px; margin:0;}                

/************************************************** altAlan */

#altAlan{clear:left; background-color:#404040; padding:12px; margin-bottom:20px;}

Kaynaklar

• http://www.webdesignerdepot.com/2009/05/10-best-css-practices-to-improve-your-code/
• https://developer.mozilla.org/en/Underscores_in_class_and_ID_Names (isimlendirme)
• http://davidwalsh.name/format-css-files (güzel örnek)
• http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WS6A10E93F-6587-4e1b-956C-03CBD7F678BBa.html (dw ayarları)
• http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/ (süper)
• http://www.louddog.com/bloggity/2008/03/css-best-practices.php
• http://css-tricks.com/indent-css-changes-you-are-unsure-about/
• http://woork.blogspot.com/2008/03/write-well-structured-css-file-without.html (güzel)
• http://woork.blogspot.com/2008/01/optimize-your-css-files-to-improve-code.html
• http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
• http://css-tricks.com/video-screencasts/8-css-formatting/ (video)
• http://www.graphicrating.com/2009/02/23/css-code-readability-tips/
• http://developer.yahoo.com/performance/rules.html#num_http