Genelde siteler yapılırken ana sayfa ve alt sayfa olarak kodlanır. Bunun sebebi ana sayfalar tekildir, alt sayfalar ise birbirine benzeyen yapılardan oluşur. Bu nedenle alt sayfaların bir tanesi kodlanınca diğer sayfaların kodlanması daha az zaman alır. Bir çok freelance işinde ana sayfa farklı alt sayfalar farklı olarak ücretlendirilir. Neyse işin bu kısmına girmeyelim.

Eksiden sadece bir alt sayfa şablonu hazırlayıp diğer sayfa içeriklerini o şablondaki içerik kısmına girerek tüm siteyi oluştururduk. Şimdilerde ise neredeyse her sayfa için bir tasarım çıkıyor ve her birini ayrı ayrı kodluyoruz.

Fanatikmarslar.com sitesini düşünürsek; bana gönderilen alt sayfa tasarımlarından 4 tane farklı tasarıma sahip sayfa vardı. Diğerleri bunların kopyası gibi olduğu için ben burada sizlere bu 4 alt sayfayı nasıl kodladığımı anlatacağım.

Yukarıdaki 4 sayfada gördüğümüzü özetlersek; ilk olarak üst kısım ve alt kısmın ana sayfa ile aynı olduğunu görüyoruz. Orta kısım ise tüm alt sayfalarda aynı. İki kolonlu bir yapı ve sağ kolon sabit. Sol içerik kolonu içeriği değişiyor.

Kategori Listeleme Sayfasının Kodlanması

Orta kısmı iki kolona ayırıyorum. solOrtaAlan ve icerikalaniSag adını verdim. İki kolonu yan yana koymak için float ve genişlik tanımlarını yapıyoruz.

	<div id="solOrtaAlan">
    ...
    </div>
    <div id="icerikalaniSag">
    ...
    </div>

CSS kodunu yazalım

#solOrtaAlan{float:left; width:650px; margin:0 20px 0 10px; font:14px Arial, Helvetica, sans-serif; display:inline}
#icerikalaniSag {float:left; width:300px}

Sol Orta Alan

#solOrtaAlan tanımına margin tanımlarını yapıyorum. Burada "IE’da İkikat görülen Margin Problemi ve Çözümü" sorunu ile karşılaştığım için display:inline tanımı atadım.

Kodlamaya sol orta alandan devam ediyorum.

Başlık

<h1>Marşlar</h1>

Başlığımızı h1 ile tanımlıyoruz. Hem anlamlı kodlama hemde arama motorlarına uygun kodlama açısından sayfa başlığını h1 ile tanımlıyoruz. Diğer başlıklarıda sırası ile h2, h3, vd. şeklinde tanımlamalıyız. Şimdi burada gerekmediği için tanımları yapmadık.

Sıralama Alanı

Sıralama kısmına yaparken bu alanı sırasız listeler ile yapmayı düşündüm.

<div id="siralamAlani">
 <ul>
     <li><strong>Sıralama:</strong></li>
     <li><a href="">Karışık</a></li>
     <li><a href="">Popüler</a></li>
     <li><a href="">Oley!</a></li>
     <li><a href="" class="secili">Alfabetik</a></li>
     <li><a href="">En Çok Tıklanan</a></li>
     <li><a href="">En Son Eklenen</a></li>
 </ul>
</div>

Dışına bir katman atamamın nedeni ardalan resmi ve diğer öğeler ile olan ilişkileri ayarlamak içindir. Sıralama öğelerinden bir tanesine göre sıralama yapılacak ve başındaki ok ikonu aşağı bakacağı için bu öğeye bir sınıf tanımlıyorum diğerlerinden ayırmak için

div#siralamAlani{ background:url(../images/siralama_ard.gif) 0 0 no-repeat; height:38px;}
    div#siralamAlani ul{padding:10px 0 0 10px}
        div#siralamAlani ul li{display:inline;}
            div#siralamAlani ul li strong{display:block; float:left; color:#828282; font:bold 14px Arial, Helvetica, sans-serif; margin-right:3px}
            div#siralamAlani ul li a{display:block; background:url(../images/genel_resim.gif) right -388px no-repeat; float:left; font:bold 14px Arial, Helvetica, sans-serif; color:#0c2b90; padding-right:15px; margin-right:10px}
            div#siralamAlani ul li a.secili{background:url(../images/genel_resim.gif) right -354px no-repeat;}

Listeleme Tablosu

Listeleme tablosunun bir kaç kolonu hariç ana sayfadaki tablodan bir farkı yoktur. Benzer bir anlayış ile burayı kodlayalım.

