Jquery holdReady() fonksiyonu

10 May

Yazı Fatih HAYRİOĞLU tarafından Javascript, jquery kategorisine eklendi.

Jquery son sürümü 1.6 çıktı. Dokümanları incelerken gözüme holdReady() fonksiyonu takıldı.

Jquery holdReady fonksiyonu document.ready olayını tutar veya devam etmesini sağlar. Boolean(true / false) tipi değer döndürür. true değeri dönerse document.redy olayını tutar, false değeri gelirse bırakır ve document.ready olayı gerçekleşir.

document.ready olayı DOM yüklenir yüklenmez devreye girer. Ancak bazen öyle durumlar olur ki DOM’un yüklenmesini beklemeden yüklememiz gereken javascript dosyaları veya referans aldığımız eklenti dosyaları olur, bu gibi durumlarda araya girip bu dosyaları yükletmemiz gerekir ve sonra işleyişi devam ettirmemiz gerekir. İşte bu gibi durumlarda holdReady fonksiyonu kullanılabilir. 

$.holdReady(true); // biraz bekle
$.getScript("myplugin.js", function() { // dosyayi yukledik
     $.holdReady(false); // simdi sen isine donebilirsin
});

Bu metot <head> içinde document.ready olayından önce çağrılmalıdır. Eğer sonrasında çağrılırsa işlevsiz kalır. En iyi kullanım yeri jquery kütüphanesi eklendikten sonrasıdır.

Küçük bir örnek yapalım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
<script>
$.holdReady(true); // durdur
$.getScript("deneme.js", function() { // yukle
	$("p").css("background-color", "#f00");
     $.holdReady(false); // devam et
});

$(document).ready(function(e) {
    $("p").css("background-color", "#9C6");
	alert("iki");
});
</script>
</head>

<body>
<p>Deneme.</p>
</body>
</html>

Eklediğimiz deneme.js

// ilk yüklenecek dosya
$("p").css("background-color", "#ff0");
alert("bir");

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

Sayfa yükleme sırası;

1- DOM yani yukarıdaki sayfa <p>Deneme.</p> ve deneme.js dosyası birlikte yorumlanacak. (bir)

2- Sonrasında yükleme sonrası işlemler yapılacak. (iki)

3- $.holdReady(false); sonrasında document.ready içerisindeki kod yorumlanacak. (üç)

Son olarak bir not: birden fazla holdReady kullanımı halinde document.ready olayı tüm holdReady fonksiyonlarının bırakılmasını bekler.

Kaynaklar

4 yorum

CSS3 :target seçicisi

3 May

Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.

:target seçicisi CSS3 ile birlikte gelen yeni seçilerden biri. :target seçicisi doküman içi linklere odaklanmamızı sağlıyor. Daha önce bu işi yapmak için javascript ile yapıyorduk. CSS3’ün bizlere kazandırdığı birçok yenilikte olduğu gibi bu özellikte basit bir şekilde sayfalarımıza güzel etkiler kazandırır. :target sözde sınıfı :hover seçicisi gibi dinamik bir seçicidir.

h3:target {
background-color: #ff0
}
Browser Uyumu:
Internet Explorer 9+ ;
Firefox 1+ ;
Safari 3.1+ ;
Opera 9.5+;
Chrome 2+

Sayfa içi bağlantıları nasıl yaptığımı hatırlayalım.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hedef Trabzon</title>
<style>
body {
 width:550px;
 margin:0 auto;
 font:14px/1.5em Arial, Helvetica, sans-serif;
 border-color:#C03;
 border-style:solid;
 border-width:20px 5px 50px 5px;
 padding:20px
}
div {
 border:1px solid #06F;
 margin-bottom:15px;
 padding:10px;
 border-radius:15px;
 -moz-border-radius:15px;
 -webkit-border-radius:15px;
}
div:target {
 -moz-box-shadow: 0 0 10px #9c9c9c;
 -webkit-box-shadow: 0 0 10px #9c9c9c;
 box-shadow: 0 0 10px #9c9c9c;
 background-color:#D5E3FD;
 border-width:2px
}
</style>
</head>

