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

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

Basit bir örnek ile durumu gösterelim.

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

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

HTML kısmı

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

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

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

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

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

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

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

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

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

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

Kaynaklar

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

Ş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

Bir önceki makalede dikey açılır menüleri gördük. Bu makalede yatay açılır menülere bir örnek vereceğiz. Html kodumuz aynı olsun

<ul id="menu" >
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Haberler</a>
    <ul>
        <li><a href="#">şžirket Haberleri </a></li>
        <li><a href="#">Yurt içi Haberleri </a></li>
        <li><a href="#">Yurt dışı Haberleri</a></li>
    </ul>
    </li>
    <li><a href="#">Ürünler</a>
    <ul>
        <li><a href="#">Tencere</a></li>
        <li><a href="#">Tava</a></li>
        <li><a href="#">Ütü</a></li>
        <li><a href="#">Tost Makinesi </a></li>
        <li><a href="#">El Süpürgesi </a></li>
    </ul>
    </li>
</ul>

İlk olarak satır başı boşluklarını ve imgeleri kaldıralım. Dikey menüde olduğu gibi.

ul#menu, ul#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Daha sonra menümüzü yatay hale getirmek için float özelliğini kullanalım. Normalde bunun için display:inline kodunu da kullanabiliriz.(Bkz. CSS ile Menü Yapmak II – Yatay Menüler) Sonra ilk linkleri göreceli olarak konumlandırmalıyız. Bu konumlandırma aslında ikinci kademe açılacak menüye mutlak konumlandırma yapılması için kullanılır.

ul#menu li {
    float: left;
    position: relative;
    width: 150px;
}

Sonra ikincil linkleri sayfaya ilk açıldığında görünmez(display:none) yapalım. Birincil linklere göre konumlandırmak için postion:absolute özelliği ve top:19px (satır yüksekliği 15px + 2px alttan(sonra ekleyeceğiz) + 2px üstten(sonra ekleyeceğiz)) özelliğini kullanalım.

ul#menu li ul {
    display: none;
    position: absolute;
    top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */
    left: 0;
}

Yalnız burada IE sorun çıkaracaktır. IE ve Opera ikincil menüleri konumlandırmasında sorun çıkarır, bunu engellemek için:

ul#menu li > ul {
    top: auto;
    left: auto;
}

Görünümü biraz güzelleştirelim:

ul#menu li a {
    font: bold 11px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
    color: #000;
    background: #efefef;
    text-decoration: none;
}

ve rollover hali için:

ul#menu li a:hover {
    color: #a00;
    background: #fff;
}

Sonra birincil linklerin üzerine gelince ikincil linklerin görünmesi için:

ul#menu li:hover ul {
	display: block;
}

Önceki makalede belirttiğimiz gibi bu kod IE’de çalışmayacaktır. IE’de çalışması için aşağıdaki kodları yazmalıyız.

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;

Ayrıca aşağıdaki kodu da eklemeliyiz.

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

Önemli bir not olarak koddaki <ul id="menu" > ve javascriptteki navRoot = document.getElementById("menu"); aynı olmasına dikkat edelim.

işte sonuç:

şimdiye kadar anlatılan menü kodlarında işin yapısı öğretilmeye çalışılmıştır. Bu kodları kullanarak çok çeşitli menüler yapılabilir, bunu gerek internette arayarak ve gerekse kaynaklar bölümündeki linklere göz atarak görebilirsiniz. Bir çok menü türü bu şekilde tasarlanabilir. alt kademeli, değişik renklerde ve değişik ebatlarda menü yapılabilir.

Örnek kodları indir

Kaynaklar

• http://www.alistapart.com/articles/dropdowns/
• http://www.compassdesigns.net/
• http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp#hs6
• http://www.cssplay.co.uk/menus/index.html

Açılır menü yapmak için daha önceki menü örneklerinde olduğu gibi sıralanmamış listeleri(<ul>) kullanacağız. Buradaki fark alt kategorilerin yani üzerine gelince açılacak menünün bir alt sırlanmış liste olarak eklenmesidir.

<ul id="menu" >
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Haberler</a>
    <ul>
        <li><a href="#">şžirket Haberleri </a></li>
        <li><a href="#">Yurt içi Haberleri </a></li>
        <li><a href="#">Yurt dışı Haberleri</a></li>
    </ul>
    </li>
    <li><a href="#">Ürünler</a>
    <ul>
        <li><a href="#">Tencere</a></li>
        <li><a href="#">Tava</a></li>
        <li><a href="#">Ütü</a></li>
        <li><a href="#">Tost Makinesi </a></li>
        <li><a href="#">El Süpürgesi </a></li>
    </ul>
    </li>
</ul>

İlk olarak satır başı boşluklarını ve imgeleri kaldıralım.

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
}

