ile

Ürünler sayfamızı oluşturalım

Bir önceki yazıda anasayfamızı tamamlamış, bölümlerimizi oluşturmaya başlayacağımızı söylemiştik. İlk olarak ürünler bölümüyle başlayacağız.

Ürünler sayfamızda birden çok kategori içinde, birden fazla ürünü aynı anda görmemiz gerekiyor. Bunun için kategoriler arasında gezinmemizi sağlayan bir bağlantılar listesine ihtiyacımız var ilk olarak.


<div class="span3 yanliste">
    <ul class="nav nav-list">
        <li>Kategoriler</li>
        <hr>
        <li><a href="ajanda.html">Ajandalar</a></li>
        <li><a href="poster.html">Posterler</a></li>
        <li><a href="davetiye.html">Davetiyeler</a></li>
        <li><a href="elilani.html">El ilanları</a></li>
    </ul>
</div>

hr etiketi gözünüze çarptıysa o etiketler arasında çizgi çekebilmemizi sağlayan etiket. Tabii listemizin güzel de görünmesini istiyoruz. Bunun için custom.css’in sonuna şöyle bir kod daha ekleyelim:


.yanliste
{
    background-color: #f5f5f1;
    margin-bottom: 10px;
    padding: 14px 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

Burada yanliste class özelliğine sahip olan etiketlerin önce arkaplan rengini ayarladık. Alt taraftan 10 piksel boşluk bıraktık. Kutumuzu sağ taraftan 14 piksel sağa kaydırdık ki sayfanın kenarına yapışmasın. Son olarak da kutumuzun kenarlarını 5 piksel çağında yuvarlattık.

Bu şekilde yan listemiş şöyle bir görünüme kavuştu:

Gayet güzel ve modern.

Birden çok ürünü bir arada görmemiz gerekiyor. Bunun için önce ürünlerin ana resimlerinin küçük hallerini bir arada tutacak bir listeye ihtiyacımız var.

Kategori sayfasında görünecek her bir ürün için ihtiyacımız olan bilgilere bir göz atalım.

  1. Her ürünün küçük bir resmi
  2. Ürünün adı
  3. Ürünün fiyatı
  4. Ürünle ilgili ek bilgi (Opsiyonel, bu gittigidiyor’da teslim günü olmuş, sahibinden de ise indirim miktarı olmuş. Şimdilik buna gerek yok.)

Her ürün satırında 4 tane ürün göstermek en iyisi. Her ürünün küçük resmi 170’e 135 piksel boyunda olsun. Şimdi kodumuzu yazmaya başlayalım.


<a class="urun-resmi" href="kahveajanda.html" class="baslik" title="Kahverengi Klasik Ajanda">
    <img src="img/kahveajanda.jpg" alt="Kahverengi Klasik Ajanda" />
</a>
<div class="urun-detay">
    <div class="urun-baslik">
        <a href="kahveajanda.html" class="baslik" title="Kahverengi Klasik Ajanda">Kahverengi Klasik Ajanda</a>
    </div>
    <div class="urun-fiyati">
        <span class="fiyat">16.50</span> 
        <span class="doviz-kodu">TL</span>
    </div>
</div>

Tek bir ürün için kodumuz bu şekilde.

Ama birden fazla ürünümüz olacak, hatta bir sayfada yüzlerce ürün bile göstermemiz gerekebilir. Bunları peki nasıl sıralarsak daha iyi olur? Bu konuda uygulanan tekniklerden bir tanesi bunları teker teker bir listenin elemanı haline getirmek.


<ul class="urun-listesi">
    <li class="urun">Ürün 1</li>
    <li class="urun">Ürün 2</li>
    <li class="urun">Ürün 3</li>
    <li class="urun">Ürün 4</li>
    <li class="urun">Ürün 5</li>
</ul>

Yukarıdaki ürünleri bu listenin elemanları olarak yerleştireceğiz. Yapalım:


<h5>Ajandalar</h5>
<ul class="urunlistesi">
    <li class="urun">
        <a class="urun-resmi" href="kahveajanda.html" class="baslik" title="Kahverengi Klasik Ajanda">
            <img src="img/kahveajanda.jpg" alt="Kahverengi Klasik Ajanda" />
        </a>
        <div class="urun-detay">
            <div class="urun-baslik">
                <a href="kahveajanda.html" class="baslik" title="Kahverengi Klasik Ajanda">Kahverengi Klasik Ajanda</a>
            </div>
            <div class="urun-fiyati">
                <span class="fiyat">16.50</span> 
                <span class="doviz-kodu">TL</span>
            </div>
        </div>
    </li>
    <li class="urun">
        <a class="urun-resmi" href="siyahajanda.html" class="baslik" title="Siyah Modern Ajanda">
            <img src="img/siyahajanda.jpg" alt="Siyah Modern Ajanda" />
        </a>
        <div class="urun-detay">
            <div class="urun-baslik">
                <a href="siyahajanda.html" class="baslik" title="Siyah Modern Ajanda">Siyah Modern Ajanda</a>
            </div>
            <div class="urun-fiyati">
                <span class="fiyat">15</span> 
                <span class="doviz-kodu">TL</span>
            </div>
        </div>
    </li>
    <li class="urun">
        <a class="urun-resmi" href="deriajanda.html" class="baslik" title="Deri Lüks Ajanda">
            <img src="img/deriajanda.jpg" alt="Deri Lüks Ajanda" />
        </a>
        <div class="urun-detay">
            <div class="urun-baslik">
                <a href="deriajanda.html" class="baslik" title="Deri Lüks Ajanda">Deri Lüks Ajanda</a>
            </div>
            <div class="urun-fiyati">
                <span class="fiyat">19</span> 
                <span class="doviz-kodu">TL</span>
            </div>
        </div>
    </li>
    <li class="urun">
        <a class="urun-resmi" href="kalemliajanda.html" class="baslik" title="Kalemli Çok Amaçlı Ajanda">
            <img src="img/kalemliajanda.jpg" alt="Kalemli Çok Amaçlı Ajanda" />
        </a>
        <div class="urun-detay">
            <div class="urun-baslik">
                <a href="kalemliajanda.html" class="baslik" title="Kalemli Çok Amaçlı Ajanda">Kalemli Çok Amaçlı Ajanda</a>
            </div>
            <div class="urun-fiyati">
                <span class="fiyat">21.50</span> 
                <span class="doviz-kodu">TL</span>
            </div>
        </div>
    </li>
    <li class="urun">
        <a class="urun-resmi" href="ozelajanda.html" class="baslik" title="Özel Baskı Promosyon Ajanda">
            <img src="ozelajanda.jpg" alt="Özel Baskı Promosyon Ajanda" />
        </a>
        <div class="urun-detay">
            <div class="urun-baslik">
                <a href="ozelajanda.html" class="baslik" title="Özel Baskı Promosyon Ajanda">Özel Baskı Promosyon Ajanda</a>
            </div>
            <div class="urun-fiyati">
                <span class="fiyat">35.50</span> 
                <span class="doviz-kodu">TL</span>
            </div>
        </div>
    </li>
</ul>

Son olarak görünümüz şu şekilde:

Eksik olan ne? Eksiği yok fazlası var aslında. Önce kenardaki noktalardan kurtulmamız lazım. Bunun için custom.css’e gidelim ve yazmaya başlayalım.


.urunlistesi {
    list-style-type: none !important;
    font-family: "Arial","Helvetica",sans-serif !important;
    font-size: 12px !important;
}

list-style-type: none ile listenin kenarlarındaki noktalardan kurtulduk. Peki bu !important da neyin nesi? Örneğin elinizde aynı etiketi etkileyen ve çakışan iki özellik var. Siz özelliğin başka bir yerde çakışabileceğini düşünüyorsanız, !important; ile özelliğinizi en önemli özellik haline getiriyorsunuz.

Font-family ve size ile yazı tipi ve boyutlarını da ayarladık. Devam edelim:


.urun-listesi .urun {
    float: left;
    width: 145px;
    padding: 6px;
    background-color: #fff;
    border: 1px solid #ececec;
    margin: 0 8px 14px 0;
    position: relative;
    list-style-type:none !important;
}

Burada tanımladığımız bütün özellikleri biliyoruz aslında. float left ile kutuyu sola yaslayacağımızı, width ile genişliğini, padding ile etrafındaki boşluğu, background-color ile arkaplan rengini, margin ile kenar boşluklarını ayarladık. Burada kullandığımız 4 adet sayı, top, right, bottom, left, yani üst, sağ, alt ve sol kenar boşluklarını tek bir satırdan ayarlamamızı sağlıyor.

Position: relative özelliği ise normalde olması gereken yere göreceli olarak konumlandırma yapmamıza yarar. Yine list-style-type ile liste özelliğini önlem olarak burada da yoketmişiz.


.urun-baslik {
    margin-bottom: 0;
    line-height: 15px;
    text-align: left;
}

Ürün başlığı için alt boşluğu 0, satır boyunu 15 piksel yapmış ve yazıları sola hizalamışız.


.urun-baslik a {
    display: block;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Burada yeni birkaç özellikle karşılaşıyoruz. Display block ile elemanımızı satır içinde değil, kendi başına görüntülenmesini sağladık. Ne de olsa resim kutusu olarak kullanacağız ve sağında solunda orasında burasında yazı vs. istemeyiz değil mi? color ile yazı rengini ayaladık. White-space nowrap özelliği ile kutu içindeki yazının alt satıra kaymaması gerektiğini belirttik. Owerflow özelliği ile taşan metnin gizlenmesi gerektiğini söyledik. En güzel özelliğimiz ise text-overflow. Buna verdiğimiz ellipsis değeriyle taşan yazılardan sonra üç nokta gelmesini sağladık.


.urun-fiyat {
    padding-top:6px;
    color: #78c042;
    line-height: 14px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

Ürün fiyatını şekilldenrimek için de yukarıda belirttiğimiz özelliklerin aynısından yararlandık. Burada tek farklı olan, text-align ile metini sağa hizalandırmış ve text-overflow özelliğini de taşan kısmı kesecek şekilde ayarlamış olmamız. Bu özellikle ilgili mozilla geliştirici sitesinde de örnekler mevcut.

Son duruma bakalım:

Ürünler sayfamızı tamamladık. Peki tek bir ürünü incelemek ve sipariş vermek istediğimizde ne olacak? O da bir sonraki yazıya.

Dayanışmayla!
Meraklı Bilişimci

Yorumla

Yorum