<body id="tepe">
<h1>Trabzon</h1>
<p><a href="#b1">Coğrafya</a> | <a href="#b2">Nüfus</a> | <a href="#b3">Tarihçe</a> | <a href="#b4">Toplum ve Kültür</a></p>
<p>Trabzon, Karadeniz Bölgesi'nin Doğu Karadeniz bölümünde yer alan merkezii bir şehirdir....</p>
<div id="b1">
  <h3>Coğrafya</h3>
  <p>Dar bir sahil şeridinin ardında denize dikey uzanan dağlık bir araziye sahip olan ilin merkezi Boztepe (antik Minthrion tepesi) üzerine kurulmuştur. İl topraklarının % 22,4 yayla, % 77,6 si ise tepelerden oluşmaktadır. <strong>Dereler</strong> Değirmendere (Piksidis), Yanbolu, Fol, Ağasar, İskefiye, Kalenima, Karadere (Araklı), Küçükdere, Koha, Sürmene (Manahos), Solaklı, Baltacı deresi, Sera Deresi...</p>
  <p><a href="#tepe">yukarı</a></p>
</div>
<div id="b2">
  <h3>Nüfus</h3>
  <p>Toplam nüfusu 765.127'dur. Bu nüfusun yaklaşık %54'ü şehir ve ilçe gibi merkezlerde,%46'sı ise kırsal kesimlerde yani köylerde yaşamaktadır.</p>
  <p><a href="#tepe">yukarı</a></p>
</div>
<div id="b3">
  <h3>Tarihçe</h3>
  <p> Eusebius'a göre şehrin kuruluş tarihini MÖ 756 olmakla birlikte bu iddia Trabzon'u İstanbul, Roma hatta, genel kanıya göre Trabzon ve diğer Doğu Karadeniz kolonizasyonunu gerçekleştiren Sinop'tan daha eski bir kent yapmaktadır...</p>
  <p><a href="#tepe">yukarı</a></p>
</div>
<div id="b4">
  <h3>Toplum ve Kültür</h3>
  <p><strong>Halk</strong> Trabzon halkı adet , yaşam tarzı , gelenek ve görenek bakımından kendine ve yöreye özgü özellikler taşımaktadır...</p>
  <p><a href="#tepe">yukarı</a></p>
</div>
</body>
</html>

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

Benzer yapının yatay kaydırma çubuğu ile olanını yapabiliriz

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

Sayfa içi linklerden farklı olarak name ile değil id ile tanımlanan alanları hedef seçiyoruz. Buda bizi fazla kod yazmaktan kurtarıyor.

Aşağıda bu özellik kullanılarak yapılmış bir iki güzel örneğe link verdim.

Örnek1: Dipnot

Bu özellik wikipedia tarafında dipnoların takibi için çok güzel bir şekilde kullanılmaktadır. http://tr.wikipedia.org/wiki/Trabzon_%28il%29 mesela Trabzon ili hakkında bilgiyi okurken herhangi bir dipnot linkine tıkladığımızda ilgili dipnot ardalan rengi değiştirilerek belirginleştirilmiştir.

ol.references &gt; li:target {
	background-color:#def;
}

Bunun dışında eğlenceli örnekler geliştirilmiştir.

Örnek 2: Basit Akordiyon

http://kaioa.com/b/0903/target_faq_demo.html

#faq>li:target>div{
	display:block;
}

örnekte gizle-göster ile basit bir akordeon içerik yapısı oluşturulabilir.

Örnek3: Galeri

http://kaioa.com/b/0903/target_gallery_demo.html#i1

dt:target+dd{
    display:block;
}
    dt:target img{
    cursor:default;
    border-bottom:5px solid #000;
    border-top:5px solid #000;
    margin-top:401px;
}

