‘menü’ etiketi için sonuçlar
Çift çizgili ayraç kullanımı
Temmuz 30th, 2010 • 6 yorum CSS, XHTML
Etiketler: çift çizgi, grove, menü, rgba
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 • 7 yorum CSS, XHTML
Etiketler: boşluk, display:inline, display:inline-block, menü
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, XHTML, jquery
Etiketler: ie8, input, menü, sorun
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: CSS ön eki, css3.0, Google Chrome, ie, jquery, Konumlandırma, menü, upload, WordPress
- 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: arama motoru, Blog Ödülleri, css doğrulama, google pagerank, Macromedia-Dreamweaver, menü, Opera, reklam, trojan, WordPress
- 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ı
21 Nisan 2008 web’den seçme haberler
Nisan 21st, 2008 • 4 yorum Haberler
Etiketler: ASP.NET, css başlangıç dosyası, dinamik css, gmail, google pagerank, jquery, kısayollar, menü, resim galerisi, web-form
- Asp.net MVC kaynak kodları yayımlandı. MVC üzerine bir makale. Bağlantı
- Asp.net MVC ile adım adım kod yazmak. Bağlantı
- CSS ve javascript ile yapılan çok sevimli menüler. Bağlantı
- Web formların farklı ve güzel alternatifler. Bağlantı
- Zaman kazandıracak 10 Gmail ipucu. Bağlantı
- jquery ile zebra tablolar yapmak. Bağlantı
- CSS başlangıç dosyaları üzerine farklı bir değerlendirme. Bende katılmıyor değilim.Bağlantı
- Google PageRank değerlerini nasıl belirliyor. Bir çok kişi bu konu üzerinde kafa yoruyor. Google’dan bir açıklama, ama biraz politik bir açıklama gibi. Bağlantı
- Mootools 1.2 kullanarak dinamik CSS kodu eklemek. Bağlantı
- CSS anaçatıların listesi. Bağlantı
- Asp.net sayfalarımızda klavye kısa yollarını kullanmak. Bağlantı
- 21′den fazla ajax/javascript ile yapılmış resim galerisi. Bağlantı
