Şu ana alt kısımda gördüğünüz hali bitmiş hali. Bu kısmı nasıl yaptığımı açıklayarak kullanılan tekniğin nasıl uygulandığını sizlerle paylaşmak istedim. Olur ki sizede lazım olur.

Stil uygulanmamış listeyi(ham HTML) görmek için tıklayınız.

"Son Okuduğum 10 Kitap" kısmının eski görünümü

Bu kısım liste elemanları ile oluşturulmaktadır.

<div class="smallbox">
    <h3>Okuduğum kitaplar</h3>
    <ul>
        <li><a href="http://www.fatihhayrioglu.com/?p=468" title="Sürgünden Soykırma Ermeni İddaları – Yusuf Halaçoğlu">Sürgünden Soykırma Ermeni İddaları – Yusuf Halaçoğlu</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=465" title="Avrupa Türkiyesi’ni Kaybımız Rumeli’nin Elden Çıkışı – Yılmaz Öztuna">Avrupa Türkiyesi’ni Kaybımız Rumeli’nin Elden Çıkışı –
        Yılmaz Öztuna</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=458" title="Batının Oluşumu – Christopher DAWSON">Batının Oluşumu – Christopher DAWSON</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=439" title="Ölüm Daha Güzeldi – Mehmet Niyazi ">Ölüm Daha Güzeldi – Mehmet Niyazi </a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=436" title="Petrol Fırtınası – Raif Karadağ">Petrol Fırtınası – Raif Karadağ</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=426" title="CSS Mastery: Advanced Web Standards Solutions – Andy Budd">CSS Mastery: Advanced Web Standards Solutions – Andy Budd</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=415" title="Tarih Boyunca Doğu Karadeniz’de Etnik Yapılanmalar ve Pontus – Haşim Albayrak">Tarih Boyunca Doğu Karadeniz’de Etnik Yapılanmalar ve Pontus – Haşim Albayrak</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=406" title="Süleyman Çelebi ve Mevlid-i Şerif – Ahmed Aymutlu">Süleyman Çelebi ve Mevlid-i Şerif – Ahmed Aymutlu</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=402" title="İçimizde Bir Yer – Ahmet Altan">İçimizde Bir Yer – Ahmet Altan</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=398" title="Adnan Menderes’in Günlüğü – Taşkın Tuna">Adnan Menderes’in Günlüğü – Taşkın Tuna</a></li>
    </ul>
</div>

Yapacağımız düzenlemeyi düşünerek ilk olarak ardalanı oturtalım, ardalan resmi için aşağıdaki resimleri hazırladım:

Kullanılacak ardalanlar

Alt kısımdaki diğer alanlardan ayırmak için bazı id tanımlamaları yaptım:

<div id="okudugumKitaplarKapsul" class="smallbox">
<h3>Okuduğum kitaplar</h3>
    <ul id="okudugumKitaplar">
        <li><a href="http://www.fatihhayrioglu.com/?p=468" title="Sürgünden Soykırma Ermeni İddaları – Yusuf Halaçoğlu">Sürgünden Soykırma Ermeni İddaları – Yusuf Halaçoğlu</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=465" title="Avrupa Türkiyesi’ni Kaybımız Rumeli’nin Elden Çıkışı – Yılmaz Öztuna">Avrupa Türkiyesi’ni Kaybımız Rumeli’nin Elden Çıkışı –
        Yılmaz Öztuna</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=458" title="Batının Oluşumu – Christopher DAWSON">Batının Oluşumu – Christopher DAWSON</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=439" title="Ölüm Daha Güzeldi – Mehmet Niyazi ">Ölüm Daha Güzeldi – Mehmet Niyazi </a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=436" title="Petrol Fırtınası – Raif Karadağ">Petrol Fırtınası – Raif Karadağ</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=426" title="CSS Mastery: Advanced Web Standards Solutions – Andy Budd">CSS Mastery: Advanced Web Standards Solutions – Andy Budd</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=415" title="Tarih Boyunca Doğu Karadeniz’de Etnik Yapılanmalar ve Pontus – Haşim Albayrak">Tarih Boyunca Doğu Karadeniz’de Etnik Yapılanmalar ve Pontus – Haşim Albayrak</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=406" title="Süleyman Çelebi ve Mevlid-i Şerif – Ahmed Aymutlu">Süleyman Çelebi ve Mevlid-i Şerif – Ahmed Aymutlu</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=402" title="İçimizde Bir Yer – Ahmet Altan">İçimizde Bir Yer – Ahmet Altan</a></li>
        <li><a href="http://www.fatihhayrioglu.com/?p=398" title="Adnan Menderes’in Günlüğü – Taşkın Tuna">Adnan Menderes’in Günlüğü – Taşkın Tuna</a></li>
    </ul>
</div>

CSS kodunu yazmaya başlarsak:

