Arayüz Geliştiricilerin Görev Tanımı adlı yazımda arayüz geliştiricilerinin görevlerini tanımlarken aşağıdaki metni kullandık.

• Yenilikçi: Web mecrasındaki gelişmeleri takip etmeli ve uygulamalarında bu yenilikleri gerektiğinde kullanmalıdır.

Çok önemli ve üzerinde durulması gereken bir noktadır bu. Birçok arayüz geliştiricide maalesef bu konu hakkında çaba göstermiyorlar ve buda beni üzüyor açıkçası. Bu iş bu meslek yenilikçi, hızlı gelişen bir meslek diyoruz, o zaman yenilikleri takip etmeliyiz.

Aslında yapmamız gerekende öyle çok zor bir şey değil. Her güne başlarken bilgisayarımızın başına geçtiğimizde belirli siteleri sırası ile takip edip, zamanımız varsa okumak yoksa işaret koyup geçerek sonraya bırakmak gerekir. Eskiden bu iş zordu tek tek her siteyi aç falan şimdi RSS denilen bir şey var, aslında uzun süredir var. Bizi her siteyi tek tek dolaşma derdinden kurtarıyor ve hız ve zaman kazandırıyor.

RSS’lerimizi takip etmemizi, organize etmek için bir programa gerek duyuyoruz, aslında bunu birçok tarayıcıda sağlıyor, ayrıca programlarda var, ama ben burada size Google Reader hakkında bilgi vereceğim.

Google Reader baştan beri kullanıyorum, bu iş için bazı araçları kullanmayı denediysem de kendimi Google Reader’da geri dönmüş buldum. Tek sorunum ara sıra yavaş çalışması. En büyük avantajı ise çevirimiçi bir araç olması sebebiyle istediğiniz yerden erişebiliyorsunuz ve böylecede senkron sorununuz olmuyor.

Derler ya çocukluğunu bilirim diye, gerçekten Google Reader’ı çıktığı ilk günlerden beri kullanıyorum, belkide bu nedenle bırakıp başka bir RSS okuyucuya geçemiyorum. İlk çıktığında çok cılızdı. Özellikleri zamanla eklediler. Arama eklediler, Türkçe desteği eklediler, klasör yapısını eklediler, benzer öneri siteleri ekledir. Yenilik bakımından gayet iyi ancak yavaşlık sorununu bir türlü tam olarak halledemediler.

Google Reader Özellikleri

Çevirimiçi Araç
En büyük avantajı çevirim için olması ve bundan dolayı her yerden erişim imkanı sağlaması

Senkrenizasyon
Çevirim için olduğu için senkronizasyon sorunu olmuyor.

Kolay Kullanım
Google hesabı olan herkes başka bir şeye ihtiyaç duymadan kullanmaya başlıyor.

Scroll ile ilerledikçe feedlerin okundu olarak işaretlenmesini ayarlayabiliyoruz, benim en çok sevdiğim özelliklerinden bir tanesi.

Arama

Tüm RSS’leriniz arama imkanı sunuyor. Nispeten hızlı bir araması var. İlk başlarda yokken bunu farklı araçlarla sağlıyorduk.

RSS’lerimizi Organize Etmek
Klasörleme ve etiketleme imkanı sayesinde rss’lerimizi organize edebiliyoruz.

Taşıma özelliği ile normalde alfabetik sıralanan listeyi istediğim sıralamaya kavuşturabiliyoruz.

Görsel Planı

Google Reader’ın görünümü gayet başarılı. Solda menüde abonelikler listeleniyor, ayrıca sol menü üstünde genel özelliklere erişim sağlıyor, sağda ise feedleri görüyoruz.

Favikon desteği sayesinde siteleri daha iyi tanıma imkanı sağlıyor. Bazı sitelerin favori ikonlarını görmemesi bir dezavantaj.

Alınma ve Yayınlanama zamanını ayrı ayrı gösteriyor olması güzel.

Feedlerin istatistiklerini kendi içinde görmemizi sağlıyor.

Daha sonra okumak için "okunmadı olarak sakla" özelliği var. Ayrıca alttaki yıldız ekle yardımı ile de işaretleyebiliriz.

