border-radius özelliği CSS3 ile birlikte geldi ve HTML elemanlarına yuvarlak kenar özelliği verme işine yarıyor. Web 2.0 ve yeni stiller ile birlikte bir çok sitede yerini alan yuvarlak kenarlı yapılar kullanılıyor, buda bu özelliği önemli kılıyor.

Köşeli yapılardan kaçan bir çok tasarımcı artık yuvarlak köşeli tasarımları tercih ediyor. Bu arada şunuda söylemeden geçemeyeceğim bazı sitelerde hiç hoş durmuyor yuvarlak kenar, her şeyi yerinde ve göz zevkine uygun kullanmak en iyisi.

Yapısı : <border-radius>{1,4} [ / <border-radius>{1,4}]?
Aldığı Değerler : [ <uzunluk> | <yüzde> ] [ <uzunluk> | <yüzde> ]? 
Başlangıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler ve tabiki tablo elementine border-collapse değeri collapse olarak atalı ise uygulanır
Kalıtsallık: Yok

Tek değer atanmış ise, dört köşeyede aynı değer uygulanır.
İki değer atanmış ise, ilk değer sol üst ve sağ alt köşeye; ikinci değer sağ üst ve sol alt köşeye uygulanır.
Dört değer atanmış ise, sırası ile sol üst, sağ üst, sağ alt ve sol alt köşelere uygulanır.
Üç değer atanmış ise, ikinci değer sağ üst ve sol alt köşeye uygulanır.

Tarayıcı Uyumu:
Internet Explorer desteklemiyor (İE9 da gelecek) 
Firefox 2+
Safari 3+ (kısmen)
Opera 10.50+
W3C’s CSS Level 3+
CSS Profile 3.0

- Safari yüzde değerleri desteklemiyor.
- Safari/Webkit tabanlı tarayıcılar her 4 köşeye sadece bir tanımı kabul ediyor.
- Safari/webkit tarayıcıları (/) ile ayrılan değerleri kabul etmiyor. Bu gibi değerleri kullanmak için aşağıdaki gibi bir atama yapmalıyız. Elips şeklinde sonuçlar elde etmke için (/) ayracı kullanılır.

	-webkit-border-radius:  40px 10px;
	-moz-border-radius:  40px/10px;
	border-radius:  40px/10px;

Uygulama

Bugünkü durumda border-radius tanımı tek bir tanımlama olarak atanmamaktadır, farklı tarayıcılar ön ek kullanarak bu özelliği desteklemektedir. Webkit tabanlı tarayıcılar(Safari ve Google Chrome) için -webkit, Gecko tabanlı(Firefox) tarayıcılar için -moz ön ekleri kullanılmaktadır. 

Bu durum bazen çok uzun kodlar üretmemize neden oluyor. İleride umarım bu durum düzelir. 

İlk örneğimizi yapalım

div#kutu {
    width: 400px;
    padding: 20px;
    border-radius: 10px; /* Standart */
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari ve Chrome */
    background: #F00;
    margin-bottom: 10px;
}

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

İkinci örnek

div#kutu{
    width: 400px;
    padding: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    background: #F00;
    white-space:pre
 }

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

http://muddledramblings.com/table-of-css3-border-radius-compliance  ve http://shapeshed.com/examples/border-radius/ adresindeki örnekler inceleyerek bu özellik ile neler yapabileceğimizi görebiliriz.

İnternet Explorer Desteği

Yukarıda anlattığımız tanımları maalesef İnternet Explorer desteklememektedir, daha ön görünümü yayınlanan ie9′da desteklediğini açıkladı.

İnternet explorer için çözüm üreten bir çok javascript kodu mevcut, ben burada sizlere belli başlılarının linklerini vereceğim ve ufak bilgiler vereceğim.

DD roundies

Bu script güzel çalışıyor. Bir çok farklı durumlar için güzel bir çözüm üretiyor. Herhangi bir javascript kütüphanesine ihtiyacı yoktur. CSS3 border-radius özelliğini destekleyenler için bu özelliği desteklemeyenler için ise javascript kodunu ekleyerek bize güzel bir çözüm üretir. Köşe yumuşatması güzel

Curvy Corners ve jQuery Plugin Curvy Corners