Örneğinde ise basit bir galeri yapısı kurulabilir.

Zamanla çok daha güzel örneklerin çıkacağını düşünüyorum.

Kaynaklar

3 yorum

fatihhayrioglu.com 5. seneyi doldurdu

14 Nis

Yazı Fatih HAYRİOĞLU tarafından Haberler kategorisine eklendi.

Geçen sene 49 adet makale yayınlamışım. Amacım daha çok paylaşımda bulunmaktı. Ama maalesef her zaman aynı heveste olamıyor insan. Her sene daha fazla paylaşım yapmak istesem de ancak bu kadar oluyor.

Önümüzdeki sene daha çok HTML5, CSS3, Javascript, Jquery ve mobil platform üzerine paylaşım yapmayı planlıyorum. Zaman bu konuda ne kadar başarılı olduğumuzu gösterecek.

Geçen seneki istatistikler;

  • 49 adet makale
  • 306.423 ziyaretçi sayısı
  • 761.738 sayfa görüntüleme

Toplam 6.253 yorum var sitede. 77.402 çöp yorum engellenmiş.

27 yorum

HTML Dokümanında Javascript Dosyalarını Nereye Koymalıyız?

24 Mar

Yazı Fatih HAYRİOĞLU tarafından Javascript, XHTML kategorisine eklendi.

Javascript’i web sitelerine eklemek

Javascript dosyaları bir web sitesine iki şekilde eklenir. Birincisi satıriçi(inline), ikincisi ayrı bir javascript dosyası hazırlayıp harici olarak eklemek.

İlk javascript’i Hakkı Öcal’ın javascript kitapçığından öğrenmeye başlamıştım.

İlk örnek şöyle idi;

<html>
<head>
<title>Merhaba Dünya!</title>
<script>
function merhaba() //merhaba isimli fonksiyonu deklare ediyoruz
{ //bu, fonksiyonun başlama işareti
alert ("Merhaba Dünya!") //fonksiyonun komutu ve komutun gerektirdiği metin
} //bu fonksiyonun bitme işareti
</script>
</head>
<body>
<b>Merhaba Dünya</b><br>
<form>
<button onclick=merhaba()>TIKLAYINI!</button>
</form>
</body>
<html>

Bu satıriçi kodlamaya örnek olarak verilebilir.

Aynı kodu ayrı bir javascript dosyası olarak hazırlayıp .js uzantısı ile kaydedersek ve bunu html dokümana eklersek buda harici bir javascript dosyası ekleme kısmına girer. 

function merhaba()
{
alert ("Merhaba Dünya! Sene 2011")
}

Bu dosyayı merhaba.js olarak kaydedip, sonra

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Merhaba Dünya!</title>
<script src="merhaba.js">
</script>
</head>
<bodyY>
<b>Merhaba Dünya</b><br>
<form>
<input type="submit" name="button1" value="TIKLAYIN!" onclick="merhaba()">
</form>
</body>
</html>

Şeklinde HTML dokümanına ekleriz.

Yukarıda kullandığımız her iki yöntem ile de aynı sonucu alırız. Harici javascript dosyası ile eklemenin avantajları vardır;

  • Bir dosya ile tüm sitedeki javascript dosyalarını idare ederiz ve güncellemeleri tek dosya ile daha kolay yaparız.
  • Sayfa daha hızlı yüklenir, tek dosya ön belleğe alınınca diğer sayfalarda tekrar tekrar yüklenmediği için sayfalar daha hızlı açılır.

Javascript o günden bu yana daha fazla önem kazandı ve artık javascript kodumuzu en iyi hale getirmek için daha çok zaman harcıyoruz ve bize zaman kazandıracak her durumu inceleyip uyguluyoruz.

HTML dokümanında javascript dosyasını nereye eklemeliyiz?