table.genelTablo{border-collapse:collapse; }
    table.genelTablo th{font:bold 14px Arial, Helvetica, sans-serif; color:#000; padding:5px 2px; text-align:left}
    table.genelTablo th.ortala{text-align:center}
    table.genelTablo tr.enAlt td{border:0}
    table.genelTablo td{padding:1px 2px; font:14px Arial, Helvetica, sans-serif; color:#828282; border-bottom:1px solid #d5d5d5;}

Listeleme tablosunun ana sayfadan farklı olan kısmı en sağdaki oylama gösterme alanı

<td><p class="oley"><strong class="ucKupa">3 Kupa</strong></p></td>

Sadece oyu göstereceğimiz için bu şekilde kodladık.

#solOrtaAlan table td p.oley{background:url(../images/genel_resim.gif) 0 -483px no-repeat; width:93px; height:21px; margin:0}
    table td p.oley strong{display:block; background:url(../images/genel_resim.gif) 0 -459px no-repeat; text-indent:-9999px; height:21px}
    table td p.oley strong.birKupa{ width:18px;}
    table td p.oley strong.ikiKupa{ width:37px;}
    table td p.oley strong.ucKupa{ width:56px;}
    table td p.oley strong.dortKupa{ width:75px;}
    table td p.oley strong.besKupa{ width:95px;}

#solOrtaAlan table td p.oley tanımını niye p.oley şeklinde yapmıyoruzda bu kadar uzun yapıyoruz derseniz, üstten gelen kalıtsal tanımlar alt elemanları da etkiliyor bu etkiyi kaldırmak için bu şekilde tanımını uzatarak bu tanımı daha etkin yapıyoruz. Konu hakkında detaylı bilgi almak için tıklayınız.

Ana sayfadaki tablo ile yapının aynısı olduğu için bu kadar anlatarak tablo faslını geçiyorum ve sayfalama kısmının kodlamasını anlatmaya başlıyorum.

Sayfalama

Sayfalama kodlamalarını bir kaç tipi var ben burada daha önce kodladığım bir kodu kopyalıyorum. Bu yöntemi seçmemde programcı arkadaşım Mustafa’nın etkiside var.

<div class="sayfalama">
    <ul>
        <li><span>|&lt;</span></li>
        <li><span>Önceki</span></li>
        <li><span>1</span></li>
        <li><a href="#">2</a></li>
        <li ><a href="#">3</a></li>
        <li ><a href="#">4</a></li>
        <li ><a href="#">5</a></li>
        <li ><a href="#">6</a></li>
        <li ><a href="#">7</a></li>
        <li ><a href="#">8</a></li>
        <li ><a href="#">9</a></li>
        <li ><a href="#">10</a></li>
        <li ><a href="#">Sonraki</a></li>
        <li class="sayfalmaSonu"><a href="#">&gt;|</a></li>
    </ul>
</div>

Sayısız listeler ile listelediğimiz sayfa sayılarının farklı bölümlerini belirlemek için <li><span>1</span></li> şeklinde tanımlama yapıyoruz. Normal bağlantılarıda <li><a href="">2</a></li> şeklinde tanımlıyoruz. CSS kodunu yazalım.

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

İçerik Alanı Sağ

İçerik alanının sağ kısmı aslında pek bir şey içermiyor bir banner alanı ve kategori listesi. Her iki alanda ana sayfada mevcut olduğu için aynı kodları buraya taşıyoruz.

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

Sağ banner alanı diye ayrı bir isim vermemin nedeni, kodlaması aynı olsa da site yayına girdikten sonra ana sayfa ve alt sayfaya farklı bannerlar atanma ihtimali olduğu için buraya farklı bir isim veriyorum ve tanımlamamı yapıyorum.

Kategori Listeleme Alanı

Kategori listeleme alanı da ana sayfa ile birebir aynıdır. Kodu aynen taşıyorum. Bu tip modülleri kodlarken eğer esnek kodlar isek modül nereye konursa konsun sorun çıkarmaz. Site kodlamaya başlanmadan önce bu tip modülleri belirleyip sabit bir genişlik vermekten kaçınmalıyız. Burada genişlikleri aynı olduğu için sorun çıkarmazdı zaten ama farklı projeler için söylüyorum bunu, aklınızın bir kenarında bulunsun.

Tezahürat Ekle Sayfasının Kodlanması

Sayfamızı incelediğimizde sol içerik alanında bir tezahürat ekleme formunun diğer sayfadan farklı olduğunu görüyoruz.

Eskiden form alanlarını kodlarken tabloları kullanırdım daha rahat gelirdi. Ancak listeler(ul) ve tanımlayıcı listeleri(dl dd dt) kullanmaya başladıktan sonra artık tabloları kullanmıyorum.

Bu sayfadaki form yapıları iki kolonlu bir yapı olduğu için listeler ile sayfa form yapısını oluşturabiliriz. Başlık ve altındaki paragrafı ekliyoruz.

Tezahürat Ekle Formunun Kodlanması

Her satırın altında bir çizgi olduğu için her satırı bir katman içine alıp bu katmanada bir sınıf tanılayarak bu işi çözebiliriz.

.formAlani{border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; padding:10px; margin:10px 0; clear:left;}

clear:left; tanımı her satırın soldan başlaması için yapıldı.

İlk form alanı için bir label ve birde select alanımız var

<div class="formAlani"><label>Lig Seçiniz:</label><select><option>--------------</option><option>Turkcell Süper Lig</option></select></div>

CSS kodunu yazalım

.formAlani label{margin-right:10px; width:135px; display:block; float:left;}
.formAlani select{width:180px; font:12px Arial, Helvetica, sans-serif;}

Seçilen Ligdeki Takımlar Alanı

Bu alanı kodlarken sayısız listeleri kullandım. Listelere bir genişlik ve float tanımı yaparak yan yana dize bilirim. Genişlikleri verirken 3 tanesini yan yana duracak şekilde ayarladım.

<ul class="secilenLigler">
    <li> <input type="radio" name="takimSec" /><div class="logoTrabzon">Trabzon</div> <label>Trabzon Spor Klubü Tesisleri</label></li>
    <li> <input type="radio" name="takimSec" /><div class="logoFenerbahce">Fenerbahçe</div> <label>Fenerbahçe</label></li>
    <li> <input type="radio" name="takimSec" /><div class="logoAnkara">Ankaraspor</div> <label>Ankaraspor</label></li>
      .......
</ul>

CSS kodları

ul.secilenLigler{width:575px; margin:0 auto}
    ul.secilenLigler li{float:left; width:170px; margin:0 20px 10px 0; color:#828282;}
        ul.secilenLigler li div{float:left}
        ul.secilenLigler li label{position:relative; top:8px}
        ul.secilenLigler li input{float:left; position:relative; top:8px; margin-right:10px}

Her takım alanı için radyo butonu, logo için bir katman, takım adı için bir label tanımladım ve bunları yan yana dizmek için float:left tanımı kullandım. label ve input için kullandığım postion:relative tanımı ve top değerleri bu öğeleri diğer öğeler ile yatayda aynı hizaya getirmek içindir.

Yukarıda bahsettiğim gibi form alanlarını kodlarken sayısız listeleri(ul) kullanıyorum burada da

<div class="formAlani">
    <ul>
        <li><label>Kategori Seçiniz:</label><select><option>--------------</option><option>Turkcell Süper Lig</option></select></li>
        <li><label>Tezahüratın Adı:</label><input type="text" /></li>
        <li><label>Youtube linki:</label><input type="text" /></li>
        <li><label>Tezahüratın sözleri:</label></li>
        <li><textarea></textarea></li>
        <li><label>Kısa tanıtım:</label><input type="text" /></li>
        <li><label class="genisEtiket">Kayıtlı bir tezahüratınız varsa buradan yükleyiniz:</label> <input type="file" /></li>
    </ul>
</div>

CSS kodu

.formAlani p{margin-bottom:10px}
.formAlani label{margin-right:10px; width:135px; display:block; float:left;}
.formAlani label.genisEtiket{width:310px}
.formAlani textarea{width:625px; height:210px; border:1px solid #e8e8e8; margin-top:8px; font:12px Arial, Helvetica, sans-serif; padding:3px;}
	.formAlani ul li{margin-bottom:10px}
.formAlani input{border:1px solid #e8e8e8; font:12px Arial, Helvetica, sans-serif; padding:3px; width:300px}
.formAlani select{width:180px; font:12px Arial, Helvetica, sans-serif;}
.formAlani select.darSelect{width:75px;}

Son olarakta gönder düğmesini koyuyorum.

<input type="button" value="Gönder" class="gonderBut" />

CSS kodu

input.gonderBut{width:170px; height:45px; float:right; font:bold italic 24px Arial, Helvetica, sans-serif; color:#434343; cursor:pointer}

Böylece Tezahürat Ekle sayfamızı bitirmiş oluyoruz.

Tezahürat Dinle Sayfasının Kodlaması

Tezahürat dinle sayfası iki sekmeli bir yapıdan oluşuyor ve dinleme ve izleme seçenekleri iki ayrı sekme içinde yer alıyor.

Başlık ve açıklama kısmını kodluyoruz. Başlık ve ilk paragraf bir önceki sayfa ile aynı. Başlık yanındaki logo ve takım ismi kısmına biraz değinelim.

<div id="dinleTakimi"><div class="logoTrabzon">Trabzon</div> <span>Trabzon</span>

Logo için iki ayrı katman oluşturuyorum. Bunun nedeni logoların geneli için bir sınıf tanımlıyorum. Ayrıca ikinci katmanda her bir takım için tanımlanacak özellikler için. CSS kodunu yazarsak;

div#dinleTakimi{float:left; width:180px; margin-left:20px; position:relative; top:-4px}
    div#dinleTakimi div{float:left;}
    div#dinleTakimi span{ position:relative; bottom:-10px; font:14px Arial, Helvetica, sans-serif; color:#828282; padding-left:6px}

Burada şöyle bir şey var. Başlığın uzunluğu belli olmadığı için sadece logo ve takım adına float tanımı ve genişlik tanımı yaptık. Böylece başlık uzunluğu ne olursa olsun başlık ve logo kısmı devamlı yan yana duracaktır.

Sekmeleri kodlarken daha önce yazdığım jquery ile sekme yapımını anlattığım makaledeki gibi yapacağız.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $('div.sekmeAlani ul#tezahuratSekme li a').not("div.sekmeAlani ul#tezahuratSekme li#favEkle a, div.sekmeAlani ul#tezahuratSekme li.pasif a").click(function(){
 $(this).parent('li').addClass('normal').siblings().removeClass('normal');
 var mevcutSinif = this.className.slice(0,2);
 $('div.sekmeAlani > div').hide().filter('div.'+mevcutSinif).show();
 });
 $('.sekmeAlani ul#tezahuratSekme li a:first').click();
 });
 </script>

Buradaki tek fark favoriler kısmını sekmeli yapının dışında tutmak için. jquery’nin :not() fonksiyonunu kullandık. Bu fonksiyonun anlamı bu elementlere uygula not fonksiyonu ile belirtilen elemana uygulamadır.

<div class="sekmeAlani">
    <ul id="tezahuratSekme" class="kapsayamamaSorunu">
        <li class="s1 normal"><a href="javascript:void(0);" class="s1 dinle">Tezahürat Dinle</a></li>
        <li class="s2 pasif"><a href="javascript:void(0);" class="s2 izle">Tezahürat İzle</a></li>
        <li id="favEkle"><a href="javascript:void(0);" id="favorimedenCikar">Favorilerine Ekle</a></li>
    </ul>
    <div class="s1">
    	<div id="sesOynatici"><img src="images/ses_oynatici.gif" width="333" height="50" alt="ses" /></div>
    </div>
    <div class="s2">
    	<div id="videoOynatici"><img src="images/video_player.gif" width="320" height="260" alt="video" /></div>
    </div>
</div>

CSS kodlarını yazarsak;

ul#tezahuratSekme{border-bottom:1px solid #ccc; padding-left:30px}
    ul#tezahuratSekme li{float:left; height:39px;}
        ul#tezahuratSekme li a{display:block; padding:15px 45px 0 50px; color:#000; font-size:14px}
        ul#tezahuratSekme li.normal{background:url(../images/normal_seme_ard.gif) 0 0 no-repeat; }
        ul#tezahuratSekme li.pasif{background:url(../images/sekme_pasif.gif) 0 0 no-repeat; }
	        ul#tezahuratSekme li.pasif a{ cursor:default;}
            ul#tezahuratSekme li.normal a.dinle{ background:url(../images/tez_din_ikon.gif) 15px -220px no-repeat; }
            ul#tezahuratSekme li.normal a.izle{ background:url(../images/tez_din_ikon.gif) 15px -270px no-repeat;}
		ul#tezahuratSekme li{background:url(../images/kapali_sekme.gif) 0 0 no-repeat;}
            ul#tezahuratSekme li a.dinle{ background:url(../images/tez_din_ikon.gif) 15px -220px no-repeat;}
            ul#tezahuratSekme li a.izle{ background:url(../images/tez_din_ikon.gif) 15px -268px no-repeat;}
		ul#tezahuratSekme li#favEkle{float:left; height:39px; background:none}
            ul#tezahuratSekme li#favEkle a{background:url(../images/tez_din_ikon.gif) 18px -318px no-repeat;}
            ul#tezahuratSekme li#favEkle a:hover{background:url(../images/tez_din_ikon.gif) 18px -419px no-repeat;}
            ul#tezahuratSekme li#favEkle a#favorimedenCikar, ul#tezahuratSekme li#favEkle a#favorimedenCikar:hover{background:url(../images/tez_din_ikon.gif) 18px -368px no-repeat;}

Tezahürat Bilgi Alanı

Tezahürat bilgi alanında; ekleyen, kaç kez dinlendiği veya izlendiği, paylaşım linki ve kaç kişinin oley çektiği bilgileri yan yana yer alıyor.

Bu alanı bir katman içine alıp ardalan rengini bu katman veriyoruz. İçine sol ve sağ kolonlar için iki katman oluşturup içerikleri buraya koyuyoruz. İçerikleride bir paragraf içinde kodluyoruz.

<div id="tezahuratBilgi" class="kapsayamamaSorunu">
    <div id="tezahuratBilgiSol">
        <p>Ekleyen: <a href="">Hasan</a> <span>27 Ağustos 2009'da Eklendi</span></p>
        <p>Link Paylaş: <input type="text" value="htpp:www..ewrwerwerwerewrra" /></p>
    </div>
    <div id="tezahuratBilgiSag">
        <p>123.288 kez dinlendi</p>
        <p><span>16.258 kişi Oley! çekti!</span> <ul class='oleyCek'><li class='mevcutOy' style="width:54px">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></p>
    </div>
</div>

CSS koduda şöyle olacak;

#tezahuratBilgi{margin:1px 0; background-color:#eee; padding:13px 10px 0 10px}
    #tezahuratBilgiSol{float:left; width:390px}
        #tezahuratBilgiSol a{ color:#0c2b90}
        #tezahuratBilgiSol p{margin-bottom:10px}
        #tezahuratBilgiSol input{border:1px solid #cbcbcb; font:14px Arial, Helvetica, sans-serif; color:#cccccc; width:200px}
    #tezahuratBilgiSag{float:left; width:240px}
        #tezahuratBilgiSag p{margin:0 0 15px 0}
	        #tezahuratBilgiSag p span{float:left;}

Etiketler, Önce Söyle, Sonra Yorumla vb. başlıkların ikonlarını sprite tekniği ile resimlerini hazırlayıp başlıkların başına ardalan resmi ile koyuyoruz.

Etiketler için padding ve ardalan rengi tanımlıyoruz. hover hallerini hazırlıyoruz.

div#etiketler a{padding:2px 4px; background-color:#eee; color:#666; font-size:14px}
div#etiketler a:hover{background-color:#666; color:#eee;}

Önce Söyle

Önce söyle başlığınıda diğer başlıklar gibi hazırlıyoruz. İçeriği blockquote içine koydum. Aslında bunun için de bir katman açıp koyabilirdik, tercih meselesi. Ardalan resmini sağ alta sabitliyoruz.

blockquote.tezahuratMetni{ background:#eee url(../images/tezahurat_zem.gif) right bottom no-repeat; padding:20px 50px 20px 30px; margin-bottom:1px; font-style:italic}

Yorum Alanı

Yorum alanın solda avatar’ın(küçük resim) ve sağda alt alta içeriklerin bulunduğu iki kolonlu bir yapıya sahip .

float ve genişlik tanımlarını yaparak öğeleri yerleştiriyoruz. Burada farklı durumda olan kısım yorum oylama kısmıdır. Yorum oylama kısmını ayrı bir katman içine alıp yorum yazanın yanında durması için position:relative ve float:left tanımı ile ile ayırıyoruz. Artı, eksi ve puan kısmını bir liste şeklinde kodluyoruz.

Son olarakta "Sende Yaz" kısmını kodluyoruz. Başlığı yukarıdaki başlıklar gibi yazıyoruz. Yorum yazma kısmına bir textarea yapıp genişlik, yükseklik ve kenar çizgisi tanımlarını yapıyoruz.

div.yorumalani{border-bottom:1px solid #e0e0e0; margin-bottom:12px}
div.yAvatar{float:left; width:60px}
div.yorumAlaniSag{float:left; width:590px}
div.yorumAlaniSag strong{color:#a1a1a1; display:block; clear:left; margin:10px 0 5px 0}
#solOrtaAlan div.yorumAlaniSag p{margin-bottom:10px}
div.yorumYazari{float:left; font-weight:bold;}
div.yorumYazari a{color:#2a459d}
div.comment-rate{float:left; width:75px; margin-left:20px; position:relative;}
div.comment-rate-num{float: left; padding-right: 5px; color:#088f02; font-weight:bold;}

ul.yorumOyla{float:left; width:75px; margin-left:20px; position:relative; top:-5px;}
    ul.yorumOyla li{float:left;}
        li.yorumArti a{ background:url(../images/genel_resim.gif) -15px -530px no-repeat; display:block; text-indent:-9999px; width:16px; height:20px}
        li.yorumEksi a{ background:url(../images/genel_resim.gif) 0 -530px no-repeat; display:block; text-indent:-9999px; width:16px; height:20px}
    li.olumlu{color:#088f02; font-weight:bold;}
    li.olumsuz{color:#c00; font-weight:bold;}
    li.notr{color:#000; font-weight:bold;}
h3.senYaz{background:url(../images/tez_din_ikon.gif) 0 -168px no-repeat; padding:15px 0 3px 32px}
#solOrtaAlan textarea{border:1px solid #e1e1e1; width:642px; margin-bottom:20px; height:100px}

Tezahürat Dinle/İzle sayfasınıda tamamlamış oluyoruz.

Site Genel Şablonu Sayfasının Kodlanması

Site kodlarken site içerisinde genelde bir şablon sayfası oluşturulur. Bu sayfa site içinde olabilmesi mümkün elemanların bulunduğu bir sayfadır. Tasarımcı bu sayfayı daha sonra eklenmesi durumunda hazırlayarak sitenin gelişmesi durumlarınıda düşünmüş olur. Böyle site yapısından kopmamış oluruz.

Fanatikmarşlar.com’un şablon sayfası biraz daha sade oldu. Normalde paragraflar, tablo yapısı, resimler, listeler, vb. yapıları içerir.

Fanatikmarşlar.com’un şablon sayfasına baktığımızda başlık, paragraf ve uyarı mesajları şeklinde oluşmaktadır.

#anaKapsul h1.hata{color:#e40000}
#anaKapsul h1.onay{color:#1f6600}

Bilgi kutusunu oluştururken yuvarlak kenarlı olduğu için, iki elamana ihtiyaç var. Bunun için kapsayıcı div ve içine paragrafa koyduk.

<div class="bilgiKutusu">
 <p><strong>Bu kullanıcı adı zaten alınmış, başka bir tane deneyin. </strong></p>
</div>

CSS Kodları

div.bilgiKutusu{ background:#2d2d2d url(../images/bilgi_kutusu.gif) 0 0 no-repeat; margin-bottom:20px; font:bold 14px Arial, Helvetica, sans-serif; color:#fff}
    div.bilgiKutusu p{background:url(../images/bilgi_kutusu.gif) -650px bottom no-repeat; padding:10px;}
	    div.bilgiKutusu p strong{color:#ffc000}

Alt sayfaların kodlamasını böylelikle bitirdik. Site kodlarken değişik tasarımlarda olsa genelde benzer yapılar olduğu için yaklaşık olarak kodlarımız bu şekilde olacaktır.

Sonuç

Site kodlarken kodlarımı Adobe Dreamweaver ile yazıyorum. Kodlamanın bir çok yerinde FireBug kullanıyorum, daha doğrusu firebug’ı kapatmıyorum. Ayrıca test amaçlı ietester programını kullandım. Daima ie6′da test ettim.

Site kodlarken bir çok yöntem kullanılabilir. Ben kodlarımı yazarken devamlı bu alanı kodlarken nasıl daha iyi kodlarım, ileriye yönelik değişikliklerde nasıl sorun yaşamam, arama motorları standartlarına nasıl uyarım düşüncesi ile kodluyorum. Yazdığım kodlara genellikle daha sonra baktığımda beğenmiyorum. Devamlı en iyi hedefleyince eski kodlarımı beğenmiyorum. Bence olması gereken bu çünkü sektör daima kendini yeniliyor ve yeni özellikler çıkıyor biz devamlı bunları takip edip yeni projelerimizde kullanmalıyız.

Çok uzun süredir tasarladığım ama ancak nasip olan bir işi bitirmenin sevinci ile bu makalemide bitiriyorum. Daha güzel makalelerde buluşmak dileğiyle kendinize iyi bakın.

İlgili Yazılar:

1. PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması II
2. PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması
3. CSS ile Web Sayfası Oluşturma III

Teftiş Et(Inpect Element) Teftiş Et kısmı geliştirilmiş. Artık daha sorunsuz çalışıyor. Quick Info bölümü ile seçilen elemanın bilgileri anında görülebiliyor. Ayrıca Image Map yakalama kısmı eklenmiş.

HTML Paneli: HTML düzenleme kısmı geliştirilmiş. Bir nesneye uygulanan tüm stil atamaları ve etkin stil atamaları artık iki ayrı sekme(Style ve Computed) halinde verilmiş. Sağdaki Layout kısmına position ve z-index değerlerinide gösteriyor artık. MathML ve SVG namespace desteği gelmiş.

CSS Paneli: Css panelde aktif elemanın  sözde-sınıflarının(pseudo) hepsi görünüyor ve bunları değiştirebiliyoruz. Bu özellik iyi olmuş, burada sorun yaşıyorduk açıkçası. 

Sistemden gelen özellikleri artık görebiliyoruz. Sadece okunabilir.

CSS kısayollarını göster ve gizle yapabiliyoruz.

Javascript Paneli: Gelişmiş inceleme-noktaları oluşturabilme özelliği eklenmiş. Bir çok panel artık inceleme-noktası oluşturabiliyoruz. Dondur işaretinin olduğu kısımlarda buraya kadar incele imkanı veriyor.

Net Paneli: Net panelindeki zamanlama hataları giderilmiş ve geliştirilmiş. Net panelin çalışma mantığı değiştirilmiş ve tam sonuçların alınması sağlanmış. Ayrıntılı bilgi için tıklayınız. 

Console ve Net panele Persist özelliği eklenmiş. Eski ile yeniyi karşılaştırma imkanı sağlıyor bu buton bize. Firefox önbelliğini pasifleştirme butonu eklenmiş. 

XHR inceleme noktası oluşturabiliyoruz.

Kolonları çıkarabiliyor ve ekleyebiliyoruz.

Gelen ve giden veriler araç ipuçu içinde gösteriliyor.

Araç Çubuğu ve Menüler: Arama kısmını geliştirilmiş. Küçük büyük harfe duyarlı arama yapabiliyoruz ve ileri doğru ve geriye doğru arama yapabiliyoruz. Kapama düğmesindeki “Off” yazısı kaldırılmış.

Sonuç

Sonuç olarak şunu söyleyebilirim; daha önceki sürümlerde yenilikler ile birlikte bazı sorunlarda beraberinde geliyordu bu sefer daha bir oturmuş gibi bu araç. Daha yapısal değişiklikler ve çözümler üretilmiş. Web geliştiricileri için olmazsa olmaz olan FireBug sorunları olsada bir numaralı yerini kimseye kaptırmıyor.

Kaynaklar

• http://getfirebug.com/wiki/index.php/Firebug_Release_Notes
• http://www.softwareishard.com/blog/
• http://lifehacker.com/5453025/firebug-15-updates-with-new-features-still-a-web-developers-dream
• http://hacks.mozilla.org/2010/01/firebug-1-5-a-closer-look/
• http://hacks.mozilla.org/2010/01/firebug-1-5-released/
• http://www.markwarner2008.com/firebug-1-5-updates-with-new-features-still-a-web-developers-dream-downloads/

İlgili Yazılar:

1. 09 Aralık Web’den Seçme Haberler
2. İnternet Tarayıcıları
3. 18 Ağustos 2008 web’den seçme haberler

Mozilla’nın en güzel yanlarında biriside bence bu. Belli aralıklarla çıkan sürümlerde bir çok sorunlar gideriliyor ve yeni özellikler ekleniyor. Bu İnternet kullanıcısına ve özellikle web sayfası geliştiricilerine çok büyük avantajlar sağlıyor. Eğer aynı yöntemi Microsoft’da uygulasa idi biz ie6 gibi bir garabet ile uğraşmıyor olacaktık. Belki bu kadar rekabet olmayacaktı ama bizde yenilikleri daha hızlı uygulayacaktık. Neyse yine ie6 ile uğraşmayalım.

Firefox 3.6 çıktı. Buradan indirebilirsiniz.

Gelelim yeniliklere;

• Dil Desteği: Bir çok dilde aynı anda çıktı, aralarında Türkçe’de var
• Personas: Daha önce kullandığımız Personas(yani tarayıcı çerçevesini tasarlama aracı) daha kolay kullanıma sunulmuş. Tek tık ile tarayıcı çerçevesini değiştirebiliyoruz. Ben bu konuda Mozilla’nın daha cüretkar davranarak css kodu ile tarayıcı çerçevesini değiştirme yönünde bir çalışması olduğunu okumuştum, ama hala geliştirme aşamasında galiba. Ne güzel olurdu tüm tarayıcı görünümünü değiştirmek. Tasarımcılara biraz daha iş çıkardı.
• Plugin Güncelleme: Daha etkin bir plugin güncelleme sistemi. Eski pluginlerin bir çok dezavantajını gören Firefox bu konuda daha güzel bir çözüm bulmuş ama ne kadar kullanılır bilemem.
• Gelişmiş Video Desteği: Videolara tam ekran desteği ve HTML5 ile gelen poster frames desteği gelmiş. Şimdilik genel projelerimiz için pek bir şey ifade etmiyor.
• Javascript Performansı: Javascript performansında hızlandırmaya gidilmiş. Ayrıntılı bilgi için tıklayınız.
• Form Tamamlama: Formlardaki bezer alanlar için Firefox geçmişindekiler ile eşleşiyor ise otomatik tamamlıyor.
• 3. Parti Yazılım Desteği: Yeni sürüm ile birlikte 3. parti yazılımcıların Firefox entegrasyonu daha kolay olacağı söyleniyor.
• WOFF Desteği: Daha önce font-face özelliğini anlatırken belirttiğim gibi WOFF font desteği geldi. Bu tip yazı tipi dosyları diğerlerinin yarısı kadar boyutları olduğunu belirterek bu kısmı kapatayım.
• CSS: Yeni CSS özellik desteği gelmiş.
  • Gradyen özelliği ilk olarak webkit geliştiricilerinin geliştirdiği bir özellikti, Firefox’da bu kervana katıldı, ama biz uygulayamıyacağız, çünkü ie desteklemiyor. İE’ye de javascript ile bir çözüm bularak kullanabiliriz. Doğrusal ve radyal granyen desteği geldi Firefox 3.6 ile. CSS web sitelerinin görselliğini tek başına ele alacak gibi.
  • Çoklu background desteği geldi. CSS3 ile gelen bu özellik bence Firefox için gecikmiş bir destek ile geldi. Gerçi ie desteklemediği için şimdilik duracağız. Bu özelliği kullanımı ile neler yapabileceğimizi düşünmek bile yeter. Ah ulan Microsoft.
  • Farklı medya tiplerinin desteği geldi. Ayrıntı için tıklayınız.
  • Background genişletme özelliği geldi, CSS3 ile birlikte gelen bu özellik, Firefox3.6 ile destekleniyor. Flash ile yapılan %100 genişlik ve yükseklikteki sitelerde ardalana konulan sayfa backgroundunu artık css ile yapabileceğiz, ama şimdi değil. Ah ulan Microsoft
  • pointer-events özelliği desteği gelmiş. Bu özelliği bende ilk defa görüyorum desem yalan olmaz. Buradaki örnek aydınlatıcı.
  • ve bunun haricinde irili ufaklı özellikler gelmiş ve sorunlar giderilmiş.
• HTML5 ve DOM Desteği: Yeni DOM ve HTML5 destekleri gelmiş. Drag&Drop API ve File API. Örnekleri görmek için videoyu izleyin.
• Hız: İlk kurulumdan sonra daha hızlı olduğunu söyleyebilirim, ancak bunu kullandıkça göreceğiz. FireBug1.5 ve Firefox3.6 performansının daha iyi olduğunu kesin. Mozilla’nın iddiasına göre %20′lik bir hızlanma varmış.
• Ortama Adapte Olmak: Yeni device API’si desteği ile artık desteği olan makinelerde Firefox duruma göre vazife çıkaracak ve görünümünü ayarlayacak. Nasıl olduğunu görmek için videoyu izleyin. Çoğunlukla Mac kullanıcılarının kullanacağı bir özellik gibi.

Birde yapımcılarından Mike Beltzner’dan dinleyelim

Kaynaklar

• http://www.mozilla.org/firefox/
• http://blog.mozilla.com/blog/2010/01/21/firefox-3-6-release/
• https://developer.mozilla.org/En/Firefox_3.6_for_developers
• http://hacks.mozilla.org/2010/01/firefox-3-6-is-here/
• http://lifehacker.com/5453782/firefox-36-officially-available-brings-speed-increases-one+click-themes-and-more
• http://download.cnet.com/8301-2007_4-10438907-12.html
• http://hacks.mozilla.org/2010/01/javascript-speedups-in-firefox-3-6/
• http://demos.hacks.mozilla.org/openweb/uploadingFiles/

İlgili Yazılar:

1. Firefox 3.1 Yenilikleri
2. İnternet Tarayıcıları
3. Firefox 3.5 çıktı

Bu ipucunu burada paylaşma ihtiyacı duydum.

Çözüm şöyle;

C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\CodeHints (Bu yol tam uymaya bilir farklı işletim sistemlerinde farklı yerlerde olabilir, ama bu yol size bir fikir verecektir)Klasörü içindeki CodeHints.xml xml dosyasında istemediğimiz etiketleri kaldırıyoruz.

Örneğin benim ilk kaldırdığım kod widows kodu. Bu kod için xml dosyasındaki aşağıdaki kodu silmek gerekiyor.

<menuitem label="widows" value="widows:" icon="shared/mm/images/hintMisc.gif" />

Bunun dışında xml dokümanındaki kullanmadığım ve bir daha kullanmayacağım css kodlarını sildim. Silerken dikkat edin bu dosya içinde sadece css kodları yok. Tüm otomatik tamamlama kodları bu xml dokümanı içinde

• azimuth
• caption-side
• counter-increment
• counter-reset
• cue
• cue-after
• cue-before
• direction
• elevation
• marker-offset
• marks
• orphans
• pause
• pause-after
• pause-before
• pitch
• pitch-range
• play-during
• richness
• speak
• speak-header
• speak-numeral
• speak-punctuation
• speech-rate
• stress
• unicode-bidi
• voice-family
• volume

Bunları sildim ve width ve white-space yerini değiştirdim.

Benim sonuç xml dosyamı burada paylaşıyorum. Eskisinin yedeğini almayı unutmayın.

CodeHints.xml dosyasını indirmek için tıklayınız.

Şenol’un hazırladığı

CodeHints.xml dosyasını indirmek için tıklayınız. (Şenol’un geliştridiği)

Yazının sonunda Şenol‘a tekrar teşekkürlerimi sunarım.

Kaynak

• http://ff.im/efoQ4

İlgili Yazılar:

1. Javascript kodlarımızı eski versiyon web tarayıcılarından gizlemek
2. Dreamweaver Tools for Google’¢ 1.0.0
3. En çok kullandığım CSS Hileleri(Hack)

]]> http://www.fatihhayrioglu.com/ipucu-dreamweaverda-kullanilmayan-ozellikleri-kaldirmak/feed/ 13 http://www.fatihhayrioglu.com/psdden-htmle-%e2%80%93-fanatikmarslar-com-sitesinin-kodlamasi-ii/ http://www.fatihhayrioglu.com/psdden-htmle-%e2%80%93-fanatikmarslar-com-sitesinin-kodlamasi-ii/#comments Tue, 05 Jan 2010 23:09:23 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1483

PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması III

PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması

CSS ile Kutu modeli, sorunları ve çözümleri

]]> Ana Sayfa Kodlaması

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.

İlgili Yazılar:

1. PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması III
2. PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması
3. CSS ile Kutu modeli, sorunları ve çözümleri

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.

İlgili Yazılar:

1. CSSMania’dan Dünya CSS Ödülleri
2. CSS3 Module: Paged Media
3. IE6′da CEE-EEE(peek-a-boo) Hatası

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.

İlgili Yazılar:

1. PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması II
2. PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması III
3. CSS ile Web Sayfası Oluşturma III

Bu seferki hataya menüde denk geldim. Menüme background-image ile bir ikon koydum, her şey güzel ama ie6 görmedi. Araştırdım ve sonuç ie sorunu çıktı tabiki. Sorunun tam tanımı şöyle; listeleri(ul, ol ve dl) kapsayan elemana eğer float ve position:relative tanımı yaptı iseniz, ie6 liste background özelliklerini(resim veya renk) görmüyor.

Bu durmu bir örnek ile gösterelim.

<!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>ie lsite ardalan sorunu</title>
<style>
#menuKapsul{
position:relative;
float:left;
}
ul li{
background:url(ikon.gif) 3px 9px no-repeat;
list-style:none;
padding-left:12px;
}
</style>
</head>
<body>
<div id="menuKapsul">
	<ul>
    	<li>Liste 1</li>
        <li>Liste 2</li>
        <li>Liste 3</li>
    </ul>
</div>
</body>
</html>

Yukarı görülen basit bir listenin ardalanına resim yerleştiriyoruz. Kapsayıcı elemanada position:relative; ve float:left; tanımları atanmış olsun. Aktif tarayıcıların tümünde sorunsuz çalışan kodumuz, ie6′da sorunlu görünecektir. Sorun liste ardalan resminin görünmemesidir. Sorunu çözerken bayağı bir cebelleşmiştim. Sonunda çözümü bulunca ve bu çözümde çok basit olunca sevineyim mi üzüleyim mi şaşırdım.

Çözüm ise çok basit. Ardalan resmi uyguladığımız liste öğesine postion:relative tanımı yapıyoruz ve bu kadar düzeliyor.

ul li{
	background:url(ikon.gif) 3px 9px no-repeat;
    list-style:none;
    padding-left:12px;
    position:relative
}

bu kadar bu kod bizim sorunlarımızı gideriyor.

Bir başka çözüm yoluda kapsayıcı bir eleman daha ekleyerek bu elemana farklı konumlandırma değeri atayıp çözebiliriz, ama bu pek mantıklı değil, fazladan kod eklememiz gerektiği için. En iyi position:relative ekleyip sonuca gitmek.

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

Bir ie6 sorununun daha üstesinden geldik bir başka ie6 sorunu ile daha karşınızda olana dek hoşça kalın.(Bu ie6 oldukça nasıl hoş kalacağız oda ayrı bir konu.)

• http://www.positioniseverything.net/explorer/ie-listbug.html
• http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=1&postId=481

İlgili Yazılar:

1. IE6′da CEE-EEE(peek-a-boo) Hatası
2. İE 6 iki CSS seçicisi Sorunu ve Çözümü
3. CSS Hata Ayıklama Yöntemleri

Sorunu başlıkta açıklayıcı bir şekilde anlattım sanırım. Biraz daha açarsam; css kodlarımızı yazarken çeşitli notlar alırız, örneğin sayfa yapısını oluşturan alanların isimleri(ustAlan), farklı tarayıcılar için yaptığımız düzeltmeler için tuttuğumuz notlar(kapsayamamaSorunu) vb.

CSS yorum satırları /* yorum */ işaretleri içinde yazıyoruz ve tarayıcılar bunları görmezden geliyor.

İnternet Explorer 6 eğer dosyanız UTF-8 ile kaydedilmemiş ise sorun çıkarıyor. Burada dosyayı utf-8 ve utf-8 BOM’suz kaydetmek arasında bir fark olmadı. Örnek dosyamı utf-8 ve utf-8 BOM’suz kaydettiğimde bu sorun düzeldi. Utf-8 ile kaydedince Türkçe karakterler bozuldu ancak tekrar yazıp kaydedince bir sorun olmadı.

<!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>Untitled Document</title>
<style type="text/css">
@import url("stil.css");
</style>
</head>
<body>
<p class="deneme1 deneme2">Fatih Hayrioğlu burada yorum yazmış sanane ie6, sen niye sorun yapıyorsun ki bu olayı.</p>
</body>
</html>

Bir paragraf yazı yazdık. Daha sonra

.deneme1{ font:12px Arial, Helvetica, sans-serif}
/*Türkçe katakter içermeyecek miş*/
.deneme2{ color:#f00}

Css dosyasının içine yukarıdaki kodları yazdım. CSS dosyasını eğer ANSI formatında kayıtlı ise ie6 css kodlarımı görmüyor.

Firefox ve diğer tarayıcılar ansi olmuş utf-8 olmuş fark etmiyor. Ama

İE6′da ise yukarıdaki gibi Türkçe karakter içeren yorum sonrasındaki sınıfı görmüyor. Daha sonra css dosyasını utf-8 olarak kaydedince sorun ortadan kalktı.

Eğer html ve css aynı karakter kodunda ise sorun olmuyor mesela ikiside iso-8859-9 ise sorun olmuyor. Ama ne zaman html utf-8 css iso-8859-9 olursa sorun oluyor.

Not: Karakter kodu değişiklikleri için NotePad++ kullandım.

İlgili Yazılar:

1. IE’da İkikat görülen Margin Problemi ve Çözümü
2. CSS Hata Ayıklama Yöntemleri
3. Firefox’un Negatif Değerli z-index Desteği

Eksi margin’li değerler bize görsel olarak avantaj sağlar, kodlamamıza yardımcı olur örneğin esnek yapılı sayfaları düzenlememizde ve bir elemanın çizgileri dışına taşırma işlemlerinde.

Eksi margin kullanımı bir hile değildir, CSS’in desteklediği normal bir değerdir.

Eksi margin bir çok yerde kullanıyoruz. Ancak biraz bilinçsiz kullanıyoruz. Ben burada çizgileri belirleyip ona göre hareket etmeyi düşündüm ve bu yazı ortaya çıktı. Eksi marginleri yakından tanıyalım.

Eksi Margin’i iki yerde uygularız.

• Sabit konumlandırılmış elemanlarda
• Float uygulanmış elemanlarda

1- Sabit Elemanlar ve Eksi Margin

1.1. Ard Arda Statik Elemanlar

Herhangi bir konumlandırma ataması yapılmayan tüm elemanlar sabit konumlandırılmıştır.

#kutu1 {
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9
}

#kutu2 {
    width: 200px;
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

<div id="kutu1"></div>
<div id="kutu2"></div>

Örnke kodu görmek için tıklayınız.

Normal akış içindeki iki kutu bir birini takip eder. Biz burada birinci kutuya eksi margin atarsak örneğin alttan -20px gibi.

Alttaki kutuyu kendi üzerine doğru 20px çekecektir.

#kutu1 {
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
    margin-bottom:-20px
}

#kutu2 {
    width: 200px;
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

Örnke kodu görmek için tıklayınız.

Eğer ikinci kutuya yukarıdan eksi margin verirsek

#kutu1 {
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}

#kutu2 {
    width: 200px;
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin-top:-20px
}

Örnke kodu görmek için tıklayınız.

Aynı görüntüyü alırız. Burada bu örneği vermemin amacı, eksi değer üst ve soldan verilirse eleman kendini yukarı veya sola çekecektir. Ancak elemana sağ ve alt eksi değeri verildiğinde kendi yerinden oynamazken ilişkili elemanı kendine doğru çekecektir. Yani üst/sol eksi değerlerde kendi hareket ederken, alt/sağ eksi değerlerde diğer elemanları kendine çekiyor.

1.2. Başlıklar ve içerikler Arasındaki mesafeyi Ayarlamak İçin Eksi Margin kullanmak

Başka bir örnek yapalım. Genelde sitelerin içeriklerini girerken başlık ve içerik şeklinde gireriz. Başlıklar için h1, h2, h3, h4, h5, h6 kullanırız. Bu bize arama motorları içinde avantaj sağlar. 

Normal bir içerik ve başlık kullanımına örnek verelim.

<p>Integer sagittis ... elementum. </p>
<h1>Donec id ultricies mi.</h1>
<p>Lorem ipsum ... eros.</p>

Görünüm aşağıdaki gibi olacaktır

Genel kullanımda başlık ile içerik arasındaki boşluk, başlık ile üst elemanlarda ile olandan daha azdır. Biz bunu sağlamak için h1′e margin-bottom:0 değeri versek de yeterli gelmez. Paragrafın(p) üst margin değeri aradaki mesafeyi açık gösterecektir. Bu durumu engellemek için başlıktan sonra gelen paragraflara bir sınıf atayıp bu paragrafların margin-top değerini düşürmeliyiz veya sıfırlamalıyız.

Bir başka çözüm yolu ise ki bu daha kolaydır ve genelde tercih edilir. Başlık etiketinin alt margin değerine eksi değer vererek paragraf yaklaştırılır. 

h1{
    margin-bottom:-20px
}

1.3. Statik elemanlarda bir başka durumda kutuların iç içe olma durumunda vardır.

#kutu1 {
    width:200px;
    height: 130px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -20px
}

<div id="kutu1">
    <div id="kutu2"></div>
</div>

İçteki kutuya sağdan ve soldan eksi değerler verdiğimizde dış kutunu genişliğini otomatik olarak alan içerideki kutu sağ ve soldan verilen eksi kenar dışı boşluk değerleri kadar dışa taşacaktır.

Örnke kodu görmek için tıklayınız.

Ancak burada farklı tarayıcılarda farklı sorunlarımız ortaya çıkacaktır. ie6 da her iki yana taşan kısımlar gözükmezken, ie7′de sadece sağ kısım görünmemektedir.

ie7′de yukarıdaki gibi görünüyor.

ie6′da ise yukarıdaki gibi görünmektedir.

Bu durumu düzeltmek için düzeltme kodu yazmalıyız. ie7 için min-height:0 tanımı yeterlidir.

#kutu1 {
    width:200px;
    height: 130px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -20px;
    min-height:0
}

ie6 için ise daha farklı bir kod yazmalıyız.

#kutu1 {
    width:200px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -20px;
}
* html #kutu2{
    position:relative;
    height:1px
}

Örnke kodu görmek için tıklayınız.

Bu kodlama sayesinde tüm tarayıcılarda aynı sonucu elde ederiz. Bu örnekten şu sonucuda çıkarabiliriz; genişliği verilmeyen elemanlarda eksi margin eleman genişliğini arttırır, bir bakıma padding görevi görür.

2- Eksi Margin ve Float

Float uygulanmış iki elemanı düşünelim.

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

<div id="kutu1">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id ultricies mi.
</div>
<div id="kutu2">
	Etiam vel arcu nisl. Sed pharetra gravida diam sed mattis.
</div>

Birinci kutuya sağ eksi margin verdiğimizde

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
    margin-right:-50px
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

Örnke kodu görmek için tıklayınız.

Birinci kutu ikinci kutuyu kendine doğru çekecektir. Birinci kutu genişliği ve konumunda herhangi bir değişiklik olmayacaktır.

Farklı durumlarda farklı sonuçlar çıkacaktır. Örneğin,

Birinci float:left ikinci kutu float:right değeri verdiğimizde iki kutu arasında herhangi bir eksi değer etki etmiyor.
Her ikisine float:right tanımladığımızda ise, soldan eksi margin değeri yukarıdaki etkiyi yapıyor.

Peki bu bilgi bizim ne işimize yaracak derseniz. http://www.alistapart.com/articles/negativemargins/ örnekteki gibi esnek yapılı bir sayfa planında sabit yapılı bir sağ veya sol alanlar oluşturmak istediğimizde yarar.

Örneğin %100 genişlikteki bir içerik alanımızı sağ yanına 200px lik bir sağ kolon eklemek istersek, yukarıdaki kodu devam ettirmemiz yeterli olacaktır.

#kutu1 {
    float:left;
    width: 100%;
    height: 100px;
    background-color:#e5ecf9;
    margin-right:-200px
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    background-color:#ffb4bf
}

<div id="kutu1">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id ultricies mi.</p>
</div>
<div id="kutu2">
	<p>Etiam vel arcu nisl. Sed pharetra gravida diam sed mattis.</p>
</div>

%100 içeriği sağ kolonun altında kalıyor. Bunu engellemek için içeriğindeki paragrafa sağ margin değeri atamalıyız.

#kutu1 p{
    margin-right:220px
}