Diğer güzel çözüm önerilerinden ikiside bu scriptlerdir. Köşe yumuşatması güzel. Background resimleri ile iyi çalışıyor, ancak CSS3 ile olan uygulamalarda sorun çıkarıyor. CSS3 border-radius destekleyen tarayıcı kontrolü yapmıyorlar ve fazladan yüklenmeye neden oluyorlar.

Nifty Corners ve jquery Corner

Köşe yumuşatması güzel değil. Yuvarlak kenar için üretilen kodda gereksiz bir çok eleman var. Pek önerilebilecek bir çözüm değil.

HTML Remix

Bu çözümün en güzel yanı yuvarlak kenar için ekstra kod yazmaya gerek olmaması. Yazdığımız border-radius değerini alıp desteklemeyen tarayıcılara göre kod yazıyor. Script tanımını css kodu içerisinden yapıyoruz.

.curved {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    behavior:url(border-radius.htc);
}

Köşe yumuşatması güzeldir. 4.8 kb’lık dosya boyutu ile çok cazip boyuta sahip.

css3pie

CSS 3′ü desteklemeyen tarayıcılar için komple bir çözüm üreten bu script İnternet Explorer için üretilen çözümlerden birisidir. Tek sorunu bütünleşik bir çözüm sunduğu için dosya boyutunun biraz büyük olmasıdır. Köşe yumuşaklığı güzel. CSS3′ü destekleyen tarayıcılar için css kodunu desteklemeyen tarayıcılar için ise script kodunu uyguluyor olması güzel.

Sonuç

border-radius tanımını destekleyen tarayıcılar açısından bir sorunumuz yoktur. Sorunumuz desteği sağlamayan ie ile dir. 

Javascript ile ürettiğimiz çözümler normal tanımın yerini tutmayacaktır hiç bir zaman. Sayfa içerisinden bir çok elemana yuvarlak kenar uygulandığında ie için üretilen çözüm sayfanın fazladan yavaşlamasına neden olacaktır. 

Bir elemana yuvarlak kenar ve gölge uygulandığında ie için üretilen bir çok çözümde bazı sorunlar ile karşılaşılabilir. Bu gibi durumlarda resim ile çözüm üretmeniz tavsiye olunur. 

İE için üretilen çözümler için yukarıda yazdıklarım kendi gördüklerim ve internette araştırıp gördüklerim bilgilerden derlemedir. Bu değerlendirmelere sizin kendi uygulamalarınızdaki sonuçlarıda ekleyerek bir scripti seçmenizi öneririm. 

Bence en güzeli eğer tercih imkanınız varsa destekleyen tarayıcılar için kodu yazmak desteklemeyenler için olduğu gibi bırakmak(twitter.com sitesinde olduğu gibi.)

Kaynaklar

• http://webdesignernotebook.com/css/an-ode-to-border-radius/
• http://leaverou.me/2009/02/css3-border-radius-today/
• http://www.the-art-of-web.com/css/border-radius/ (border-radius)
• http://www.css3.info/preview/rounded-border/
• http://24ways.org/2006/rounded-corner-boxes-the-css3-way
• http://www.css3.info/border-radius-apple-vs-mozilla/
• http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html
• http://www.smileycat.com/miaow/archives/000044.php (tüm makalelerin listesi)
• http://www.netzgesta.de/corner/ (javascript)
• http://www.curvycorners.net/demos/ (javascript)
• http://www.html.it/articoli/niftycube/index.html (javascript)
• http://www.dillerdesign.com/experiment/DD_roundies/#animation (javascript)
• http://www.w3.org/TR/css3-background/#border-radius
• http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser (javascript)
• http://doctype.com/having-trouble-styling-cross-browser-buttons-input-submit (sorunlar)
• http://muddledramblings.com/table-of-css3-border-radius-compliance (taraycı destek tablosu)
• http://stackoverflow.com/questions/2687804/emulating-css3-border-radius-and-box-shadow-in-ie7-8

Sorunu şöyle tanımlayabilirim; overflow kullandığım bir eleman içindeki bir elemana position:relative tanımladığımda relative verdiğim eleman overflow uyguladığım elemanın dışına çıkıyor ve scroll olmuyor.

Şöyle küçük bir örnek durumu daha iyi gösterecektir.

<div id="icerikAlani">
    <p>İlk paragaraf</p>
    <p class="relative">position:relative uygulanan kısım</p>
</div>

CSS kodu da şöyle