Web sitelerinin en iyi hale getirmek için çeşitli araçlar ile sitemizi test ederiz. Bunlardan biri Firefox’ın YSlow eklentisidir. YSlow eklentisi ile web sitemizi test ettiğimizde javascript dosyalarımızı html dokümanının sonuna eklememizi öneren bir başlık ile karşılaşırız, burada bu başlığı biraz inceleyeceğiz.

CSS dosyalarının <head> içine konmasının öneren YSlow Javascript dosyalarının HTML dokümanının sonuna(</body>’nin hemen öncesine) konmasını öneriyor. Burada bir çelişki var gibi görünüyor. Buradaki mantık şudur; javascript blokları <head> içine konduğu zaman sayfa ilk açıldığında bu javascript blokları yüklenir ve işlenir. Javascript dosyası yüklenip, işlendikten sonra diğer sayfa üyeleri yüklenir. Javascript dosyası yüklenip işlenmesi bitene kadar sayfa boş bir sayfa olarak görünür, tabi buda istenen bir durum değildir. 

<html>
<head>
<title>Javascript yükleme yeri</title>
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<p>İçerik Burada</p>
</body>
</html>

Sayfa başına konan javascript dosyalarının yüklenme zamanı aşağıdaki grafikte görüldüğü gibidir

Javascript dosyalarını html dokümanın sonuna koyunca sayfa öğeleri tamamen yüklenecek ve sonra javascript dosyaları yüklenecek ve işlenecektir. Böylece ziyaretçi sayfayı açtığı anda görsel öğeler yüklenecek ve ziyaretçi sayfa içeriğini görecektir ve sonra javascript yüklenecek ve işlenecektir.

Paralel Yükleme

Bir diğer problem ise javascript dosyaları paralel yüklemeyi bloklar. Paralel yükelemeyi şöyle açıklayabiliriz; web sitemiz yüklenirken her öğe tek tek yüklemek yerine iki ve daha fazla yükleme, yani paralel olarak yükleme yapabiliyoruz. HTTP/1.1 şartnamesinde her barındırma servisinden(hositng) iki paralel yüklemeye izin verir, buradan şunuda anlayabiliriz ki farklı barındırma servislerinden ikiden fazla yükleme yapabiliriz. Ancak script dosyaları yüklenirken pararlel yüklemeye izin vermez. Bu durumu göz önünde bulundurarak script dosyalarımızı dokümanın sonuna koyarak sayfamızın daha hızlı yüklenmesini sağlayabiliriz.

Uygulanamayan Durumlar

Bazı durumlarda script dosyasını dokümanın altına koymamız mümkün olmaz. Örneğin script içinde documen.write ile doküman içine bir şey eklememiz gerektiğinde. Ancak bu durumlar içinde bazı çözümlerin olduğu aklımızın bir köşesinde kalsın.

defer Özelliği

HTML4 ile birlikte <script> etiketi içine defer özelliği eklenmiştir. defer özelliği tanımlanmış script dosyaları hemen uygulanmayıp tüm sayfa yüklendikten sonra yüklenir ve çalıştırılır. Bu özelliği İnternet Explorer 4+ ve Firefox3.5+ desteklemektedir. 

<script type="text/javascript" src="script1.js" defer></script>

şeklinde kullanılır. Bu dosyayı html dokümanının istediğimiz yerine koyabiliriz. Tüm tarayıcıların desteklmemesi kullanımı konusunda bizi biraz düşündürüyor.

Sonuç

Sonuç olarak javascript dosyalarımızı html dokümanımız sonuna koymak web sitelerimizin daha hızlı açılmasını sağlayacak bir yöntemdir.

Kaynak

19 yorum

Firefox 4

22 Mar

Yazı Fatih HAYRİOĞLU tarafından CSS, Haberler, HTML5 kategorisine eklendi.