Normalde 200px yeterli olacaktı ancak içerik ile sağ kolon arasına 20px lik bir mesafe koyarak birbirine yapışmasınıda engellemiş olduk.

Sağ ve sol kolon diye bir ayrım yapmak içinde soldaki kolonun ardalan rengini kaldırıp içindeki paragrafa vererek bu sorunu çözebiliriz.

#kutu1 {
    float:left;
    width: 100%;
    margin-right:-200px
}
#kutu1 p{
    margin:0 220px 0 0;
    height: 100px;
    background-color:#e5ecf9;
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    background-color:#ffb4bf
}

Örnke kodu görmek için tıklayınız.

Float uygulanmış iç içe elemanlara eksi margin uygulamak

Yukarıda yan yana elemanlardaki durumu gösterdik peki iç içe elemanlarda eksi margin kullanımda nasıl sonuçlar çıkacaktır.

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    float:right;
    width: 50px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
}

  <div id="kutu1">
  <div id="kutu2">Donec id ultricies mi.</div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

Örnke kodu görmek için tıklayınız.

Birinci kutu içerisinde sağa hizalanmış ikinci kutuyu sağa doğru birinci kutu dışarısına çıkararak bir çok uygulamada işimizie yaracaktır.

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    float:right;
    width: 80px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -50px 0 0
}
* html #kutu2{
    position:relative;
}

