CSS için arşiv

Çok kolonlu yapılar ve çok kolonlu menüler

Mart 17th, 2010 • 7 yorum CSS, Javascript, Web Standartları, XHTML, jquery
Etiketler: , , , ,

Son zamanlarda bir çok yerde gözüme çarpan bir menü tipi var; iki kolonlu, üç kolonlu vb. menü tipleri. CSS ile en optimum şekilde bu menüyü nasıl yapabilirim diye araştırdım ve sizlerle paylaşmaya karar verdim. Konuyu inceledikçe çok kolonlu yapıların sadece menülerde değil site içeriklerinde de kullanabileceğimizi gördüm. İlk olarak yapının nasıl olduğunu göstereceğim, sonrada menüde nasıl kullanıldığını.

Web mecrası geliştikçe ihtiyaçlarımızda gelişiyor ve ihtiyaçlarımızı karşılayacak metotlar arıyoruz. Çok kolonlu yapılarda böyle bir metot aslında. Sitemizi kullanan insanlar genelde menü vb. erişim ve gezinti araçlarını kullanarak sitemizi dolaşırlar. Menü gibi gezinti araçları site yapısı düşünüldüğünde sayfamızın en önemli alanlarıdır. Bu alanları en iyi şekilde tasarlanması ve düşünülmesi sitemizi daha kullanışlı ve etkin hale getirecektir. 

Bu düşünceler ile bir çok web site geliştiricisi çeşitli yöntemler denedi ve denemeye devam ediyor. Kullanılabilirliği en üst düzeye çıkarmak için çeşitli metotlar üretilmektedir. Bence bunlardan en güzellerinden biridir çok kolonlu menüler.

Yatay ve dikey örneklerimiz olmasına karşın genelde yatay ve üst menüdeki örnekler daha kullanışlıdır. Kullanıcıya uzun menü alanlarına erişebilmek için kaydırma çubuğunu kullanırlar buda bizim için bir dezavantajdır. Çok kolonlu menüler bu gibi durumlardan bizi kurtarır. Sitemizi daha derli toplu gösterir.

Çok kolonlu menü örneklerini incelediğimizde belli başlı 2-3 yöntem ile oluşturulduğunu görürüz. Bunları aşağıda inceleyeceğiz. Projelerimizde çoklu menü kullanmaya karar verdiğimizde hangisi projemize uygun ise onu kullanacağız. 

Ayrıca javascript yardımı ile ve css3 yardımı ile de çoklu menü oluşturabiliriz bunlarıda göreceğiz.

Burada anlatacağımız metotlar sadece menülerde kullanılmaz, site içeriğindeki benzer yapılar içinde aynı metotlar kullanılabilir. 

1. Yol: float uygulanmış liste ögeleri

Bu yöntemde ul elemanına sabit bir genişlik verip, her bir li elemanına float ve sabit genişlik tanımı yaparak yan yana dizeriz. Çok kolonlu yapılarını oluşturmak için en basit metottur. 

Dezavantajı listelemek istediğimiz ögeleri yan yana dizer. Normalde istenen birinci kolonu bitirdikten sonra ikinci kolona geçmesidir.

<ul>
    <li>Birinci Oge</li>
    <li>İkinci Oge</li>
    <li>Üçüncü Öge</li>
    <li>Dördüncü Öge</li>
    <li>Beşinci Öge</li>
    <li>Altıncı Öge</li>
    <li>Yedinci Öge</li>
    <li>Sekizinci Öge</li>
    <li>Dokuzuncu Öge</li>
    <li>Onuncu Öge</li>
</ul>

CSS kodumuz

ul {
    width: 700px;
    list-style-type:none;
}
li {
    width:180px;
    margin:15px 0 0 0;
    padding:0 10px 0 0;
    line-height:15px;
    float:left;
}

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

700px tüm genişlik içindir her ögenin genişliğini 180px verip bide sağdan 10px padding değeri ile yan yana dizeriz. 

Örneği biraz daha geliştirip açılır menü haline getirelim. 

HTML Kodu;

