CSS ile yap?labileceklerinizin s?n?rs?z oldu?unu söylesem san?r?m yanl?? bir cümle kurmam?? olurum, en az?ndan benim ?ahsi dü?üncem bu yönde. Bir çok listeleme ve imaj tekni?i ile ilgili yaz? mevcut.
Öncelikle css ile basit uygulamalar haz?rlaman?n birbirinden farkl? yollar? oldu?unu belirtmek isterim. Yani hali haz?rda bir uygulama farkl? ?ekillerde yine ayn? sonucu verebilir. Önemli olan burada az kod kullanarak çok platformda geçerli uygulamalar haz?rlamakt?r. Unutmamak gerekir ki standart i?leyi?teki sayfalar?n olmazsa olmaz? “az laf çok i?” sözünden hat?rlaman?z gereken az i?lem yaparak en uygun olan? sunabilmektir. Bu h?z ve beraberinde esneklik getiren bir yoldur.
?imdi bu yaz?m?zda listeleme yapman?n farkl? ve görünü? üzerine yo?unla??lm?? bir uygulamas?n? anlataca??m. Uzun zamand?r buna benzer bir konuyu anlatacakt?m, üzerine bu haz?rlanm?? uygulamay? görmem büyük bir kolayl?k oldu. Uygulaman?n orjinaline buradan ula?abilirsiniz.
?imdi a?ama a?ama ilerleyelim. Bir etikete farkl? parametreler vererek farkl? görevler/özellikler kazand?rabiliriz, ayr?ca bir etiketin alt?nda ba?ka bir etiket ile özelli?i tümle?ik olarak da sa?layabiliriz. Bunun bir örne?i olarak;
Yani <a href=”#”>örnek 1</a> verilebilir. Burada çok basit bir kullan?m görülmekte.
Sadece yapt???m ba?lant? alt?nda kal?n yaz? yazmama olana veren <strong>…</strong> kullanmak oldu. Ancak tabi her uygulaman?n bu kadar basit olmayaca??n? da bilmenizi isterim :) Bu nas?l bir uygulama haz?rlamak istedi?inize göre de?i?ebilecek bir durum.
Burada görebilece?iniz örne?i haz?rlayal?m.
Öncelikle kendimize bir liste olu?turmal?y?z. Listemizi farkl? ?ekillerde -amaca göre- olu?turabildi?imizi unutmayal?m. Burada benim uygun gördü?üm listeleme methodu <ol><li></li></ol> oldu. K?saca bu liste ?eklini de aç?klamak gerekir ise;
<ol> s?ral? listeler haz?rlamak için kullan?l?r.
gibi. S?ralamay? rakamsal olarak yapabilece?imiz gibi (1,2,3,4), farkl? ?ekillerde de yapabilmekteyiz.
?imdi bu k?sa aç?klaman?n ard?ndan uygulama anlat?m?na kald???m?z yerden devam edelim.
<div id="menu">
<ul>
<li id="one"><a href="#"><em>item one</em></a></li>
<li id="two"><a href="#"><em>item two</em></a></li>
<li id="thr"><a href="#"><em>item threer</em></a></li>
<li id="fou"><a href="#"><em>item four</em></a></li>
...
</ul>
</div>
Burada ilk önce bir katman açarak içerisinde listeleme olu?turmam?z?n nedeni katmanlar?n blok ( display: block ) özelli?i nedeniyle yerle?tirdikleri alan?n hacmini al?yor olmalar?. Bu ?ekilde menülerin -e?er aksi istenmiyor ise- di?er katmanlarla ya da etiketlerle kar??mamas? sa?lan?r. Ancak belirtti?im gibi bu seçime ba?l?d?r. Örne?in kulland???n?z kod mant??? geneline ters dü?en bir durumda ba?ta bir etiket alt?nda kullanabilirsiniz. Bu türevlerde yine blog özelli?i kazand?rmak için kulland???n?z etikete style parametresi olarak display: block de?erini vermeniz yeterlidir.
<span style="display: block;"><ul>
<li id="one"><a href="#"><em>item one</em></a></li>
<li id="two"><a href="#"><em>item two</em></a></li>
<li id="thr"><a href="#"><em>item threer</em></a></li>
<li id="fou"><a href="#"><em>item four</em></a></li>
...
</ul>
</span>
Tabi ba?ta da belirtti?im gibi bu tavsiye edebilece?im bir yöntem de?ildir. Çünkü etiketleri ba?ka etiketlerin yapabildi?i etiketlere göre uyarlamak bize sadece kod kalabal???ndan ba?ka bir ?ey kazand?rmaz.
<div id="menu"> <ul> <li id="aro"><a href="#"><em><strong>Alex Rodriguez</strong></em></a></li> <li id="vwe"><a href="#"><em><strong>Vernon Wells</strong></em></a></li> <li id="dje"><a href="#"><em><strong>Derek Jeter</strong></em></a></li> <li id="vgu"><a href="#"><em><strong>Vlad Guerrero</strong></em></a></li> <li id="kro"><a href="#"><em><strong>Kenny Rogers</strong></em></a></li> <li id="iro"><a href="#"><em><strong>Ivan Rodriguez</strong></em></a></li> <li id="mlo"><a href="#"><em><strong>Mark Loretta</strong></em></a></li> <li id="isu"><a href="#"><em><strong>Ichiro Suzuki</strong></em></a></li> <li id="dor"><a href="#"><em><strong>David Ortiz</strong></em></a></li> </ul> </div>
Yukar?daki kodda görebildi?iniz üzere, benim yaz?n?n ilk bölümünde anlatt???m bir durum söz konusu. ?ç-içe etiket kullan?m?!
Listeleme etiketlerinin içerisinde yer alan ><a href="#"><em><strong>Alex Rodriguez</strong></em></a> bölümünde ba?lant? (<a>..</a>) içerisinde, italik (<em>..</em>) ve kal?n yaz? (<strong>..</strong>) etiketleri kullan?lm?? durumda.
Bunun nedeni ne olabilir sorusuna verilebilecek örnek san?r?m uygulamada buna göre bir yol izlenebilmi? olma ihtimalidir san?r?m. Örne?in kodlar?n? buradan da gördü?ünüz üzere ve aç?klamalar?nda da yer ald??? gibi bu her etiketin bir kullan?m? bulunmakta.
Yaz?da bahsi geçen uygulama için haz?rlamam?z gereken di?er materyaller ise 3 farkl? -uygulamaya uygun olarak- imaj. Ço?unlukla css ile haz?rlanan uygulamalarda görsellik katmak amac? ile kullan?lan rollover tekni?i ile ilgili bilgi vermek gerekirse;
Ancak sadece ba?lant?lar ile yap?l?r diye bir kaidesi bulunmamaktad?r.
Bir imaj?n ba?lanabilece?i gibi bir etikete de ba?lanabilir.
Örne?in yandaki örnek <span>..</span> etiketine ba?lanm??t?r.
<style type="text/css" media="screen">
#rimage {
background: #FFF url(ca-logo.png) no-repeat 0 0;
}
#rimage:hover {
background: #FFF url(ca-logo.png) no-repeat 0 50%;
}
</style>
Yeniden uygulamam?za dönecek olursak uygulamada üç farkl? imaja ba?l? rollover tekni?i kullan?lm??t?r.
Sonras?nda ise her etikete uygun rollower etkisini sa?lamak için style kodlar?n? olu?tural?m.
#menu li a em {
position:absolute;
top:0;
left:460px;
display:block;
padding:0;
background:url(images/name_aro.gif) no-repeat 0 0;
text-indent:-5000px;
height: 35px;
width: 200px;
}
?le ilk görüntüyü haz?rlam?? oluyoruz. Burada kal?n olan bölümlerde background imaj?m?z?n ilk hizalamas?n? haz?rl?yoruz. Height de?eri ile de imaj?m?z?n belirli bir alandan fazlas?n?n görüntülenmemesini belirtmi? oluyoruz. ?imdi hover etkisini yapacak kodumuza geldi,
#menu li a:hover em {
background-position:0 -35px;
}
?lk kodumuzda hizalama olarak üst ve sol kö?eden olan mesafeyi 0 0 olarak berlitmi?tik, ?imdi ise de?i?imi sa?lamak için 0 -35px de?erlerini veriyoruz. Bu ?ekilde -35px de?erinde bir kayma imaj?m?z?n de?i?mesini sa?lamktad?r.
Makalenin orjinali, uygulaman?n style dosyas? ve örne?i