Örnke kodu görmek için tıklayınız.

Bir başka uygulama şeklide

Bir içerik ve başlığı normal şekilde normal akış içerisinde iken

#kutu1 {
    float:left;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
    padding:0 20px
}
#kutu1 h2{
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
}

<div id="kutu1">
    <h2>Donec id ultricies mi.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor vehicula nisl, et tincidunt sapien venenatis quis. .. felis.</p>
</div>

Örnke kodu görmek için tıklayınız.

Ancak buradaki başlığı kutu dışına alarak farklı bir görünüm elde edebiliriz.

#kutu1 h2{
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin-top:-20px
}

Örnke kodu görmek için tıklayınız.

ve tabi ie 6 için

* html #kutu1 h2{
	position:relative; height:1px
}

Eksi Margin Uygulamaları

• Konumlandırma(positioning) kullanılan elementlerin negatif margin ile ortalanması
• CSS ile gölge vermek

Ayrıca

Eksi margin Kullanarak çoklu kolon oluşturmak adlı güzel bir makale var.

Sonuç

Sonuç olarak eksi margin bir çok uygulamamızda kullanacağımız bir özellik. Genelde farklılıkları ile ön plana çıkan bir özelliktir. Ben burada eksi margin’i tanıttım ve genel bilinen uygulamalarını yaptım ve bir kaçına link verdim. Buradaki bilgiler ışığında daha bir çok uygulamamızda eksi margin’i kullanmaya devam edeceğiz.