<ul id="menu">
    <li><a href="">Tencere</a>
        <ul class="kapsul">
        <li><a href="">Birinci Oge</a></li>
        <li><a href="">İkinci Oge</a></li>
        ....
        <li><a href="">Onuncu Öge</a></li>
        </ul>
    </li>
    <li><a href="">Tava</a></li>
    <li><a href="">Çaydanlık</a></li>
    <li><a href="">Leğen</a>
        <ul class="kapsulSolda">
        <li><a href="">Birinci Oge</a></li>
        <li><a href="">İkinci Oge</a></li>
        .....
        <li><a href="">Onuncu Öge</a></li>
        </ul>
    </li>
</ul>

CSS kodu;(kodun uzun olduğuna bakmayın çoğu kod menü elemanlarını daha güzel görünmesini sağlamak için eklenmiştir.) Bunu menüye uygulayalım

ul{margin:0; padding:0; list-style:none}
    ul li{float:left; width:180px; border-top:3px solid #fff; position:relative}
    ul li:hover, ul li.over{border-top:3px solid #C30; background-color:#eee; width:180px;}
	    ul li a{ font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; display:block; padding:5px 5px 5px 10px; color:#0657ad; font-weight:bold}

İlk menü öğelerini oluşturduk.

ul li:hover ul, ul li.over ul{display:block;}

Burada virgülün ilk kısmı ie6 hariç olan kısmı için ie6 için ise aşağıdaki javascript kodunu yazacağız.

Tabi başımızın belası ie6 için menüyü açmak için javascript yardımı almamız gerekiyor. Çünkü ie6 linklerin haricinde :hover işleyişini uygulamıyor

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

Açılan menü kısmının tam kapsanması için kapsayamama kodu ekleyeceğiz.

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

Açılacak menü ul sinin tanımlarını yapıyoruz. 

ul li ul {width: 580px; list-style-type:none; display:none; border-bottom:3px solid #C30; background-color:#eee; padding:5px 0 10px 10px; position:absolute;}
    ul li li {width:180px; margin:5px 0 0 0; padding:0 10px 0 0; line-height:15px; float:left; border:0;}
    ul li li:hover{border:0}
        ul li li a{color:#0657ad; text-decoration:underline; padding:0; font-weight:normal}
        ul li li a:hover{color:#C30; text-decoration:none}
    ul li ul.kapsulSolda{right:0}

Kolonlama için yukarıdaki yöntemi uyguluyoruz.

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

2. metot: Margin yönlendirmeleri ile

Çok kolonlu yapıları oluşturmak için diğer bir yöntemde ikinci ve üçüncü kolonlara sağdan ve üstten margin değerleri vererek yapmaktır. Bu metodun avantajı kolon dizilişinin istediğimiz gibi olmasıdır. Bu metotta çoğaltacağımız kolonlara ek sınıflar eklemeliyiz. 

<ul>
    <li class="kolon1"><a href="#">Öğe 1</a></li>
    <li class="kolon1"><a href="#">Öğe 2</a></li>
    <li class="kolon1"><a href="#">Öğe 3</a></li>
    <li class="kolon1"><a href="#">Öğe 4</a></li>
    <li class="kolon1"><a href="#">Öğe 5</a></li>
    <li class="kolon2 sifirla"><a href="#">Öğe 6</a></li>
    <li class="kolon2"><a href="#">Öğe 7</a></li>
    <li class="kolon2"><a href="#">Öğe 8</a></li>
    <li class="kolon2"><a href="#">Öğe 9</a></li>
    <li class="kolon2"><a href="#">Öğe 10</a></li>
    <li class="kolon3 sifirla"><a href="#">Öğe 11</a></li>
    <li class="kolon3"><a href="#">Öğe 12</a></li>
    <li class="kolon3"><a href="#">Öğe 13</a></li>
    <li class="kolon3"><a href="#">Öğe 14</a></li>
    <li class="kolon3"><a href="#">Öğe 15</a></li>
    <li class="kolon3"><a href="#">Öğe 16</a></li>
</ul>

CSS kodumuzu yazalım

ul { margin: 0 0 1em 2em; padding: 0; }
    ul li { line-height: 1.2em; margin: 0; padding: 0; }
    * html ul li { position: relative; }
    ul li.kolon1 { margin-left: 0em; }
    ul li.kolon2 { margin-left: 10em; }
    ul li.kolon3 { margin-left: 20em; }
    li.sifirla { margin-top: -6em; }
        ul li a { display: block; width: 7em; text-decoration: none; }
        ul li a:hover { text-decoration:underline}

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

Yukarıdaki kodda ilk li tanımımız bir önceki metot ile neredeyse aynıdır. Tek farklı olan kısım position:relative tanımıdır, bu tanım ie’deki sorunları gidermek için eklenmiştir. Her kolonun soldan mesafesi margin-left değerleri tanımlanarak sağlanmıştır. İkinci ve üçüncü kolonları yukarı çekmek içinde menü yüksekliği kadar eksi margin değeri verilerek yukarı çekilmiştir.

Margin yönlendirmeleri ile menü oluşturmak pek mantıklı değildir. Esnek olmayan bu yöntem menü ekleme ve çıkarmalarında osurn çıkarır.

3. Metot: Kapsayıcı katman ile bölmek

Bu metotta çoklu kolonlara ayrılacak listeler kapsayıcı katmanlar ile ayrılarak her bir kolon oluşturulur. Bu metotta yükseklik ile ilgi bir şey yapmaya gerek yoktur ve esnek bir yapıya sahiptir. 

<div class="licol">
    <ol>
        <li>Let me not to the marriage of true minds</li>
        <li>Admit impediments; love is not love</li>
        <li>Which alters when it alteration finds</li>
        <li>Or bends with the remover to remove</li>
    </ol>
</div>
<div class="licol">
    <ol start="5">
        <li>Oh, no, it is an ever fixed mark</li>
        <li>That looks on tempests and is never shaken;</li>
        <li>It is the star to every wand'ring bark</li>
        <li>Whose worth's unknown, although his height be taken</li>
    </ol>
</div>
<div class="licol">
    <ol start="9">
        <li>Love's not Time's fool, though rosy lips and cheeks</li>
        <li>Within his bending sickle's compass come;</li>
        <li>Love alters not with his brief hours and weeks</li>
        <li>But bears it out even to the edge of Doom</li>
    </ol>
</div>

CSS kodumuzda kısadır.

li {
    margin:15px 0 0 0;
    padding:0 10px 0 0;
    line-height:15px;
}
.licol {
    float: left;
    width: 200px;
}

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

Diğer metotlara göre avantajlı görünen bu metodun da kendince sorunları vardır. Menü yaparken kapsayıcı bir katman(div) atayıp bu katman içinde ul’leri float ve genişlik vererek yan yana koyarız.

<ul id="menu">
    <li>
        <a href="">Tencere</a>
            <div class="ucluKolon">
              <ul>
                <li><a href="">Let me not to the marriage of true minds</a></li>
                ...
              </ul>
              <ul>
                <li><a href="">Oh, no, it is an ever fixed mark</a></li>
                ...
              </ul>
              <ul>
                <li><a href="">Love's not Time's fool, though rosy lips and cheeks</a></li>
                ...
              </ul>
            </div>
    </li>
....
</ul>

İlk menü kısmını ilk yaptığımız ile aynı kodlara sahip olacaktır.

ul{margin:0; padding:0; list-style:none}
    ul li{float:left; width:180px; border-top:3px solid #fff; position:relative}
    ul li:hover,  ul li.over{border-top:3px solid #C30; background-color:#eee; width:180px;}
        ul li a{ font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; display:block; padding:5px 5px 5px 10px; color:#0657ad; font-weight:bold}

Daha sonra kapsayıcı katman tanımlarını yapıyoruz. Tabi öncesine kapsayamama sorunu kodunu ekleyerek. Kapsayamama sorunu kodlarını başa ekliyoruz çünkü bu kısmı sayfa normal gösteriminde gizlememiz gerekiyor.

    div.ucluKolon:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    div.ucluKolon {display: inline-block;}
    /*IE-mac de bu bolumu sakla \ */
    * html div.ucluKolon {height: 1%;}
    div.ucluKolon{display: block;}
    /* IE-mac bu bolumu saklam artik */
div.ucluKolon{width:600px; display:none; border-bottom:3px solid #C30; background-color:#eee; padding:5px 0 10px 10px; position:absolute}

Üst menüde en sağdaki menü elemanının altında açılan menü sağ doğru değilde sola doğru açılacak, bunun için 

.sagda{right:0}

Üç kolonlu yapıyı oluşturmak için katman içindeki ul’lere genişlik ve float tanımı yapıyoruz.

div.ucluKolon ul{float:left; width:200px}

üst menülerin üzerine gelince açılması için 

ul li:hover div.ucluKolon, ul li.over div.ucluKolon{display:block}

ie6 için javascript kodumuzu yazıyoruz. Yukarıdaki kodun aynısı.

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

4. CSS 3 column-count özelliği ile

CSS3 ile birlikte gelen yeni bir özellik sayesinde işler çok kolaylaştırıyor. 

<ul id="menu">
    <li>Birinci Oge</li>
    <li>İkinci Oge</li>
    <li>Üçüncü Öge</li>
    <li>Dördüncü Öge</li>
    <li>Beşinci Öge</li>
    <li>Altıncı Öge</li>
    <li>Yedinci Öge</li>
    <li>Sekizinci Öge</li>
    <li>Dokuzuncu Öge</li>
    <li>Onuncu Öge</li>
</ul>

CSS kodumuz ise iki satır

ul#menu{
    width:700px;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

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

Farklı tarayıcılar için yazılan bu kod maalesef ie ve opera’nın desteği olmadığı için uygulaması şimdilik yok.

5. Metot: Javascript yardımı ile

Aslında bu yöntem bir önceki metodun tamamlayıcı bir metodudur.

Bu metotta css3 column-count özelliği ile yine css ile kodu yazacağız, javascript ile de desteklemeyen tarayıcılara uyumlu hale getireceğiz.

Bu javascript kodunu csscripting.com sitende yayınlanmış, ancak bu site yayında değil cvwdesign.com sitesinde kodu buldum. Açıkça söylemek gerekirse bunun dışında çalışan javascript kodu bulamadım. 

Bu kodu kullanırken css kodunuzu harici kullanmalıyız aksi halde kod çalışmıyor. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Çoklu kolon</title>
<link href="kolon.css" rel="stylesheet" />
<!--[if IE]><script type="text/javascript" src="css3-multi-column.js"></script><![endif]-->
</head>
<body>
    <ul class="column">
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
    </ul>
</body>
</html>

Bu javascript dosyasını ekleyince css3 aşağıdaki özelliklere karşılık gelen özellikleri

  • column-count 
  • column-width 
  • column-gap
  • column-rule

destekliyor. Mevcut açık kodun boyutu fazla gelince çevrimiçi yui kompresor ile javascript dosyasını sıkıştırdım. Gayet güzel bir oran ile dosya boyutunu 37 kb’dan 19 kb’a kadar düşürdüm.

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

jQuery yardımı ile çeşitli çözümler mevcuttur. kaynaklar bölümünde yazdım linklerini.

Kaynaklar

Küçük bir ipucu: FireBug ile satır numarası bilgisi

Mart 11th, 2010 • 3 yorum CSS
Etiketler: , , , , ,

Bazen kullandığım programların alternatiflerini araştırıyorum. Amacım eğer daha güzel ve daha kullanışlı özellikleri varsa onlardan yararlanmak.

Opera 10.50 çıkınca bir inceleyeyim dedim. Gayet hoş, güzel, hızlı. Birde beni Firefox’a bağlayan en büyük etken olan FireBug’ın Opera’daki alternatifi DragonFly’ı inceleyeyim dedim.

DragonFly ilk çıktığından buyana bayağı bir yol kat etmiş açıkçası. Aslında FireBug’ı taklitten başka bir şey değil ama olsun oda bir marifet. Microsoft gibi bir firma bile beceremediğine göre büyük bir şey olsa gerek.

DragonFly gerçekten güzel. FireBug’a alternatif bir kaç görsel güzellikleri var.

Gelelim küçük ipucumu yazmama neden olan kısıma. FireBug’da beni cezbeden şey, ayrıntılarında bir çok avantajın gizli olması. Bunlardan biri seçtiğimiz elemanı etkilyen tanımların hangi doküman içinde yer aldığını göstermesi ve hangi satırda olduğunu belirtmesi. Belki küçük bir ayrıntı ama benim çok işime yarıyor. Hemde çok.

4-5 ay önce ben css kodlarımı her tanım bir satıra gelecek şekilde yazıyordum. Sebebi çok açık kodların okunabilirliği artıyordu böylece. Sonra fark ettim ki ben kodları okumuyorum artık FireBug ile yakalıyorum ve satır numarasından ilgili dokümanı açıp müdahele ediyorum. Bununda etkisi ile her satırda bir tanım yerine her satırda bir seçici şeklinde css dosyalarımı yazmaya başladım ve bu bana çok büyük bir yer kazandırdı.

Evet bazı küçük özellikleri fark etmesekde bize çok büyük faydalar sağlayabiliyor.

Sağol FireBug. Sen olmasan bu iş gerçekten zor olurdu.

Süper bir özellik display:inline-block

Şubat 28th, 2010 • 3 yorum CSS, XHTML
Etiketler: , , , ,

Alışkanlıklar kolay kolay bırakılmıyor. Zamanında display:inline-block özelliğini Firefox desteklemediği(Firefox desteği 3. sürümden itibaren geldi) için kullanmıyordum. Hala orada kalmışım hiç kullanmıyorum bu özelliği, şimdi bir projede gerekti ve kullandım. Çok hoşuma gitti. Tekrar bir hatırlayalım display:inline-block özelliği hibrit bir özelliktir. Bir yanı satır içi davranırken bir yanı blok davranır.

display:inline-block tanımı yapılmış elemanlar satır için akış içinde satır içi eleman gibi davranırken, elemente genişlik, yükseklik ve dikey margin değerleri tanımlanırsa satır içinde blok-level özelliğine bürünür.

display:inline-block elementler çevresindeki elementlere ve satır içi kutu içeriklerine göre farklı davranışlar gösterir.

Durumu daha iyi anlamak için genel bir örnek yapalım. 3 paraftan oluşan bir içeriğimiz olsun ve bu içerikteki belli bir kısmı paragraf etiketi içine alalım ve bunlara sırası ile display:block, display:inline ve display:inline-block tanımları atayalım

<div id="denemeBir"> Lorem ipsum dolor sit amet... <p>Praesent id nunc eros. Integer mauris orci, venenatis ac tempor ut, gravida ac diam. </p> Pellentesque...</div>
<div id="denemeIki">Quisque at venenatis nulla...<p>Nam fermentum porttitor hendrerit.</p> Mauris ante nulla..</div>
<div id="denemeUc"> Sed urna neque...<p>Sed est lacus, laoreet at malesuada quis, convallis ut nibh.</p> Sed dapibus...</div>

CSS kodu

div {margin: 10px 0; border: 1px solid #000;}
p {border: 1px dotted #000;}
    div#denemeBir p {display: block; width: 50px; text-align: center; background-color:#FF0}
    div#denemeIki p {display: inline; width: 50px; text-align: center; background-color:#0FF}
    div#denemeUc p {display: inline-block; width: 50px; text-align: center; background-color:#F0F}

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

Aynı yapıdaki elemanların display özelliğine sırası ile block, inline ve inline-block tanımlarını atadık.

display:block uygulanan paragraf kendisine atanan width, text-align:center özelliğini yorumlamış ve blok-level bir element olarak sonrasına bir boşluk bırakmıştır.

display:inline tanımı yapılmış paragraf kendisine atanan width, text-align:center tanımlarını görmemiştir.

display:inline-block uygulanmış paragraf ise kendisine uygulanan width ve text-align:center tanımlarını görmüş ama bir blok-level element gibi sonrasına bir boşluk bırakmamıştır. Tam bir hibrit özellik göstermiştir.

display:inline-block tanımını daha iyi anlamak için nerelerde kullanırız neler yapabiliriz buna bakalım.

Float kullanmadan display:inline-block ile elemanları yan yana dizmek

<div id="menu">
<a href="">Ana Sayfa</a>
 <a href="">Ürünler</a>
<a href="">İletişim</a>
</div>

CSS kodumuzu yazalım;

#menu a{
  width:150px;
  height:50px;
  display: inline-block;
  margin:0;
  padding:5px;
  color: #1B1B1B;
  background-color: #E2E2E2;
  text-decoration: none;
  border-top:5px solid #999
}

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

Bu kod ile biz öğeleri yan yana dizeriz. Normalde hiç bir tanım yapmasak da bu elemanlar yan yana dizilecekti, ancak bu elemanlar arasındaki mesafeyi ayarlıyamıyacaktık. Hem satır içi eleman gibi yan yana dursun hemde genişlik, yükseklik ve margin tanımlarını uygulayalım istersek display:inline-block tanımı yapmalıyız.

Dikeyde ortalama

Float uygulanmış elemanların dikeyde ortalamak çok zordur, aksine display:inline-block uyguladığımız elemanları sadece vertical-align özelliği kullanarak dikey ortalama yaparız.

Bir örnek yapalım. Yan yana dizilmiş üç kutu hazırlayalım ve bunları kapsayıcı katmana göre dikey olarak üstte, ortada ve altta hizalayalım.

<div class="anaKapsul">
    <div class="solKutu">Sol</div>
    <div class="ortaKutu">Orta</div>
    <div class="sagKutu">Sağ</div>
</div>

CSS kodumuzu yazalım.

.anaKapsul { border: 1px gray solid; padding: 5px; text-align: center; }
    .solKutu { display: inline-block; background-color: lightblue; vertical-align: middle; width: 200px; height: 200px; }
    .ortaKutu { display: inline-block; background-color: yellow; vertical-align: middle; width: 200px; height: 150px; }
    .sagKutu { display: inline-block; background-color: gray; vertical-align: bottom; width: 200px; height: 100px; }

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

Firefox, Safari, Google Chrome, Opera ve İE8′de bu görüntüyü elde ederiz. Ancak ie7 ve ie6′da durum böyle değildir.

Bu tarayıcılarda aynı sonucu elde etmek için bu tarayıcılar için bu elemnalara display:inline ve zoom:1 tanımı yapmalıyız. Bunun için tüm tarayıcılar için düzeltmeler kısmındaki kodlardan yararlanacağım.

*:first-child+html div.anaKapsul div{display:inline; zoom: 1;}
* html div.anaKapsul div{display:inline; zoom: 1;}

Bu kodları ekledikten sonra sorunumuz düzeldi.

Kaynaklar

IE8 Açılır Menü İçindeki Input Alanı Üzerince Gelince Menü Kapanma Sorunu

Şubat 26th, 2010 • CSS, XHTML, jquery
Etiketler: , , ,

Sorun tam olarak şu; açılır bir menü eğer bir resim üzerinde ise menü içindeki input alanı üzerine gelince menü istem dışı olarak kapanıyor. Diğer hiç bir tarayıcıda sorun yokken ie8 bu durumda sorun oluşturuyor.

İnternet Explorer’ın sorunlarına alışmış bu bünye Microsoft’un bu yeni nesil eskimiş tarayıcısından böyle bir sorun olmasını yadırgamadı açıkçası. Soruna ie7 gibi yorumlama kodunu ekleyerek çözmek istedim ama kod sitenin dinamik kısımlarında çalışırken statik kısımlarında çalışmadı.

Bu iş ile bir projede karşılaştım, proje ismini açıklamak sakıncalı olabilir diye ben size benzer bir örnek kodunu vereceğim. 

<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
	$('a').hover(function(){
		$(this).children(':last').show();
	},
	function(){
		$(this).children(':last').hide();
	});
 });
</script>
<style type="text/css">
a{ position:relative;}
	a div{display:none; padding:20px; background-color:#999; width:250px; position:absolute; top:18px; left:0}
		a div input{ background:transparent}
</style>
</head>

<body>
<a href="javascript:;">menu aç
<div><input type="text" /></div>
</a>
<p><img src="http://www.fatihhayrioglu.com/wp-content/ie7_kaydirma_cubugu.jpg" width="450" height="398" /></p>
</body>
</html>

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

Bende sorunu araştırmaya başladım ve sonunda buldum. Sorun input‘a atanan background:none veya background:transparent tanımlamalarından kaynaklanıyor. backgorund’a renk veya resim tanımı yapınca sorun çözülüyor.  

Ben tasarıma uymak için background’a resim tanımlayarak sorunu aştım.

Kaynak

İnternet Explorer’da sağdaki sabit kaydırma çubuğunu kaldırmak

Şubat 11th, 2010 • 6 yorum CSS
Etiketler: , , , , ,

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

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

Şubat 9th, 2010 • 10 yorum CSS, Javascript, Web Standartları, XHTML
Etiketler: , , , , , , , ,

Alt Sayfaların Kodlanması

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.

Marşlar

Tezahürat Ekle

Tezahürat İzle Dinle

Genel Şablon

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ı

Marşlar

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ı

Tezahürat Ekle

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 İzle Dinle

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ı

Genel Şablon

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.

Projede yer alan tüm dosyaları sıkıştırıp attım. Tüm dosyaları indirmek için tıklayınız.

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.