Mart ayı internet tarayıcıları için bayağı yoğun geçiyor. Mart’ın başlarında Google Chrome 10 çıktı, Chrome o kadar sık sürüm geçiyor ki ne zaman 10 oldu anlayabilmiş değilim. Opera’da ise bu duruma biraz daha buçuklu bir cevap verdi Opera 11.10 sürümünü beta olarak yayınladı. Ardından uzun süredir beklenen İnternet Explorer 9 çıktı, normal kullanıcı isteklerini karşılayan bizim gibi geliştiricileri yine eksikleri ile düşündüren bir sürüm. Son olarak bu gün Firefox 4 çıktı. Burada sizlere FireFox 4’ün yeniliklerinden bahsedeceğim. Firefox 4’de aslında başta 3.7 olarak adlandırıldı sonra geçen sene çıkacaktı direkten döndü derken mart’a kadar bekletti bizi.  Yeni özellikleri inceleyelim.

Yenilenen Arayüz

Yeni nesil bir çok tarayıcıda gördüğümüz içeriğe daha fazla alan bırakan yeni tasarım kabulünü Firefox 4’de de görüyoruz. İnternet Explore 9’da dediğimiz gibi hepsi ortalama olarak doğru yolu buluyor.

Daha derli toplu bir arayüze kavuşmuş Firefox4. Gerçi o kadarda problememiz yoktu arayüzü ile ilgili, ama yenilenmiş daha hoş olmuş. Sekmeler Chrome’daki gibi üste alınmış. Ana bir Menü Sağ üst köşeye Firefox başlığı ile eklenmiş. Ana Sayfa ve Yerimleri arama kutusu yanına yerleştirilmiş. Ayrıca Yeni Eklenti Düzenleme arayüzü eklenmiş.

Performans

Bencee en büyük artıyı hızdan, performanstan yana olmuş. Bellek kullanımda uzun süreli kullanımda şişmeler oluyor ve can sıkıcı sonuçlar doğruyordu. İlk kullanım deneyimlerime göre gayet başarılı bir gelişme olmuş bu konuda. Google Chrome’un öncülüğünde artık tüm tarayıcıların önceliğini hız konusuna veriyor. Bence bu güzel bir gelişme.

Yenilenen javascript motoru(Jägermonkey) ve HTML5 motoru sayesinde bir önceki sürüme göre 6 kat daha hızlı olduğunu söylüyor Mozilla. Bunu kullanırken hissediyorsunuz. Ayrıca “hardware acceleration” sayesinde hızlanma daha fazla hissediliyor. İnternet Explorer 9’dan hatırladığımız bu özellik grafik işlemciyide devreye sokuyor.

Eklentileri güncellemeleri arkaplanda yükleyerek eklentilerin eski sürümlerdne dolayı yavaşlamasını engelliyor. Eklenti güncellemeleri sonrası tarayıcı kapatıp açmaya gerek yok artık.

Yeni Sekme Özellikleri

Panorama özelliği sayesinde çok fazla sekme kullanan kullancılar için bir düzeni sağlamak artık daha kolay olacak.

Sekmeli yapıya geçtikten sonra bir çok insan sekmelere alıştı, bunun sonucu olarakta sekmeleri düzenleme ihtiyacı duydular. Bu ihtiyacı çok iyi gören Firefox mart ayındaki bu yeni tarayıcı sürümleri içinde belki en iyi özelliği kullanıcılarına sundu.

Ayrıca sekmeleri sabitleme özelliğide eklendi. Daha önce Chrome’dan alışık olduğumuz uygulama sekmeleri sabitleme özelliği artık Firefox’da da var. Çok kullandığımız özellikleri veya uygulamaları sabitleyerek devamlı göz önünde tutuyoruz. Sabitlenen sekmeler görüntü olarakta sadece ikonları görünür kalıyor, bölylelikle fazla yer kaplamıyor.

Senkronize Firefox (Firefox Sync)