Kaynaklar

• http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
• http://www.brunildo.org/test/NegMOutH.html
• http://csscreator.com/node/1703 (ie sorun düzeltme)
• http://www.communitymx.com/abstract.cfm?cid=B0029 (bilgi)
• http://www.alistapart.com/articles/negativemargins/ (Uygulama)
• http://www.search-this.com/2007/08/01/the-positive-side-of-negative-margins/ (ayrıntılı bilgi)
• http://www.bennadel.com/blog/1174-Negative-CSS-Margins-Are-Not-Cool.htm (karşı çıkış)
• http://haslayout.net/css/negmargin (hata bilgisi)
• http://csscreator.com/node/28664 (küçük bilgi)
• http://www.simplebits.com/notebook/2005/05/23/negative.html (negatif margin kullanılcak bir örnek)
• http://www.severnsolutions.co.uk/twblog/archive/2004/07/01/cssnegativemarginsalgebra (negatif margin ile sayfa yapısı oluşturma)
• http://haslayout.net/css/Negative-Margin-Bug (negatif margin sorunları)

İlgili Yazılar:

1. CSS İLE WEB SAYFASI OLUŞTURMA II
2. CSS ile Kutu modeli, sorunları ve çözümleri
3. CSS İle Web Sayfası Oluşturma