İlk olarak oval kenarın üst kısmını okudugumKitaplarKapsul olarak tanımladığımız katmana verelim. Ardalan tanımı yanı sıra genişlik, kenar dış boşluğu(margin), ve kenar iç boşluğu(padding) tanımları yapılmıştır.

#okudugumKitaplarKapsul{
    background:url(images/okudugum_kitap_ust.gif) top left no-repeat;
    margin:0;
    padding:0 0 10px 0;
    width:240px;
}

Başlık tanımlarını yapalım:

#okudugumKitaplarKapsul h3{
    font:bold 18px 'Frutiger Linotype','Lucida Grande','Trebuchet MS',sans-serif;
    color:#fff;
    margin:0;
    padding:10px 0 0 10px;
}

Oval kapsülün alt kısmınıda listemizin(ul) altına koyarsak oval ardalan kısmını elde etmiş olacağız. Ardalan tanımında resmi ekledik, resmin doldurduğu kısımdan sonrası içinde ardalan rengini(#0f3461) tanımladık ve böylelikle oval kapsülümüz tamamladık.

ul#okudugumKitaplar{
    margin:0;
    padding:10px;
    background:#0f3461 url(images/okudugum_kitap_alt.gif) bottom left no-repeat;
}

Bu kodlardan sonra sayfamız aşağıdaki gibi görünecektir. Örnek 2

Şimdi içerik kısmını kodlayalım. Burada linkler bir blok şeklinde bir alanı kapsayacak ve fare üzerine geldiğinde yine blok şeklinde bir renk değişimi ve ikon değişimi olacaktır. Ayrıca her bir kitap linkinden sonra bir ayraç çizgisi olacak. Kodumuzu bunu düşünerek yazarsak. Alt çizgiyi her bir listenin ardalan resmi olarak tanımlarsak. Burada 2 piksellik bir resim bizim işimizi görecektir. Bu 2 piksellik çizgiyi repeat-x ile tekrarlattığımızda tam bir hat şeklinde bir kesikli bir çizgi elde etmiş olacağız.

ul#okudugumKitaplar li{
    display:block;
    padding:0 0 2px 0;
    background:url(images/kitap_altcizgi.gif) bottom left repeat-x;
    list-style:none;
}

Linklere blok görünümü kazandırmak için display:block tanımlaması yapacağız.

ul#okudugumKitaplar li a{
    font:12px Verdana, Arial, Helvetica, sans-serif;
    text-decoration:none;
    display:block;
    color:#fff;
}

İki adet kitap ikonu oluşturmalıyız, biri normal hali diğeride üzerine geldiğimizde görünecek halleri. Ben bunu http://www.iconlet.com/‘den aldım. Ardalan resmi olarak tanımlayalım.

ul#okudugumKitaplar li a{
    background:url(images/kita_ikon_normal.gif) 1px 7px no-repeat;
    font:12px Verdana, Arial, Helvetica, sans-serif;
    text-decoration:none;
    display:block;
    padding:5px 0pt 5px 30px;
    color:#fff;
}

Burada bir sorunumuz olacaktır. Kitap linklerinden bazıları uzun iken bazıları kısa tek satır olacaktır ve bu durumda sola koyduğumuz kitap ikonunun belli bir kısmı görünmeyecektir. Bu durumu düzeltmek için bir minimum yükseklik tanımı yapacağız.

ul#okudugumKitaplar li a{
    background:url(images/kita_ikon_normal.gif) 1px 7px no-repeat;
    font:12px Verdana, Arial, Helvetica, sans-serif;
    text-decoration:none;
    display:block;
    padding:5px 0pt 5px 30px;
    min-height:25px;
    height:auto !important;/* ie 6 icin */
    height:25px;
    color:#fff;
}

Sonuç aşağıdaki gibi görünecektir. Sonuç sayfasını görmek için tıklayınız.

Sonuçta "Son Okuduğum 10 Kitap" güzel bir görünüm kazandı. Bu yöntem bir çok sitede ve farklı yerlerde kullanılan güzel bir yöntemdir. Umarım sizlerinde işine yarar.

Ayrıca ben "Son Okuduğum 10 Kitap" alanın alt kısım alanının biraz üstüne çekerek dikkat çekmeye çalıştım. Sitemdeki son görünüm

Ermeni soykırımını devamlı üzerimize kakan batı dünyasının bunları görmemesi. Niyetlerini anlamamız için yeter.

Sovyet rusya yıkıldı. Tüm bu zulümler unutuldu. En azından bizim gördüğümüz. Ancak bunlar yaşandı ve böyle romanlar sayesinde devamlı anılacaktır.

Azerbaycan’dan Türkiye’ye sığınmış ve Türkiye’de Ağır Ceza Reisliği’nden emekli olmuş ve rahmete kavuşmuş bir Azerbaycanlı Türk’ün, anayurdunda başından geçenler etrafında cereyan eden bir roman.

Ayrıntılı bilgi için tıklayınız

Ayrıntılı bilgi için tıklayınız.