Daha önce eklenti olarak sunduğu bu özelliği artık program içinde geliyor. Farklı araçlar ile internete girenler için ve farklı yerlerde tarayıcısının özelliklerini her kullandığı yere taşımak isteyenler için güzel bir özellik. Tüm tarayıcı bilgileriniz ve ayarlarınızı her kullandığınız yerden erişmenizi sağlıyor bu özellik.

Web Standartları Desteği Arttı

  • HTML5 yorumlama motoru geliştirildi,
  • HTML5 Form elemanları, form doğrulama ve form özellikleri desteğini arttırıldı,
  • HTML 5 Yapısal elemanları desteği sunuyor. <article>, <section>, <nav>, <aside>, <hgroup>, <header> ve <footer>,
  • HTML5 hidden özelliğini destekliyor,
  • Yeni HTML5 özelliklerini destekliyor: <mark>, <figure> ve <figcaption>,
  • WebSocket APı desteği sağlıyor,
  • WebGL desteği sunuyor,
  • Google’un çıkardığı WebM video formatı desteği sunuyor,
  • SVG animasyonu SMIL desteği sunuyor,
  • Medya elementlerinin(video, audio) buffered özelliğini destekliyor,
  • Medya elementlerinin(video, audio) preload özelliğini destekliyor,
  • CSS geçiş(transitions) özelliği desteği sunuyor,
  • Matematiksel işlemler yapmayı sağlayan -moz-calc özelliği desteği sunuyor,
  • CSS dokunma özellikleri desteği sunuyor,
  • -moz-font-feature-settings, -moz-tab-size, resize özelliklerini destekliyor
  • CSS3 :-moz-handler-crashed, :-moz-placeholder, :-moz-submit-invalid, :-moz-window-inactive, :invalid, :optional, :required ve :valid sözde sınıflarını ve :-moz-focusring sözde seçici desteği sunuyor
  • -moz-background-size yerine background-size, -moz-border-radius yerine border-radius ve -moz-box-shadow yerine box-shadow isim değişikliklerini yapıyor
  • Firebug’dan alışık olduğumuz Web Konsol özelliğini sunuyor

Diğer Özellikler

Beni izleme(Do Not Track) özelliği eklenmiş,  Çoklu dokunma özelliği ve daha güvenli gezintiler için bazı özellikler sunuyor. Ayrıca Chrome’dan alışık olduğumuz otomatik güncelleme özelliği ile biz indirmeden yeni sürümler kurulacak artık. Bu özellik tüm tarayıcılara gelirse çok güzel olur.

Sonuç

Mart ayı tarayıcılar için kendilerini gösterme zamanı olarak geçiyor. Her yeni özellik bizi heyecanlandırıyor. Gelişen web teknolojilerine ayak uyduran tarayıcılar ayrıca yeni ve kullanışlı özelliklerde sunuyor. Firefox’un hız sorununu bu sürümde düzelttiği kanısına varsam da uzun süreli kullanımlardaki performansını görmeden kesin bir şey söylemek zor.

Firefox’a FireBug ile olan göbek bağım nedeni ile benim için Firefox birincil tarayıcımdır ve bu yeni sürüm ile birlikte bu daha çok pekişecektir.

Son olarak rekabet güzel şey.

Yeni nesil tarayıcıların Hız testi http://lifehacker.com/#!5784396/browser-speed-tests-firefox-4-internet-explorer-9-chrome-11-and-more

Kaynaklar

16 yorum

CSS ile Hiyerarşik Yerimi(Breadcrumbs) Yapmak

17 Mar

Yazı Fatih HAYRİOĞLU tarafından CSS, Web Standartları, XHTML kategorisine eklendi.

