‘menü’ etiketi için sonuçlar

CSS ile Hiyerarşik Yerimi(Breadcrumbs) Yapmak

Mart 17th, 2011 • 10 yorum CSS, Web Standartları, XHTML
Etiketler: , , ,

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

Çift çizgili ayraç kullanımı

Temmuz 30th, 2010 • 8 yorum CSS, XHTML
Etiketler: , , ,

Genelde menülerde kullanılan bir durumdur bu. Menü öğelerini ayırmak için araya çizilen çizgilerin iki farklı renkte olması durumunda nasıl bir çözüm üretmek gerektiğine dair bir ipucu. Bazen resim olarak kullanıyorum, ama bazende soldaki öğenin sağ kenar çizgisine bir renk, sağdaki öğenin sol kenar çizgisine farklı bir renk atayarak çözüm üretmeyi deniyorum. 

/* clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

ul{ margin:0 auto; padding:10px; background-color:#008bc6; width:450px;}
    ul li{ list-style:none; float:left; border-right:1px solid #046e9b; border-left:1px solid #05a3e6;}
        ul li a{ display:block; text-decoration:none; color:#fff; font:bold 12px Arial, Helvetica, sans-serif; margin-right:10px; padding:0 10px}

HTML

<ul class="clearfix">
   <li><a href="">Bak postacı</a></li>
    <li><a href="">geliyor</a></li>
    <li><a href="">selam veriyor</a></li>
    <li><a href="">her kes ona bakıyor</a></li>
</ul>

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

İlk öğenin solundaki kenar çizgisi ile son öğenin sağ kenar çizgisini kaldırmak için bu öğelere sınıf atamalıyız ve bu kenar çizgilerini sıfırlamalıyız.

    ul li.ilkOge{ border-left:0;}
    ul li.sonOge{ border-right:0;}

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

Bu uygulamayı dikey menü olarakta yapabiliriz.

ul{ margin:0 auto; padding:10px; background-color:#008bc6; width:200px;}
ul li{ list-style:none; border-top:1px solid #046e9b; border-bottom:1px solid #05a3e6;}
ul li.ilkOge{ border-top:0;}
ul li.sonOge{ border-bottom:0;}
   ul li a{ display:block; text-decoration:none; color:#fff; font:bold 12px Arial, Helvetica, sans-serif; margin-right:10px; padding:10px 0}

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

Bu yazıyı yazmaya karar verdiğimde “css ile buton yapmak” adlı yazının hazırlıkları da devam ediyordu, oradada butonları araştırırken Firefox’un sitesinde uyguladığı bir metot bu konuyu ilgilendiren bir metot olduğunu gördüm. Onuda buraya yazayım. Ancak bu metot İnternet Explorer’da çalışmayacaktır.

HTML kodu

<a href="">+ <span>Çizgili buton</span></a>

CSS kodu

a{
    background-color:#ed145b;
    padding:5px 10px;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    font-size:16px;
}
a span{
    border-left:2px groove rgba(144, 71, 95, 0.55);
    display:inline-block;
    padding-left:6px
}

Koda biraz açıklama getirelim. border’a verilen groove özelliği bizim istediğimiz etkiyi yapan bir özelliktir. Bu özellik ile eklenen çizgiler gri renklidir. Biz bu çizgiye biraz saydamlık kazandırıp zemin rengine uyum sağlamasına yarar.

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

display:inline elemanlar arasındaki doğal boşluklar

Temmuz 14th, 2010 • 8 yorum CSS, XHTML
Etiketler: , , ,

Daha önce gözüme çarpmamış olmaması ilginç geldi. Belki çarpmıştırda ben es geçmişimdir. Durumu şöyle açıklayayım. Basit bir menü oluşturmak istedim.

<ul>
  <li>deneme</li>
  <li>olarak</li>
  <li>bir örnek </li>
</ul>

Yatay bir menü olacağı için 

  ul li{display:inline;}

eklemesini yaptım, daha sonra da padding değerleri ekleyince fark ortaya çıktı. 

  ul li{ padding:0 12px; background-color:#999}

İşin aslı İnternet Explorer 6 ve 7’de istediğim gibi olurken yeni nesil tarayıcılarda arada fazladan boşluklar atanmış gördüm. margin:0 değeri atadım ama olmadı biraz araştırınca gördüm ki display:inline elemanlar(display:inline-block’ta da oluyor) arasında kod kısmında boşluk varsa bu boşluklar yorumlanan sayfada da görünüyor.

Aradaki boşlukları kaldırmak için bir kaç yöntem var. Yatay menü oluşturmak için diğer bir yöntem olan float yöntemini denemek bunlardan biri

  ul li{ float:left}

Diğer bir çözüm yolu ise aradaki boşlukları kaldırmak.

<ul>
 <li>deneme</li><li>olarak</li><li>bir örnek </li>
</ul>

IE8 Açılır Menü İçindeki Input Alanı Üzerince Gelince Menü Kapanma Sorunu

Şubat 26th, 2010 • CSS, jquery, XHTML
Etiketler: , , ,

Sorun tam olarak şu; açılır bir menü eğer bir resim üzerinde ise menü içindeki input alanı üzerine gelince menü istem dışı olarak kapanıyor. Diğer hiç bir tarayıcıda sorun yokken ie8 bu durumda sorun oluşturuyor.

İnternet Explorer’ın sorunlarına alışmış bu bünye Microsoft’un bu yeni nesil eskimiş tarayıcısından böyle bir sorun olmasını yadırgamadı açıkçası. Soruna ie7 gibi yorumlama kodunu ekleyerek çözmek istedim ama kod sitenin dinamik kısımlarında çalışırken statik kısımlarında çalışmadı.

Bu iş ile bir projede karşılaştım, proje ismini açıklamak sakıncalı olabilir diye ben size benzer bir örnek kodunu vereceğim. 

<!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>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
	$('a').hover(function(){
		$(this).children(':last').show();
	},
	function(){
		$(this).children(':last').hide();
	});
 });
</script>
<style type="text/css">
a{ position:relative;}
	a div{display:none; padding:20px; background-color:#999; width:250px; position:absolute; top:18px; left:0}
		a div input{ background:transparent}
</style>
</head>

<body>
<a href="javascript:;">menu aç
<div><input type="text" /></div>
</a>
<p><img src="http://www.fatihhayrioglu.com/wp-content/ie7_kaydirma_cubugu.jpg" width="450" height="398" /></p>
</body>
</html>

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

Bende sorunu araştırmaya başladım ve sonunda buldum. Sorun input‘a atanan background:none veya background:transparent tanımlamalarından kaynaklanıyor. backgorund’a renk veya resim tanımı yapınca sorun çözülüyor.  

Ben tasarıma uymak için background’a resim tanımlayarak sorunu aştım.

Kaynak

11 Eylül 2008 web’den seçme haberler

Eylül 11th, 2008 • Haberler
Etiketler: , , , , , , , ,

  • jQuery ile yapılmış güzel bir efekt. Bağlantı
  • FireFox, Opera ve Webkit’den sonra Internet Explorer’da kendi özel ön ekini CSS özelliklerine eklemiş. Bağlantı
  • Partilerin İnternet Stratejileri – hasanyalcin.com Bağlantı
  • TechCrunch50′den ilk gün izlenimleri – webrazzi.com Bağlantı
  • CSS ile Konumlandırma ilgili güzel bir ipucu uyugulama. Bağlantı
  • WordPress 2.6.2 sürümü çıkmış yükselttim. Yaklaşık 5 dakikamı aldı. Bir sorun görünmüyor.
  • Form girdi alanlarını maskelemk için jquery ile yapılmış bir script. Bağlantı
  • CSS sıfırlama teknikleri hakkında güzel bir makale. Bağlantı
  • Google Chrome’dan beklenen 10 şey. Bağlantı
  • Web kod yazarları için 20 Firefox eklentisi. Bağlantı
  • Güzel <hr> örnekleri. Bağlantı
  • Neden Webkit yükselirken Mozilla düşüşe geçti. Bağlantı
  • CSS 3.0 çalışmalarını sürdüren grup kenarlık(border) ve ardalan(background) üzerine son çalışmalarını tamamlamış. Bağlantı 
  • Tek tıklama ile dosya göndermek için jquery eklentisi. Bağlantı 
  • jQuery ile menü elemanlarına efekt vermek. Bağlantı 
  • WordPress Temanızdan Silebileceğiniz 13 Etiket – alemsite.com geçen haberlerde bahsettiğim konuyu Selman Kara Türkçeye çevirmiş. Bağlantı

13 Mayıs 2008 web’den seçme haberler

Mayıs 13th, 2008 • 6 yorum Haberler
Etiketler: , , , , , , , , ,

  • Doğrulamadan geçen bir saydamlık uygulaması. Bağlantı
  • Güzel bir menü örneği(mootools ana sayfasındaki gibi) jquery yardımı ile yapımını anlatan bir makale. Bağlantı
  • Arama motorlarına uygun siteler yapmak için güzel uyarılar. Bağlantı
  • “DOM (Document Object Model/Belge Nesne Modeli)” – Berker Peksağ Bağlantı
  • “Web tabanlı Trojan Nasıl Yapılır?” – Azer Koçulu Bağlantı
  • “WordPress Türkçe 2.5.1″ – wordpress.tr Bağlantı
  • Blog ödülleri sahiplerini bulmuş. Bağlantı
  • Opera Drangfly çıkarmış. Firefox Firebug benzeri bir araç. Bağlantı
  • ““Güvenilir Yorumcular” isminde bir WP eklentisi yazdım” – eburhan.com Bağlantı
  • “İnternet’te Reklam ve Banner Standartları” – Hasan Yalçın Bağlantı
  • “Yeni PR Güncellemesi ve MMistanbul’un Büyük Başarısı” internetdevri.com Bağlantı
  • ” Dreamweaver ile Hızlı Menü (Jump Menu) Yapımı” t-infection.com Bağlantı

« Önceki 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.