Genişletilmiş ve Liste Şeklinde feedlerimizi listeleyebiliyoruz, benim tercihim genişletilmiş olarak izlemek ama çok fazla birikince listeye geçebiliyorum.

Stilni değiştirme imkanı veriyor http://www.fabianpimminger.com/playground/google-reader-styles/ adresindeki scriptleri yükleyerek Google Reader’ınızın görünümünü değiştirebilirsiniz.

Klavye Kısayolları
Klavye kısayolları gayet başarılı. Kısayolları listesi Aşağıda en çok kullanılanları listeledim.

Ayrıca gelişmiş bir kısayol çözümleri sunuyor google reader bize

g + u

tuşlarına basarak tüm aboneliklerimizi listelendiği bir popup ekran açılıyor buradan istediğimiz aboneliğin ismini girerek direk erişebiliyoruz örneğin

g + u + fatih:hayri

yazdığınızda eğer benim siteme abone iseniz direk benim rss’ime erişeceksiniz.

Paylaşım

Okuduğumuz yazıyı çok kolay bir şekilde paylaşabiliyoruz.

İstatistikler

Google Eğilimler sayfası sayesinde istatistiklerimizi görebiliyoruz

Dil Seçenekleri

Türkçe dil desteği mevcut. Dilime çevir özelliği ile yabancı dillerdeki RSS’leri izlemek daha kolay, gerçi bu özellik tam randımanlı çalışmıyor.

Öneri RSS’ler

Araştır bölümü altındaki öneriler kısmı gayet başarılı

İçe/Dışa Aktar

Kolay bir içeri ve dışarı aktarma seçeneği ve xml tabanlı bir yapısı olduğu için gayet kolay düzenlene biliyor.

Mobil Araçlarda
Cep telefonu vb araçlarda da kullanılıyor. Ben hiç kullanmadım, o nedenle bu konuda bir yorumum olmayacak.

Çevrimdışı Kullanımı
Google Gear ile internete bağlı olmadan da kullanım imkanı sağlıyor.

RSS olmayan siteleri takip imkanı

Bazı sitelerde RSS olmaya biliyor, bu durumda ne yapacağız, Google Reader bu durumda da bize yardımcı oluyor. RSS olmasa da bir web sitesini ekleyerek takip altına alabiliyoruz. Sitede değişiklik oldukça bize haber veriyor sistem.

Feed Puanı Uygulaması

Son olarakta bir eklentiden bahsedeceğim. Greasmonkey ve PageRank eklentilerini kurup Google Reader’ı açınca okuduğumuz her feed’in başına o sitenin puanını koyuyor, bu sayede belki birçok rss ilk görüşte değerlendirebiliyoruz. Tek dezavantajı yavaş olan Google Reader’ı daha da yavaşlatması.

Abonelik üstü kısmına eklenen turuncu dropdown ile buna göre filtreleme yapabiliyoruz.

Sol üstteki checkbox kaldırılıp işaretlenerek bu özellik kolayca kapatılıp açılabilir.

Google Reader’ı Güncel Tutmak ve Liste Paylaşımı

Ben belli aralıklarla(2-3 ay aralığında) sol menüde üstte yer alana Google Eğilimlerini sayfasındaki Abonelik Eğilimleri kısmındaki "Etkin Değil" kısmını kontrol ediyorum. Burada uzun süre yazı yazmayan ve takibe değer bulmadığım abonelikleri kaldırıyorum.

Google Reader Aboneliklerim

Google Reader’da okuduğum veya daha sonra okumak için işaretlediğim yazıları gerek sitemdeki web’den seçme haberler kısmı ve gerekse friendfeed’den sizlerle paylaşıyorum. Şimdide Google Reader dosyamı paylaşıyorum.

Benim Google Reader Dosyam (.xml)

Google Reader Ayarlar kısmında içeri aktar diyerek ekleyebilirisiniz.

Sonuç