#icerikAlani{
    height:80px;
    overflow:auto;
    width:200px;
    height:80px;
    background-color:#ccc
}
.relative{
    position:relative;
    background-color:lightblue;
    width:150px;
}

Sonuca ie 6 ve 7 ile baktığımızda aşağıdaki gibi bir sorun ile karşılaşacağız.

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

Sorunun çözümü ise çok basit. overflow uyguladığımız elemana position:relative tanımı yaparak sorunu giderebilirsiniz.

#icerikAlani{
    height:80px;
    overflow:auto;
    width:200px;
    height:80px;
    background-color:#ccc;
    position:relative;
}
.relative{
    position:relative;
    background-color:lightblue;
    width:150px;
}

Kaynaklar

• http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
• http://www.rowanw.com/bugs/overflow_relative.htm
• http://dustyreagan.com/workaround-to-ies-overflow-auto-and/

Sorunumuzu tam olarak şöyle tanımlayabiliriz; Dikey olarak listelediğimiz menülerde ie’de fazladan boşluk gözüküyor. Bu durum bazen ie6′da bazense ie6 ve ie7′de oluyor.

Bir örnek verelim

<ul id="menu">
  <li><a href="#">Menu Bir</a></li>
  <li><a href="#">Menu İki</a></li>
  <li><a href="#">Menu Üç</a></li>
  <li><a href="#">Menu Dört</a> </li>
</ul>

CSS kodumuzda da

ul#menu li a{ display:block}

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

kodumuz olsun. Diğer tarayıcılarda normal bir görünüt alırken ie6′da liste öğeleri arasında fazladan boşluk görürüz.

Sorun İnternet Explorer’un hasLayout sorunudur. Aşağıdaki tanımlardan biri yapılması durumunda bu sorun düzelecektir.

display: inline-block
height: herhangi bir değeri
float: left veya right
*max-height: herhangi bir değeri
*max-width: herhangi bir değeri
*min-height: herhangi bir değeri
*min-width: herhangi bir değeri
*overflow: not visible
position: absolute
width: herhangi bir değeri
writing-mode: tb-rl
zoom: herhangi bir değeri

* ie7 de geçerli.

Biz bir tanesini seçelim.

* html ul#menu li a {height: 1px;}

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

Bu kodu yazdıktan sonra sayfa aşağıdaki gibi görünecektir.

Kaynaklar

• http://www.brunildo.org/test/IEWlispace.php
• http://www.hicksdesign.co.uk/journal/ie-whitespace-bug
• http://www.cssnewbie.com/fixing-ie6-whitespace-bug/
• http://orlandodefrias.com/2008/11/23/ie-unordered-list-extra-space-bug/
• http://archivist.incutio.com/viewlist/css-discuss/34926
• http://gtwebdev.com/workshop/gaps/white-space-bug.php

Gelelim sorunun ne olduğuna; sorun şudur ki zemininden resim olan genişleyebilir alanlarda kullandığımız bir yöntem olan Sliding Doors(aynı yöntemi şurada da kullandım) yaptığım bir alanda hover efekti vermeye çalıştığımda karşılaştığım bir sorun. Daha kolay anlaşılmasıması ve benim içinde anlatması kolay olduğu için kaynaklardaki bir örneği vereceğim burada size ben.

HTML kodu

<div>
	<a href="#">foo<span>bar</span></a>
</div>

CSS Kodu

span {
    display: none;

}

a:hover span {
    display: inline;
}

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

Burada yapılan çok basit bir iştir. Bağlantı üzerine gelince span içindeki bar yazısını gösteriyoruz. Ancak ie6′da bu sayfaya baktığımızda bar görüntülenmeyecektir. 

Peki çözüm nedir?

Sorun hasLayout sorunu gibi görünsede genel hasLayout çözümleri pek işe yaramıyor. Haslayout sorunları ie6 ve ie7 de görülür, ancak Microsoft bu sorunu ie7 çözmüş görünüşe göre.

friendlybit.com sitesindeki çözüm yolu şöyle; a:hover elemanına padding-top:0 değeri atayıp sonrada a:hover span seçicisinede padding-top:0 değeri atayınca oluyor.

a:hover{
	padding-top:0;
}
span {
    display: none;

}

a:hover span {
    display: inline;
	padding-top:0;
}

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

Kaynaklar