Sonra ilk linkleri göreceli olarak konumlandırmalıyız. Bu konumlandırma aslında ikinci kademe açılacak menüye mutlak konumlandırma yapılması için kullanılır.

ul li {
	position: relative;
}

Bir sonraki adımda da ikincil açılan menüleri konumlandırmak olacaktır. Her birinci linke karşılık gelen ikincil açılır menüler ilkinin sağına konumlandırılmalıdır. Bunun için soldan 149px değeri verilir. 1 piksel sola kaydırılır ki fare ilk linki üzerinde ikinci linkin üzerine glemeden kaybolmasın. Ayrıca ikincil linklerin ilk sayfa açıldığında görünmemesi için display:none özelliği atanır.

li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}

Açılır menü yapısını oluşturmuş olduk şimdi linkleri güzelleştirip menü haline getirmek için önceki menüleri yaparken uyguladığımız kodları uygulayalım. Linklerin kendine has alanlarını tanımlamak için display:block özeliğini kullanalım. Linklerin altındaki çizgiyi kaldırmak için text-decoration:none özelliğini kullanalım. Linkler arasına mesafe vermek için padding verelim. Birde bir zemin rengi tanımı ver kenarlık tanımı yapalım. Üstteki linkin alt kenarlığı ile alttaki linkin üst kenarlığı üst üste bineceğinde alt kenarlık değerini sıfırlayalım.

ul li a {
    display: block;
    text-decoration: none;
    background-color: #E2E2E2;
    padding: 5px;
    border:1px solid #000;
    border-bottom:0;
}

Bu kodu yazdığımızda IE linkler arasına boşluk koyacaktır(IE7 de hala bu sorun devam ediyor) bu durumu düzeltmek için:

/* IE. gizle \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* IE den gizleme sonu */

En alttaki çizgimiz eksik kalmaması için ilk link ul’sinin alt kenarlık tanım yaparız.

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #00;
}

Birincil menü görünümü tamamlandı ancak ikincil menüler görünmüyor. İkincil menüleri göstermek için:

li:hover ul {
	display: block;
}

Bu kadar basit bir kod menümüzü tamamlar. Ancak bir sorun var ki o da IE7′den öncesi bu kodu desteklemez.

Peki menümüz böyle mi kalacak hayır. IE6 ve altı için bir javascript kodu yazacağız.

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;

Bu çözümü bize kazandıran arkadaşlara teşekkürü bir borç biliriz ve linkini de yazarız.

Ayrıca aşağıdaki kodu da eklemeliyiz.

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

Ayrıca kod daki<ul id="menu" > ve javascriptteki navRoot = document.getElementById("menu"); aynı olmasına dikkat edelim.

Örnek kodları indir

Bazı arkadaşlardan bu menünün sağda olması halin nasıl yaparız diye bir istek geldi bende bunun için bir kod eklemek istiyorum. Bu ekleme 28 Mayıs 2009 da yapılmıştır.

Soldaki örneğe göre iki değişikliğimiz oldu. Birincisi menüyü sağa almak için ul ye float:right ataması yaptık. İkincisi, ikinici açılan menüyü soldan 149 px yerine eksi 149px ile sola almak oldu

Kaynaklar

• http://www.alistapart.com/articles/horizdropdowns
• http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
• http://www.seoconsultants.com/css/menus/tutorial/
• http://www.cssplay.co.uk/menus/flyout2.html

Sırasız listeler(<ul>) ilk olarak listeleme işlemleri için kullanılsa da CSS’in yükselişi ile birlikte menü oluşturmak için kullanılmaya başlandı. Aslında menülerde bir bakıma link listeleri olduğu düşünülürse işlevinin dışında kullanılmadığı da doğru bir tespittir. Kodumuzu yazmaya başlayalım:

<ul class="menu">
    <li><a href="index.html">Ana Sayfa </a></li>
    <li><a href="hakkimizda.html">Hakkımızda</a></li>
    <li><a href="urunler.html">Ürünler</a></li>
</ul>

Kodlama sonucu görüntü aşağıdaki gibi olacaktır.

Her linkin başındaki imgeleri kaldırmak için:

ul.menu {
	list-style-type: none;
}

Bir çok web tarayıcısı sırasız listeleri(<ul>) yorumlarken yukarıda görüldüğü gibi otomatik olarak soldan bir padding/margin(bazı tarayıcılarda padding uygularken bazılarında margin uygular) mesafesi uygular bu mesafeyi sıfırlamak için:

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

Bu bölüme kadar yazılan kodlamalar hem dikey menüler hem de yatay menüler içinde aynıdır. Ancak bundan sonra dikey menü ve yatay menü için kodlar değişecektir.

Dikey Menüler

Dikey menülerde linkler yukarıdan aşağı doğru sıralanmıştır. Link elementi(a) inline-elementtir, her linke rollover özelliği kazandırmak için:

ul.menu a {
	display: block;
}

Biraz görselliği arttırırsak:

ul.menu a {
    display: block;
    color: #1B1B1B;
    background-color: #E2E2E2;
}

Linkler web tarayıcısının genişliği kadar uzayacaktır, kendi istediğimiz genişliğe sahip olmak için:

ul.menu a {
    display: block;
    color: #1B1B1B;
    background-color: #E2E2E2;
    width:8em;
}

Linkler arasına biraz boşluk verelim:

ul.menu a {
    display: block;
    color: #1B1B1B;
    background-color: #E2E2E2;
    width:8em;
    padding: .2em .8em;
}

Linklerin altındaki çizgileri kaldıralım:

ul.menu a {
    display: block;
    color: #1B1B1B;
    background-color: #E2E2E2;
    width:8em;
    padding: .2em .8em;
    text-decoration: none;
}

şžimdi linklerimize rollover efekti vermek için a:hover kullanacağız:

ul.menu a:hover
{
	background-color: #999;
}

son olarak linklerin arasını ayıralım:

ul.menu li {
	margin: 0 0 .2em 0;
}

İşte menümüzün son hali

1. Font

Normalde bir font tanımlarken 4 adet CSS kodu kullanılır:

    font-weight: bold;
    font-family: verdana, sans-serif;
    font-size: 11px;
    line-height: 15px;

Kısaltma olarak kullanlan kod ise tek satır:

font: bold 11px/15px verdana, sans-serif;

2. Background

Background tanımlarken 5 adet atama yapmamız gerekirken kısaltma kullanarak tek tanıma indirebilriz.

    background-color: #000;
    background-image: url(ard.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50px 50px;

Kısaltırsak:

background: { #000 url(ard.jpg) no-repeat fixed 50px 50px; }

3. Renkler(Hex-decimal)

CSS stillerinde renkler genelde hex-decimal renk kodu ile tanımlanır örneğin color: #ff0000; kırmızı. Renkler 6 karakterle gösterilsede bir çok renk(web tabanlı) 3 karakterin tekrarlanması ile oluşturulur. Örneğin, kırmızı’nın hex-decimal kodunun kısaltırsak color: #f00;. Buradaki her karakter hex-decimal koddaki iki karaktere karşılık gelmektedir. Mesela, beyaz renk kullanacağınızda, color: white; veya color: #ffffff; kulanımı önermeyiz. Kısaltılmış olanı color: #fff; kullanmanız daha avantajlıdır.

4. Border

Kenarklık tanımlamalarında her özellik için bir tanımlama yapılır. örnek olarak bir elementin üst kenarına atama yapmak için:

	border-top-width: 2px;
    border-top-style: dashed;
    border-top-color: #f00;

Kısaltırsak:

	border-top: 2px dashed #f00;

Bu özellikleri tüm kenarlara uygulmak için:

	border: 2px dashed #f00;

5. Margin ve Padding’ler

Margin ve paddingler de normal tanımlama şöyledir:

    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 20px;
    margin-left: 15px;

kıslatılmış hali:

margin: 10px 5px 20px 15px;

Burada öznitelikler sağdan başlayarak saat yönünde devam eder. Aşağıda çeşitli kısaltma yöntemleri birlikte verilmiştir:

4 Değer: (margin: 20px 15px 10px 5px;) birinci – üst, ikinci – sağ, üçüncü – alt, dördüncü – sol.

3 Değer: (margin: 20px 15px 10px;) birinci – üst, ikinci – sol ve sağ, üçüncü – alt.

2 Değer: (margin: 20px 15px;) birinci – üst ve alt, ikinci – sol ve sağ.

1 Değer: (margin: 10px;) birinci – üst, sağ, alt ve sol

6. Listeler

Liste tanılmalrında da kısaltmalar mümkündür

ul {
    list-style-type:square;
    list-style-position:inside;
    list-style-image:url(image.png);
}

Kısaltırsak;

ul li {
	list-style:square inside url(image.png);
}
/* burda özel bir durum vardır eğer resim yoksa yedek olarak square özelliği gösterilecektir.  */

7. Sıfır ’0′ ın Kısaltma olarak kullanılması

Kısaltmalarda son olarak ’0′ ın kullanımına değineceğiz. Normalde bir elemente değer ataması yapılırken değerin yanına birimi de yazılır(örn: 3px, 0.2em vd.), Ancak sıfır ’0′ için bu zorunlu değilidir.

padding:0;

Bu durumun bir istisnası mevcuttur oda yüzde değerlerinde atama yapılırken 0% olarak atama yapılmalıdır.

Kaynaklar

• http://www.w3schools.com/css/default.asp
• http://www.eyeofdesign.com
• http://www.spoono.com
• http://www.dustindiaz.com/css-shorthand/