Makale her ne kadar Google Reader kullanımı hakkında olsada burada anlatmak istediğim yenilikleri izlemek ve yararlı gördükleriniz okuyup uygulamanızdır. Örneği bir makalede twitter’ın rss readerların okunma oranlarını geçen seneye göre %27 azalttığını söylüyor. Bizim için RSS olmuş, Google Reader olmuş veya twitter olmuş önemli değil, önemli olan yenilikleri takip etmek ve geri kalmamaktır. Ferruh Mavituna’nın Verimli Bilgi Takibi makalesini okumanızı tavsiye ederim.

Çağın gerisinde kalmayın. Kendinize iyi bakın.

Kaynaklar

• http://www.mitchelaneous.com/2007/01/05/get-more-from-google-reader-guide/ (Google Reader yazıları)
• http://mashable.com/2009/05/19/google-reader-2/
• http://lifehacker.com/5625876/google-reader-cuts-the-clutter-with-fullscreen-mode-new-shortcuts
• http://www.readwriteweb.com/archives/6_ways_to_filter_your_rss_feeds.php (RSS filtreleme)
• http://mashable.com/2007/08/23/google-reader-firefox/ (Firefox eklentileri)
• http://ferruh.mavituna.com/verimli-bilgi-takibi-oku/
• http://www.youtube.com/watch?v=SG6ehDYNCsk&feature=related
• http://lifehacker.com/tag/google-reader/
• http://www.lifehack.org/articles/technology/10-smart-hacks-for-google-reader.html
• http://www.makeuseof.com/tag/7-cool-google-reader-features-which-you-might-have-missed/
• http://gigaom.com/collaboration/5-tips-for-getting-the-most-out-of-google-reader/
• http://googlesystem.blogspot.com/2010/01/track-page-changes-using-google-reader.html
• http://jalaj.net/2009/02/22/3-google-reader-feature-most-people-dont-use/
• http://lifehacker.com/233712/hack-attack-getting-good-with-google-reader
• http://labs.postrank.com/gr

18808 yorumhttp%3A%2F%2Fwww.fatihhayrioglu.com%2Fyeniliklerin-takibi-ve-google-reader%2FYeniliklerin+Takibi+ve+Google+Reader2010-10-22+21%3A49%3A33fatih.hayriogluhttp%3A%2F%2Fwww.fatihhayrioglu.com%2F%3Fp%3D1880

Birçok yuvarlak kenarlı kutu oluşturma tekniği mevcut. Daha önce yuvarlak kenarlı kutuların nasıl yapıldığını anlattım “Yuvarlak Kenarlı Kutular”, ayrıca CSS3 ile gelen border-radius özelliğinden bahsettiğimiz “Yuvarlak kenarlı kutular(border-radius) oluşturmak” makalemizde bahsettik. Şimdide daha farklı belki çok fazla kullanılmayan bir yuvarlak kenar çeşidini nasıl yapacağımızı anlatacağım. Aslında bu birazda göz yanılmasından yararlanarak oluşturulmuş bir yuvarlak kenardır, aslında sağdaki resimde gösterildiği gibi köşe yuvarlak değildir, ancak göze yuvarlakmış hissi vermektedir.

Bu işi aslında resim ile de yapabiliriz, belki daha kolayımıza bile gelir, ancak uygulamadan birçok yerde ve farklı renklerde 1 piksellik yuvarlak kenara ihtiyaç duyunca bu yöntemi tercih ettim.

Yöntemi şöyle anlatabilirim;  bu çözümü üretmek için iki adet içiçe blok-level elemente ihtiyacımız var, dıştaki elemanı üstten ve alttan bir piksel fazlalık eklerken, içteki elemanı sağ ve soldan eksi margin değeri vererek sağ ve solda taşırarak 1 piksellik bir yuvarlak kenar elde ederiz. Bu işlemi iki şekilde yapabiliriz.

Padding ve margin yardımı ile oluşturmak

HTML kodu

<div class="kutu1">
	<p>{ CSS, XHTML ve Javascript }</p>
</div>

CSS kodu

.kutu1{
	background:#3274D0;
	margin:0 1px;
	padding:1px 0;
}
	.kutu1 p{
		background:#3274D0;
		margin:0 -1px;
		padding:2px;
	}

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

Margin ve border yardımı ile oluşturmak

HTML Kodumuz yine aynı