• http://haslayout.net/css/Sub-Hover-Bug
• http://friendlybit.com/css/ie6-bug-ignored-selector-hover-bug/

Sorunu açıklamaya çalışayım; postion:relative uyguladığımız elemanların(li) içinde postion:absolute kullanarak eklediğimiz elemanlar sıralı elemanlarının altında kalıyor.

Genelde bu durumla liste(li) elemanı içinde üzerine gelince açılan bir alan(menü) açtırmak istediğimizde karşılaşıyoruz.

Basit bir örnek ile durumu gösterelim.

.anaKatman {
    position: relative;
    width: 300px;
    border: 1px solid black;
}

.acilanBolum {
    position:absolute;
    left:0;
    width: 150px;
    border: 1px solid red;
    background: gray;
    z-index: 1000;
}

HTML kısmı

<div class="anaKatman">
    <div class="acilanBolum">
        Curabitur dapibus lacus elit. Maecenas nec ligula ipsum. Vivamus accumsan sollicitudin augue, vel sollicitudin mi varius sed. Proin in erat sit amet dolor tincidunt scelerisque eget nec felis. Curabitur dapibus lacus elit. Maecenas nec ligula ipsum.
    </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non diam sit amet erat facilisis ultrices id vel turpis. Etiam pulvinar arcu ac felis pretium mollis. Etiam augue orci, iaculis non mollis et, venenatis vel ipsum.
</div>

<div class="anaKatman">
	Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>
<div class="anaKatman">
	Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>

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

Firefox’da yukarıdaki gibi sorunsuz görünüyor.

Üstte kalmasını istediğimiz katmana(acilanBolum) z-index:1000 değeri vermemize rağmen alttaki katmanın altında kalmaktadır İnternet explorer 6 ve 7 sürümlerinde. 

Çözüm için aşağıdan yukarı doğru artan z-index değerleri yazılmalıdır. Ben ardışık z-index değerleri atayarak yapıyorum bunu. Sırası ile z-index:1, z-index:2 ve z-index:3 değerlerini atıyorum aşağıdan yukarı doğru. Eğer araya bir eleman girme ihtimali varsa aralıklı verin değerleri 10, 20, 30 gibi.

HTMl kodunu aşağıdaki gibi değiştirince sorun çözüldü.

<div class="anaKatman" style="z-index:3">
<div class="acilanBolum">
	Curabitur dapibus lacus elit. Maecenas nec ligula ipsum. Vivamus accumsan sollicitudin augue, vel sollicitudin mi varius sed. Proin in erat sit amet dolor tincidunt scelerisque eget nec felis. Curabitur dapibus lacus elit. Maecenas nec ligula ipsum.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non diam sit amet erat facilisis ultrices id vel turpis. Etiam pulvinar arcu ac felis pretium mollis. Etiam augue orci, iaculis non mollis et, venenatis vel ipsum.
</div>

<div class="anaKatman" style="z-index:2">
Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>
<div class="anaKatman" style="z-index:1">
Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>

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

Kaynaklar

• Beginning CSS: Cascading Style Sheets for Web Design
• http://benhollis.net/experiments/ie7_tests/zindex.html

İlk harfi büyük paragraflar oluşturma işi aslında dergilerde sık uygulanan bir yöntemdir. Genelde dergilerin başlangıç paragrafının ilk harfi 2 veya daha fazla satır yüksekliğinde oluşturarak farklı ve güzel bir görünüm kazandırırlar. Bu durumu biz css ile yapabiliyoruz. 

Biz bu görüntüyü first-letter seçicisi ile elde edebiliyoruz. Hatta bu seçicinin adı drop caps-ilk harfi büyük harf seçicisi diyede geçiyor. Bizim için en büyük avantajı ie6 dahil tüm tarayıcıların bu özelliği desteklemesi.

:first-letter seçicisini tanımlanabilen özellikler listesi;

• font özellikleri
• color özellikleri
• background özellikleri
• text-decoration
• vertical-align (float değeri none ise)
• text-transform
• line-height
• margin özellikleri
• padding özellikleri
• border özellikleri
• float
• text-shadow
• clear

İlk Denememiz

HTML kodlarımız

<p class="introduction">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

CSS kodlarımız

p{
    width:350px;
    background-color:#272722;
    padding:10px;
    color:#fff;
}