Kodladığım bir çok sitede eğer site alt sayfalar ve onlarında alt sayflarında oluşan karmaşık bir yapıya sahip ise genelde kullanıcıya nerede olduğu göstermek için hiyerarşik linkler kullanırız. Bunu hiyerarşik yerimi olarak isimlendirmek bana daha mantıklı geldi. Amaç web sitemizin kullanılabilirliğini arttırmaktır.  Kullanıcıya bulunduğu sayfa hiyerarşik yapısıda gösterilerek daha kullanışlı bir erişim ve kullanım sağlanır. Ayrıca arama motorlarını taramaları içinde sitemize artı değer katar. Kullanıcıya her seviyeye kolayca geçiş imkanı sağlar.


En çok örnek verilen site:  apple.com


Basit yapılı bir yerimi: bonus.com.tr


Basit yapılı bir örnek daha: http://turkcetwitter.livego.com/


Farklı renkte bir uygulama: http://www.ligonier.org/rym/


Farklı Tasarımda bir uygulama: http://www.ideo.com

Yukarıda bir kaç örneğini verdiğim görüntülerde görüldüğü gibi bir çok şekilde uygulamaya geçirilebilir.

Sadede gelelim ve biz kendi hiyerarşik yerimimizi yapalım.

HTML kodu;

<ul id="yerimi" class="kapsul">
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Birinci alt Menü</a></li>
    <li><a href="#">İkinci alt Menü</a></li>
    <li><a href="#">Üçüncü alt menü</a></li>
    <li>Bulunduğumuz sayfa</li>
</ul>

Gelelim CSS kodumuza, liste başlangıç değerlerini sıfırlayalım. Listelerin başındaki sabit yuvarlak ikonları kaldırıp, etrafındaki boşlukları kaldıralım.

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

Listeyi yatay yapmak için float:left tanımı yapıyoruz. İnternet Explorer 6 için bağlantıya da float:left atamamız gerekecek.

ul#yerimi li { float:left; font:12px Arial, Helvetica, sans-serif; line-height:30px; padding-left:15px; font-weight:bold }

Bağlantılara şeklini verelim ve görselliğini düzenleyelim.

ul#yerimi li a { display:block; float:left; color:#0086C0; text-decoration:none; height:30px; font-weight:normal }
ul#yerimi li a:hover { text-decoration:underline }

Her kademe arasına ayraç koyalım. Burada şöyle bir ipucu var ki, oda bulunduğumuz sayfaya link koymuyoruz ve bu sayede araya koyacağımız ayraçları sadece linklere vererek kolayca çözüm sağlıyoruz.

ul#yerimi li a { display:block; float:left; color:#0086C0; text-decoration:none; background:url(bc_separator.png) top right no-repeat; height:30px; padding-right:15px; font-weight:normal }

Son olarakta tüm alana bir ardalan resmi koyup birde kenar çizgisi ekleyelim. 

ul#yerimi { border:1px solid #cacaca; background:url(bc_bg.png) 0 0 repeat-x }

Bu eklemeyide yapınca Float Uygulanmış Elementleri Tam Kapsayamama (clearfix) sorunu ile karşılaşırız. Çözüm linkteki gibidir. sonuç olarak CSS kodumuz; 

.kapsul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.kapsul { display: inline-block; }
/*IE-mac de bu bolumu sakla \ */
* html .kapsul { height: 1%; }
.kapsul { display: block; }
/* IE-mac bu bolumu saklam artik */

ul#yerimi { border:1px solid #cacaca; background:url(bc_bg.png) 0 0 repeat-x }
ul#yerimi, ul#yerimi li { list-style:none; margin:0; padding:0; }
ul#yerimi li { float:left; font:12px Arial, Helvetica, sans-serif; line-height:30px; padding-left:15px; font-weight:bold }
ul#yerimi li a { display:block; float:left; color:#0086C0; text-decoration:none; background:url(bc_separator.png) top right no-repeat; height:30px; padding-right:15px; font-weight:normal }
ul#yerimi li a:hover { text-decoration:underline }

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

Kaynaklar

10 yorum

Sayfa 6 - 101« İlk...45678...203040...Son »

Son yazılar

Kategoriler


Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.