Yeni siteyi tasarlarken ana navigasyonu(üstte görülen) tek resim ile yaptim. Bu yeni navigasyonu olusturan tek resim asagida görülmekte:
<div id='navigation'>
<ul id='nav'>
<li id='home'><a id='A1' accesskey='b' runat='server' title='mirmirik.net.blogs();'
href='~/'>baslangiç</a></li>
<li id='yaz'><a id='A2' accesskey='i' runat='server' title='mirmirik.net.software();'
href='~/content.aspx?l=12'>yazilim</a></li>
<li id='siy'><a id='A3' accesskey='o' runat='server' title='mirmirik.net.politics();'
href='~/content.aspx?l=13'>siyaset</a></li>
<li id='gun'><a id='A4' accesskey='a' runat='server' title='mirmirik.net.diary();'
href='~/content.aspx?l=11'>günlük</a></li>
<li id='hak'><a id='A8' accesskey='a' runat='server' title='mirmirik.net.about();'
href='~/rights/'>hakkinda</a></li>
</ul>
</div>
Daha sonra bu UL ve LI tag` lerinden olusan liste için CSS` i olusturdum. CSS` i olustururken, her bir LI için ayri ID kullandim(home, yaz, siy gibi). ‘#nav’ id` sine sahip olan UL` deki her bir LI tag` i için text-indent özelligini -999px olarak verdim ki, CSS kullanan gezginler için yazilar görülmesin. Ayrica LI taglerinin içindeki her ‘anchor'(<a>) için arka plan resmini aynisi olarak tanimladim. Bu da söyle bir CSS kodu çikartti:
/* Navigation */
#navigation { position: absolute; top: 141px; float: left; height: 32px; padding-left: 0px; padding-top: 5px; margin: 0; display: block; }
ul#nav { }
ul#nav li { padding: 0; margin: 0; float: left; text-indent: -9999px; list-style-type: none; }
ul#nav li a { width: 90px; height: 32px; border: 0; display: block; text-decoration: none; background: transparent url(../../images/blues/navbg.jpg) no-repeat; }
Genel navigasyon tanimini yaptiktan sonra her bir menü seçenegi için ayri ayri bu arkaplan resminin pozisyonunu degistirmem gerekiyordu. Bunu yaparken de su ölçülerden faydalandim:
li#home a:hover, li#home a:focus { background-position: 0px -32px; }
li#yaz a:link, li#yaz a:visited { background-position: -90px 0px; }
li#yaz a:hover, li#yaz a:focus { background-position: -90px -32px; }
li#siy a:link, li#siy a:visited { background-position: -180px 0px; }
li#siy a:hover, li#siy a:focus { background-position: -180px -32px; }
li#gun a:link, li#gun a:visited { background-position: -270px 0px; }
li#gun a:hover, li#gun a:focus { background-position: -270px -32px; }
li#hak a:link, li#hak a:visited { background-position: -360px 0px; }
li#hak a:hover, li#hak a:focus { background-position: -360px -32px; }
Bu CSS kodlarini ilk basta yazdigim XHTML` e uygulayinca üstteki menü ortaya çikti. Navigattion Matrix konusu ile ilgili öncelikle Veerle` s blog sitesindeki The XHTML/CSS template phase of my new blog, part 2 yazisindan, daha sonra da ayni yazida linki verilen Navigation Matrix Reloaded yazilarindan faydalandim.
Herkese iyi CSS` ler…