Kitap yeni başlayanlardan ziyade CSS konusunda biraz mürekkep yalamış arkadaşalr için çok güzel bir kaynak. Bir çok yeni metodun anlatımı mevcut kitap içinde.

Kitabın ingilizce olması bir dezavantaj ama malum ingilizce dışında kitap bulma imkanımızda yok.

Ayrıntılı bilgi için tıklayınız.

Son dönemde Doğu Karadeniz’le ilgili yapılan tüm tartışmalarda öne çıkan bir kavram var; PONTUS…

Doğu Karadeniz’in etnik yapılanları içerisinde Pontus’un yeri nedir ve önemi ne ölçüdedir?

Bu sorunun cevabı, o bölgedeki diğer etnik yapılanlar bilinmeden asla verilemeyecektir.

Kitap bir bütün olarak Pontus’u içermiyor, M.Ö. 5000′den başlayarak Anadolu’da, özellikle Doğu Karadeniz’de bu güne kadar oluşan tüm etnik yapılanmalarla ilgili tesbit ve değerlendirmelerde bulunuyor.

Ayrıntılı bilgi için tıklayınız.

Süleyman Çelebi Mevlid-i Şerifi Bursa da vaaz veren bir hatip’in tüm peygamberleri bir tutan vaazına karşı yazılmış.

Üzerinden bunca yıl geçmesine rağmen hala etkisini koruması başlı başına bir olay.

Ayrıntılı bilgi için tıklayınız.

Belki ben bu tip kitaplara fazla ilgi duymamamdan kaynaklana bir sorundur.

Arka kapak: Siz kendi duygularınızın kölesisiniz, herkes gibi.
Ama size hükmeden bu duyguları tanıyamaz, ne zaman, nerede, nasıl ortaya çıkacağını bilemezsiniz.
Bir aşk, bir öfke, çıldırtıcı bir kıskançlık, dayanılmaz bir özlem bazen karanlıkların içinden çıkıp sizi esir alabilir.
Bazen, bir başka insan için kendinizden vazgeçebilirsiniz.
Bazen öfkeyle kamaşır içiniz.
Kendi bilinmezliğinizle yaptığınız bu karmaşık dansta adımlarınızı ayarlamak için size yardım edecek olan edebiyattır.
Size, sizi, hayatı, insanları, duyguları anlatan edebiyat.
Ahmet Altan, bu kitabıyla hayatın ve insanın derinliklerindeki bütün duygu kıpırtılarını ışığa çıkartıyor.
Okuyacağınız her satırdan kendinize ya da bir tanıdığımıza ait bir duygunun izini, macerasını bulacaksınız.
Bu kitabı okurken, kendi hayatımızın hikayesini dinleyeceksiniz.

Ayrıntılı bilgi için tıklayınız

Arka Kapak: Görünüşte herkese açık hayatlar vardır. Göz önünde duran, göz batan, sürekli takip ettiğimiz, süreki yargılayıp, kefen biçtiğimiz hayatlar. Tıpkı penceresi geniş bir eve benzer böyle hayatlar. Ama dışarıdan gördüğümüz renkleri, yine de merakımızı gidermez. İçeride duranın bize, dışarıdan göremediğimiz alacakaranlıkta kalmış yerleri de anlatmasını isteriz: Kendi içinden hayatın nasıl gözüktüğünü, yalnızken neler hissettiğini, herkesten saklayıp da vermediği cevapları, kalp çarpıntılarını…

Günlük bizim için değerli kılan, bu tür soruların cevabını verecek bir belge niteliğinde olmasıdır. Bir toplumun çıkardığı zirveden aşağılara yuvarlanmış insanların, o eziyet dolu düşüş mevsiminde neler hissettiklerini ancak bıraktıkları günlüklerden öğrenebiliriz. Günlük bazen, parmağı adaletsizlikle kesilmiş bir insanın, akan kanını temize çıkaracak içli bir tutanağa dönüşür…

‘Adnan Menderes’in Günlüğü’ bizzat Menderes’in kaleminin değil, ölümünden yıllar sonra hayatını en ince ayrıntısına kadar gözden geçiren başka bir kalemin ürünüdür. Taşkın Tuna, tamamen belgelere dayanarak günbegün Menderes’i yaşamış, Menderes’i duymuş, Menderes’i hissetmiş ve onun kader saatlerini bir günlük tarzında tasarlayarak bu romanı ortaya koymuştur.

Ayrıntılı bilgi için tıklayınız.

Sultan Abdülaziz hakkında yazılmiş güzel bir eser.

Ayrıntılı bilgi için tıklayınız.

Yazar bu kitapta İslâm’ın temel prensipleriyle İslâm tarihinde geçmiş uygulamaları hukuk mantığıyla ele alarak İslâm’da “devlet”in ne olduğunu ortaya koymaya çalışmaktadır.

Ayrıntılı bilgi için tıklayınız.