<div class="kutu1">
	<p>{ CSS, XHTML ve Javascript }</p>
</div>

CSS kodumuz

.kutu1{
	background:#848484;
	border:1px solid #848484;
	border-left-width:0;
	border-right-width:0;
	margin:0 1px;
}
	.kutu1 p{
		background:#d3d3d3;
		border:1px solid #848484;
		border-top-width:0;
		border-bottom-width:0;
		margin:0 -1px;
		padding:2px;
	}

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

Butonlarda kullanımı

Bu yöntemleri butonlarımızda da kullanabiliriz.

HTML Kodumuz

<ul>
	<li><a href=""><span>Bursaspor</span></a></li>
    <li><a href=""><span>Trabzonspor</span></a></li>
    <li><a href=""><span>Kayserispor</span></a></li>
</ul>

CSS kodumuz

ul{margin:0; padding:0; width:250px}
ul li{ list-style: none; margin-bottom:5px}
	ul li a{display:block; background:#3274D0; margin:0 1px; padding:1px 0; position: relative; text-decoration:none;}
		ul li a span{background:#3274D0; margin:0 -1px; padding:2px; display: block; color:#fff}
	ul li a:hover{background:#fff;}
		ul li a:hover span{background:#fff; color:#3274D0}

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

Sonuç olarak yukarıda görüldüğü gibi kolay bir kodlama ile 1 piksellik bir yuvarlak kenar elde ettik. Çok fazla çeşitte 1 piksellik yuvarlak kenara ihtiyaç duyduğunuzda imdadınıza yetişir. Bu kodun güzelliği internet explorer sürümlerinde(6,7,8,9) herhangi bir ek koda gereksinim duymadan çalışmasıdır. Bu yöntem aklınızın bir köşesinde kalsın bakarsınız bir gün lazım olur.

Hadi kalın sağlıcakla.

Kaynaklar

• http://dmitry-baranovskiy.tumblr.com/post/34061791/one-pixel-rounded-corners
• http://www.askthecssguy.com/2008/03/one_pixel_notched_corners_as_u.html
• http://www.onderhond.com/blog/work/1px-rounded-corners
• http://www.alistapart.com/articles/mountaintop/

18727 yorumhttp%3A%2F%2Fwww.fatihhayrioglu.com%2Fresim-kullanmadan-1-piksellik-yuvarlak-kenarli-kutu-olusturmak%2FResim+Kullanmadan+1+piksellik+Yuvarlak+Kenarl%C4%B1+Kutu+Olu%C5%9Fturmak2010-10-20+19%3A46%3A05fatih.hayriogluhttp%3A%2F%2Fwww.fatihhayrioglu.com%2F%3Fp%3D1872

Friendfeed’de bir serzenişim üzerine Fatih Turan’ın bir cevabı hafızamdaki !important bilgilerimin yeterli olmadığını gösterdi bana ve bu konuda biraz araştırma yapma gereği duydum ve burada bu araştırma sonuçlarını paylaşmak istedim.

!important’ı anlamak için CSS’de etkinliğine bir göz atmalıyız. Daha önce yazdığım bir konu bu “CSS’de Tanımlamalar ve Etkinlikleri(Specificity)” ayrıntılarını bu yazıdan okuyabilirsiniz. CSS’de etkinlik tanımını tekrar hatırlatalım; CSS’de etkinliğin anlamı stil çatışması(aynı elemente birden fazla tanım yapıldığında) olduğunda kullanılan hangi kodun web tarayıcıları tarafından yorumlanacağını belirlemektir. Her css tanımını bir sayısal değeri vardı ve benzer tanımların yapıldığı bir elemanda bu sayısal değeri büyük olan tanımı elemana etki edecektir.

Peki, biz sayısal değeri küçük olan tanımın etkin olmasını istersek ne yapabiliriz? Bu sorunun cevabı ve bu ihtiyacı karşılayan tanım !important tanımıdır. Bir örnekle durumu gösterelim

<ul class="menu">
    <li>Menü 1</li>
    <li>Menü 2</li>
    <li>Menü 3
        <ul>
          <li class="deneme">Alt Menü</li>
        </ul>
    </li>
    <li>Menü 4</li>
</ul>

CSS kodumuzda aşağıdaki gibi olsun

ul.menu li{
	background-color:#3CF;
}

li.deneme{
	background-color:#f00;
}

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

Kodumuza göre tüm li background rengi #3CF olsun ama .deneme sınıfı tanımladığımız li’nin ki kırmızı olsun diyoruz, ancak sonuç istediğimiz gibi olmuyor.

Firfox’un eklentisi Firebug’u durumu bize açıkça gösteriyor. Üzeri çizilen tanım altta kalırken üstteki tanım elemana uygulanmaktadır.

Seçici adına üst eleman adlarını ekleyerek etkinliği arttırma

Burada bizim kendi istediğimiz sonucun oluşması için bir iki yöntem bulunmaktadır. Bir tanesi istediğimiz atamanın üste çıkması için seçici değerini arttırmak, yani örnek kodumuzda bu li.deneme yerine ul li.deneme şeklinde yaparak seçici etkinliğini arttırarak yapmaktır.

  ul.menu li.deneme{
  background-color:#F00;
  }

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

Bu kod bizi çözüme ulaştıracaktır, ancak bazen bu çözüm çok can sıkıcı haller alabiliyor. Büyük projelerde çok sık rastladığımız bir sorun.

important! tanımı ile etkiliği arttırma

Diğer bir çözüm ise etkin olmasını istediğimiz tanımın sonuna kardeşim bu önemli bunu etkin yap demek, yani sonuna !important eklemek ile olur.

li.deneme{
   background-color:#f00 !important;
}

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

İE6 için important ile hack yapmak

Şimdi gel gelelim important tanımının ie6 ile olan problemine ve benim yanlış anlamama.

Eğer yukarıdaki gibi bir tanımlama var ise yani tek bir özellik ve bu özelliğe atanmış important tanımı var ise ie6 sorun çıkarmıyor. İşte benim yeni öğrendiğim bilgi bu.

Peki, sorun nasıl çıkıyor derseniz. İE6 eğer bir normal tanım var ise ve birde important tanımı bulunuyorsa, aynı özellik iki kere tanımlandı ise bu importantlı tanımı ie6 uygulamıyor. Bunu ie6 hack için kullanılabilir. Bunu ie6 hack için kullanılabilir. Zamanında bir yazıda yazmıştım bu konuda http://www.fatihhayrioglu.com/css-de-kodumuzu-ieden-gizleme/ Aslında burada ie6’nın bir sorununu avantaja çevirmiş oluyoruz.

Satıriçi kodları Ezmek için important kullanımı

Bazı durumlarda htmle müdahele imakanımızın olmadığı durumlarda veya acil bir düzeltme gerektiğin genelde lazım oluyor important tanımı. Eğer html içinden bir tanım yapıldı ise css ile yaptığımız hiç bir tanım satıriçi kodu ezemiyecektir. Tek çare important tanımıdır.

<ul style="background-color:#3CF">
	<li>Deneme</li>
<ul>

Tanımı olsun biz bu elemanı background rengini değiştirmek istersek sadece important ile değiştirebiliriz.

li.deneme{
   background-color:#f00 !important;
}

Tanımı li elemanının background rengini kırmızı yapacaktır.

Son bir ipucu olarak şu cümleyi söyleyelim. CSS kısaltmalarına yapılan important tanımı kısaltması yapılan özelliklere tek tek yapılmış gibidir.

Sonuç

important tanımı çok tercih edilen bir özellik değildir, nadiren de olsa lazım olur. Bazen çok can kurtarır. Çok fazla yerde kullanmak kodunuzu okunaksız hale getirebilir, buna dikkat etmek gerekir.

Fatih Turan’a teşekkürler bilgilendirme için.

Kaynaklar

• http://bytesizecss.com/blog/post/ie6-and-the-important-rule/
• http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/
• http://www.electrictoolbox.com/using-important-css/
• http://www.webcredible.co.uk/user-friendly-resources/web-dev/css-important.shtml
• http://www.yellowjug.com/web-design/the-importance-of-important-in-css/
• http://friendfeed.com/arayuz-gelistiriciler/120084de/css-yazarken-ustten-gelen-degerleri-ezmek-icin

18666 yorumhttp%3A%2F%2Fwww.fatihhayrioglu.com%2Fimportant-tanimi%2F%21important+Tan%C4%B1m%C4%B12010-10-14+20%3A41%3A28fatih.hayriogluhttp%3A%2F%2Fwww.fatihhayrioglu.com%2F%3Fp%3D1866

Projede karşılaştığım sorunlardan biri textarea elemanı içinde enter’a basınca alt satıra geçmiyordu. Diğer tarayıcılarda sorun yokken ie sürümlerinde böyle bir sorun çıkıyordu.

Sonra incelediğimde ve araştırdığımda bu sorunun benim kullandığım sıfırlama kodundaki bir durumdan kaynaklandığını gördüm.

textarea, input, select {
    font:inherit;
    white-space:normal;
}

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

Sıfırlama kodundaki yukarıdaki kodda white-space:normal; tanımlaması sorunu çıkarıyor. Bu kodu çıkarınca sorun ortadan kalkıyor. Ancak yinede ie’nin textarea’daki white-space:normal; kullanımında sorun oluşturduğu gerçeğini bu ortadan kaldırmıyor.

Bu durumu halletmenin daha düzgün bir yolu var

textarea {
	white-space:pre;
}

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

Tanımıda bu sorunu gidermek için yeterlidir.

Kaynaklar

• http://stackoverflow.com/questions/1282202/enter-does-not-work-in-textarea-in-internet-explorer-8
• http://www.fourmilab.ch/fourmilog/archives/2005-04/000510.html
• http://stackoverflow.com/questions/737614/textarea-css-ie7-and-enter-key-creating-inline-space

18605 yorumhttp%3A%2F%2Fwww.fatihhayrioglu.com%2Fiede-textareada-enter-calismiyor%2FIE%27de+Textarea%27da+Enter+%C3%A7al%C4%B1%C5%9Fm%C4%B1yor+2010-09-30+19%3A22%3A33fatih.hayriogluhttp%3A%2F%2Fwww.fatihhayrioglu.com%2F%3Fp%3D1860

Birçok kişi bu soruyu sordu ve bende belirli aralıklar bu tip bir ihtiyacım oldu, sonunda buraya yazmaya karar verdim. Bu işi sadece CSS kullanarak nasıl yapıldığını yazacağım burada.

Bir kaç yöntem var bu konuda. Burada sabit genişlik ve yükseklikte alanları sayfanın dikeyde ve yatayda ortalı olması durumu yazımı yazacağım. position:absolute metodu denen yöntem ile yazacağız kodu.

HTML kodumuz

<div id="ortalaAlan">
	Fatih Hayrioğlu'nun not defteri
</div>

CSS kodumuz yazmaya başlayalım

html, body {height: 100%;}
body{margin:0; padding:0;}

İnternet explorer için ilk satırı ve body boşluklarını sıfırlamak içinde ikinci satırı yazdık.

#ortalaAlan {
   width: 300px;
   height: 80px;
   background-color:#fff;
   border:5px solid #E9E9E9;
}

Sabit genişlik ve yükseklik veriyoruz ve genel tanımlarımızı yapıyoruz. Şimdi bu alanı ortalamak için kodumuzu yazalım.

#ortalaAlan {
   width: 300px;
   height: 80px;
   background-color:#fff;
   border:5px solid #E9E9E9;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -150px;
   margin-top: -40px;
}

Yukarıdaki kodu incelersek, postion:absolute ve left:50% ve top:50% değerleri ile elemanımızı ortalıyoruz. Bu ortalama elemanımızın sıfır noktası içindir, ancak bizim elemanımızın belirli bir genişliği ve yüksekliği olduğu için bu tam bir ortalama sağlamayacaktır.

Tam bir ortalama için ise elemanın genişliğinin yarısı kadar sola çekmeli ve elemanın yüksekliğinin yarısı kadarda yukarı çekmeliyiz. Bunun için eksi değerli margin-left ve margin-top kullanıyoruz. Bu kodlar elemanımızı dikeyde ve yatayda ortalayacaktır.

Kodumuzu ve içeriğimiz biraz daha süslersek

<div id="ortalaAlan">
	<p>Fatih Hayrioğlu'nun not defteri</p>
</div>

CSS kodumuzu

html, body {height: 100%;}
body{margin:0; padding:0; background-color:#D2D2D2}
#ortalaAlan {
   width: 300px;
   height: 80px;
   background-color:#fff;
   border:5px solid #E9E9E9;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -155px;
   margin-top: -45px;
}
#ortalaAlan p{
    background:url(gudi.gif) 0 0 no-repeat;
    color:##333333;
    font:24px "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding-left:35px;
    margin:10px
}

Border olarak eklediğimiz değerleride çıkardığımız için değerlerimiz -5px daha azalmıştır.

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

Bu kodu tüm tarayıcılar destekliyor.

Kaynaklar

• http://www.joe2torials.com/view_tutorial.php?view=37
• http://perishablepress.com/press/2006/09/18/absolutely-centered-layout/
• http://hicksdesign.co.uk/journal/vertical–horizontal-centering-2
• http://www.456bereastreet.com/lab/centered/both/

18487 yorumhttp%3A%2F%2Fwww.fatihhayrioglu.com%2Fyatay-ve-dikeyde-ortali-alanlar-olusturmak%2FYatay+ve+Dikeyde+Ortal%C4%B1+Alanlar+Olu%C5%9Fturmak2010-09-29+20%3A20%3A23fatih.hayriogluhttp%3A%2F%2Fwww.fatihhayrioglu.com%2F%3Fp%3D1848

Aslında başlığı nasıl atacağımı şaşırdığım için kısa bir başlık attım.

Sorun

Sorunumuz tam olarak anlamak için daha önce anlattığım CSS ile buton yapmak adlı makaledeki görselliği arttırılmış esnek butonu örneğini incelememiz yeterli.

Genelde esnek yapılı bu tip resimli menüler veya butonları oluştururken bir elemana iki background-image atayamadığımız için iç içe iki eleman koyarız. (Sliding Door) esnek yapılar olarak adlandırılan yöntem kullandığımızda başımıza geliyor.

a {
    display:block;
    float:left;
    width:auto; background:url(cancanli_butonlar_ard.gif) 0 0 no-repeat;
    text-decoration:none;
    font-size:14px;
    font-weight:bold
}
a span {
    display:block;
    float:left; background:url(cancanli_butonlar_ard.gif) right -36px no-repeat;
    height:28px;
    width:150px;
    padding:0 20px;
    line-height:28px;
    color:#363636
}

HTML kodu

<a href="#"><span>Örnek Buton Metni</span></a>

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

Diğer tarayıcılarda sorun olmazken ie6 ve ie7’de el işareti yerine normal fare imleci görünüyor.

Aşağıda ie7 ve Firefox görüntüleri yanyana görünmektedir.

IE7 de buton üzerinde normal imleç görünürken Firefox ve diğer tarayıcılarda normal olarak el işareti görüntülenecektir.

Çözüm

Çözümü çok basit tabi

a span {
    display:block;
    float:left; background:url(cancanli_butonlar_ard.gif) right -36px no-repeat;
    height:28px;
    width:150px;
    padding:0 20px;
    line-height:28px;
    color:#363636;
    cursor:pointer
}

cursor:pointer özelliğini eklemek yeterli oluyor.

Bu sorunu niye yazdım? Benim gibi kod yazarken unutuyorsanız hatırlayalım diye. İşin ilginç yanı internette ufak bir araştırma yaptım ama hiç bu sorun ile karşılaşanı görmedim, belki ben tam anahtar kelimeleri bulamadım

1841Yorum yokhttp%3A%2F%2Fwww.fatihhayrioglu.com%2Fie6-ve-ie7de-baglantilardaki-cursor-sorunu%2FIE6+ve+IE7%27de+ba%C4%9Flant%C4%B1lardaki+cursor+sorunu2010-09-28+20%3A24%3A19fatih.hayriogluhttp%3A%2F%2Fwww.fatihhayrioglu.com%2F%3Fp%3D1841