p.introduction:first-letter {
    font-size: 4.2em;
    float: left;
    line-height: 1em;
    margin: 0.13em 0.13em 0.13em 0;
}

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

Firefox’da yukarıdaki görüntüyü elde ederken

İnternet Explorer’da yukarıdaki gibi bir görüntü elde ederiz. Dikkat ederseniz bir explorerda L harfi yukarıya daha yakın.

Sorunu gidermek için line-height değerini 1em olarak atıyoruz. Farklı line-height değerleri ile padding uygulamalarında ie 6 ve 7′de sorun çıkıyor, line-height değerini 1 em’de tutmak mantık en azından ie için 1em yapmak gerekiyor.

Fark stillerde uygulamalar yapabiliriz.

İlk harfi font-face ile özel bir yazı tipi ile oluşturarak güzel bir görüntü elde edebiliriz. Yazı tipini(PaladinFLF) http://www.fontsquirrel.com/fontface sitesinden aldım.

@font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{width:350px; background-color:#272722; padding:10px; color:#fff;}
p.introduction:first-letter {
	font: 4.2em/1em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0.13em 0;
}

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

İşe Biraz daha renk katalım

İlk harfin etrafına kenar çizgisi atayıp ardalan rengini değiştirelim.

@font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction:first-letter {
	font: 4.2em/0.6em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0 0;
	border:3px solid #fff;
	padding:0.13em;
	background-color:#F30;
	line-height:1em;
}

HTML kodları

<p class="introduction">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

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

Ardalan Resmi ile

Harfin ardalanına bir resim koyup üzerine harfi koymayı deniyorum.

  @font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction:first-letter {
	font: 4em/1em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0 0;
	padding:0.4em 0.5em 0.4em 0.3em ;
	background-color:#F30;
	background:url(t.jpg) 0 0 no-repeat;
	text-shadow:2px 2px 2px #999
}
  

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

Firefox ile yukarıdaki gibi güzel bir sonuç elde ediyoruz. Ancak İnternet Explorer’da sorun yaşıyoruz. 

Bu duruma çözüm üretmek için bir kaç yol var. İlki resmi direk içeriğe ekleyip float:left ile sola yaslayarak çözmek 

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction img {
	float:left;
	margin-right:0.8em
}

HTML kodu

<p class="introduction"><img src="t1.jpg" width="93" height="100" />empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Velit esse cillum dolore eu fugiat nulla pariatur</p>

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

Diğer bir yöntem bu harfi span içine alıp background olarak tanımlamaktır.

CSS3 ile ekstra kod kullanmadan

Sayfamızın ilk paragrafının ilk harfine uygulama yapıyoruz. first-child seçicisi bu imkanı bize sağlar. ancak bu özelliği ie < 9 desteklemiyor.

p:first-child:first-letter{
  font-size: 4.2em;  float: left;  line-height: 1em;  margin: 0.13em 0.13em 0.13em 0;
}

Kaynaklar

• http://www.sitepoint.com/blogs/2010/04/15/a-simple-css-drop-cap/
• http://safalra.com/web-design/typography/css-drop-caps/
• http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=111 özel fontlar ile 
• http://www.pauldruce.com/CSS%20DROP%20CAP (bazı sorunlar ve çözüm)
• http://www.learningjquery.com/2006/12/multiple-fancy-drop-caps (jquery ile)
• http://www.htmldog.com/articles/dropcaps/
• http://css-tricks.com/snippets/css/drop-caps/
• http://oncemade.com/css-tip-drop-caps/
• http://azizname.blogspot.com/2006/10/magazine-style-drop-caps.html
• http://dailydropcap.com/ (günlük örnekler)
• http://jackosborne.co.uk/articles/pseudo-drop-caps/
• http://www.akxl.net/labs/articles/text-wrapped-drop-caps-in-css-using-the-first-letter-selector/
• http://www.users.globalnet.co.uk/~arcus/html/dropcaps.html

Ben genelde bu sorun ile özel textbox alanlarını kodlarken karşılaşıyorum.

yukarıdaki gibi bir tasarımı koda çevirirken

<div class="dis">
    <div class="ic"><input type="text" value="Arama" /></div>
</div>

CSS kodu

div.dis{
	margin-left:65px;
}
div.ic{
    width:241px;
    height:25px;
    background:url(arama_ardalan.gif) 0 0 no-repeat
}
div.ic input{
    border:0;
    background:none;
    width:204px;
    margin:4px 0 0 5px;
    font-size:11px;
    color:#534013;
}

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

Böyle bir kod yazıyorum. Dıştaki div(div.dis) herhangi bir kapsayıcı div olarak düşünün. Sayfanın diğer bir öğesi yani bu arama kısmı ile alakası yok. Bu kapsayıcı katmandaki margin tanımı ie’de sorun çıkarıyor.

Firefox’da yukarıdaki gibi bir görüntü alırken

İnternet Explore 6 ve 7 sürümlerinde yukarıdaki gibi bir görüntü ile karşılaşıyorum. En dıştaki katmana atadığım margin-left değeri içerideki elemanımı etkiliyor. Kalıtsal olarak bu değeri alıyor. Sorunu ilk önce "IE’da İkikat görülen Margin Problemi ve Çözümü" anlattığım gibi bir sorun olduğunu düşündüm ama değildi. Bu sefer ki farklı bir sorun. positioniseverything.net sitesinde aynı sorunu görünce anca adını koyabildim.

Sorun; input alanını kapsayan ebeveyn elemanda hasLayout ve margin tanımı var ise oluyor. Kaynak kısmında verdiğim sitede bir kaç çözüm önerisi var. Ancak ben hasLayout sorunlarının en kolay çözüm yolu olan zoom:1 tanımı ile bu sorunu aştım. Margin tanımı olan elemana zoom:1 tanımı yapınca sorun çözüldü

div.dis{ margin-left:65px; zoom:1}

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

Bu sorun tüm input çeşitlerinde(text, checkbox, radyo buton ve resim) meydana geliyor, ayrıca textarea’da yaşanıyor bu sorun, ancak select elemanında bu sorun ile karşılaşılmıyor.

Kaynak

• http://www.positioniseverything.net/explorer/inherited_margin.html

1- toggle() ile kolayca gizle/göster yapmak.

Javascript ile en çok yaptığımız işlerden biriydi bir bağlantıya veya elemana tıklayınca açılan bir daha tıklayınca kapanan alanlar oluşturmak. jQuery bu iş için bize toggle() fonksiyonunu tanımlamış. Çeşitli kullanım şekilleri olsada ben size burada en basit şeklini anlatacağım.

$('p.hidden').toggle ();

Bu kadar basit bir kod ile işlem tamamdır. toggle() fonksiyonuna çeşitli animasyonlar ve işler ekleyebiliyoruz. Gayet kullanışlı bir özellik.

2- toggleClass() ile toogle uyguladığımız elemanlara sınıf tanımlama

Yukarıda yaptığımız uygulamaya ek olarak tetiklenen elemana bir sınıf tanımlamak için

$('p.hidden').toggleClass ("acik");

bu kod sayesinde mesela çok basit şekilde aç-kapa butonu yapabiliriz.

3- click() ile tetiklenen bağlantılarda ie6 sorununu gidermek

Bir bağlantıya jquery ile erişip click() metodunu uyguladığımızda ie6 ile sorun yaşıyoruz. Ben bu sorun için bir çözüm bulmuştum ancak Hüseyin Mert daha iyi bir çözüm buldu. Ben bu çözümü burada sizlerle paylaşmak istedim.

$("a").click(function(event){
    event.preventDefault();
    // yapılacaklar
});

Böylece sorunu aşmış oluyoruz. Hüseyin Mert’e teşekkürler tekrar.

4 – Metot Zincirleme özelliği ile daha kısa kodlar üretmek

Bir çok metodu ard arda aynı elemana yazmaktansa zincirleme kullanabilme özelliği sunuyor bize jQuery.

$('p.ilkParagraf').css ('color', '#ff0000').text ('Giriş').addClass ('yazi').fadeTo (1000, 1);

Yukarıdaki örnekte görüldüğü gibi ard arda metotları kullanabiliriz. Ancak çok fazla kullanmanın performansı etkilediğini unutmadan bu özelliği kullanalım.

5- Kontrol kutularının(checkbox) kontrolü

jquery ile kontrol kutularını kontrol etmenin bir kaç yolu var

if($('#deneme:checked').val() != null)
{
	// işaretli ise bunu yap
}
//veya
if($('#deneme:checked').length != 0)
{
	// işaretli ise bunu yap
}
//veya
$('input[name=deneme]').is(':checked')
$('input[name=deneme]').attr('checked')
// işaretli veya degil
$('input[name=deneme]').attr('checked', true);

6 – Arama metinlerini değiştirmek

Arama kutuları içine açıklayıcı metinler yazarız. “Anahtar Kelime”, “Arama” vb. gibi. bu metinleri yazarız, ancak kullanıcı bu alana odaklandığında bu metni kaldırmalıyız ve kullanıcı bir şey yazmadan çıkarsa o zamanda genel yazdığımız metni geri getirmeliyiz.

var aramaKutusu = $("#aramaAlani");
var aramaKutusuBasDeg = "Aranacak Kelime";
aramaKutusu.attr("value", aramaKutusuBasDeg);

aramaKutusu.focus(function(){
	if(jQuery.trim($(this).attr("value")) == aramaKutusuBasDeg) $(this).attr("value", "");
});

aramaKutusu.blur(function(){
	if(jQuery.trim($(this).attr("value")) == "") $(this).attr("value", aramaKutusuBasDeg);
})

Güncelleme: Bu kullanımın daha basit bir şekli var. yedincisenol’un yazdığı kod daha basit ve kullanışlı.

function doldur(o){ if (o.value==o.defaultValue){o.value="";} else if(o.value==""){o.value=o.defaultValue;}o.onblur=function(){doldur(o)}}

ve kodu sonra çağırmak için (jquery ile)

$("#inputId").focus(function(){ doldur(this) });

veya html içinden

<input name="adınız" value="Adınızı girini" onfocus="doldur(this)"/>

Kod için yedincisenol’a teşekkürler

7- Zebra tablo yapmak

Tablo okunabilirliğini arttırmak için bir satır farklı bir renk veya stil tanımlarız. Bunu javascript ile uzun yoldan yaparken jquery ile tek satır kod ile yapabiliyoruz

$("tr:nth-child(odd)").addClass("farkliSatir");

8 – Çok tekrarlanan seçicileri bir değişkene tanımlamak

$('p.ilkParagraf').css ('color', '#000000');
$('p.ilkParagraf').text ('Giriş');
$('p.ilkParagraf').addClass ('yazi');
$('p.ilkParagraf').fadeTo (1000, 1);

Yukarıdaki gibi bir kullanımda çok fazla tekrarlayan bir seçiciye bir değişkene atayıp daha optimum bir kod elde edebiliriz.

var $p = $('p.ilkParagraf');
$p.css ('color', '#000000');
$p.text ('Giriş');
$p.addClass ('yazi');
$p.fadeTo (1000, 1);

Bu kullanım ile eleman ilk başta bir değişkene atanıp ön belleğe alınıyor ve daha hızlı erişiliyor.

Kaynaklar

• http://ff.im/dAPK6
• http://www.myinkblog.com/2009/08/04/10-tips-for-writing-better-jquery-code/
• http://drupal.org/node/116548
• http://snipplr.com/view/25148/jquery-search-text-replace/
• http://docs.google.com/Doc?docid=0AXwjxxctLLc5ZGZwYnQ3Z2RfNTBkZjZ3MnJmOA&hl=tr

Pek nadirde olsa böyle bir istek ile karşılaşıyorum. Bu ikinci oldu. İlk başta bunun bir çözümü yoktur diye düşündüm(Bunu düşünmemin nedeni daha önce böyle bir istek ile karşılaştığımda çözümünü bulamadım diye aklımda kalması). Ancak sonra bazı sitelerde böyle bir şey yapıldığını görünce, araştırmaya karar verdim ve çözümü buldum.

Genelde %100 flash sayfalarda veya kendi içinde kaydırma çubuğu çıkan sayfalarda bu tip bir istek geliyor.

Firefox, İnternet Explorer 8, Safari, Google Chrome gibi yeni nesil tarayıcılar eğer içerik uzun değilse kaydırma çubuğunu göstermiyor. Ancak ie6 ve ie7 de durum böyle değil. İçerik olsun yada olması sağda yatay kaydırma çubuğu daima görünüyor. Bu durumu eşitlemek için çok basit bir kod yazmamız yeteli oluyor.

html {overflow:auto;}

Kaynaklar

• http://www.webmasterworld.com/forum21/10389.htm
• http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_22759180.html

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.