CSS ile Basit Şekilde Fare Üzerine Gelince(Rollover) Resim Değişimi Yapmak

Kasım 10th, 2008 • 12 yorum CSS, Web Standartları, XHTML
Etiketler: fare üzerine gelince, link, resim, rollover

Daha önce bu konuya Resimli Menüler kısmında anlatmıştım, ama orada yapı daha karışık olduğu için anlaşılması ve basit uygulamalara uyarlanması konusunda sıkıntılar oluyordu. Bu işi daha basit bir örnek yardımı ile yapıp daha anlaşılır yapmak için beraber bir örnek yapalım.

Tek resimde işi halletmemiz, resmin sayfa yüklenmesinden önce yüklenmesi sebebiyle fare üzerine geldiğinde herhangi bir resim yükleme işlemini beklemediğimiz için daha akıcı olduğu gibi avantajlarını olduğunu daha önce anlatmıştık.

İlk olarak fare imlecinin üzerine geldiğinde değişecek resmin her iki hali yanyana gelecek şekilde yan yana veya alt alta gelecek şekilde tek resim olarak hazırlıyoruz(aradaki çizgiyi iki resim arasındaki ayrımı göstermek için koydum, normal resimde bu olmayacak)

Xhtml kodumuzu yazalım

<a class="anasayfayaDon" href="anasayfa.htm">Ana Sayfaya Dön</a>

CSS kodumuzu yazalım

a.anasayfayaDon {
    display: block;
    width: 80px;
    height: 80px;
    background: url(images/degisen_resim.gif) 0 0 no-repeat;
    text-decoration: none;
    text-indent:-999px;
}

a:hover.anasayfayaDon {
    background-position: -80px 0;
}

Yöntemi daha önce anlattığımız gibi ardalan kaydırmaca yöntemidir. Hazırladığımız ardalan resminin ilk olarak istediğimiz kısmını gösteriyoruz. Fare imleci üzerine geldiğinde ise yatayda aynı eksende bulunan başlangıçta görünmeyen resmi eksi konum vererek gösteriyoruz.

Örnek sayfayı görmek için tıklayınız

En çok kullandığım CSS Hileleri(Hack)

Kasım 3rd, 2008 • 13 yorum CSS, Web Standartları, XHTML
Etiketler: clearfix, Dreamweaver, float, hileler, Kutu-Modeli, min-height, snippets

Yaklaşık 3-4 senedir css ile web sayfası kodluyorum. CSS ile web sayfası kodlarken en çok sorun çıkaran konulardan biri farklı tarayıcılar için kod yazmaktır. CSS hileleri ile geçiştirdiğimiz bu farklı tarayıcılara göre kod yazma işi bize aslında CSS ile sayfa kodlama imkanı sunması bakımından önemlidir. Eğer CSS hileleri olması idi biz farklı tarayıcılar için değil belirli tarayıcılar için kod yazmış olacaktık ki bu erişebilirlik açısından ve müşteri istekleri açısından sorun oluşturan bir durumdur.

Başta dediğim gibi 3-4 senedir CSS ile sayfa kodluyorum ve en çok kullandığım css hilelerini burada yazmamın uygun olacağını düşündüm. Çünkü birçok bu işi yeni başlayan arkadaş için önemli bir bilgi olacağını düşünüyorum. Lafı fazla uzatmadan listemiz açıklayalım.

Okumaya devam edin »

Firefox 3.1 Yenilikleri

Ekim 21st, 2008 • 7 yorum CSS, Haberler, Javascript, Web Standartları, XHTML
Etiketler: Firefox, font-face, geode, gps, internet, İnternet Tarayıcısı, Javascript, tarayıcı, yazı tipi

Firefox 3.1 Beta1 çıktı. Aslında sadece bir haber değeri taşıyan bir bilgi, ancak Firefox 3.1 ile birlikte bir çok sevindirici gelişmeler getirdiği için dikkate değer bir yenileme. Bir ara sürüm değilde sanki yeni bir sürüm gibi. Yeni özelliklere bir göz atalım. Okumaya devam edin »

Byte-Order Mark found in UTF-8 File.

Eylül 15th, 2008 • 6 yorum Web Standartları, XHTML
Etiketler: karakter, utf-8, w3c, w3c doğrulama

Bazı siteleri w3 kontrolünden geçirirken

“The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.”

hatasını alıyorum. Çözmek için Crimson Editor ile açıp

Document- Encoding Type - UTF-8 Encoding (w/o BOM)

seçip kaydedince düzeliyor. Bilginize

Internet Explorer 6 olmasa hayat daha kolay ve zevkli olurdu

Eylül 10th, 2008 • 19 yorum CSS, Javascript, Web Standartları, XHTML
Etiketler: ie6, internet explorer, İnternet Tarayıcısı

Web kod yazarlarını en çok zorlayan konulardan biri farklı tarayıcılara uyumlu kod yazmaktır. Birinin düzgün yorumladığını diğer farklı yorumlar ve bizim için arayış ve çile başlar, çözünce geçici bir sevinç yaşarız genelde. Farklı tarayıcılara göre kod yazmak bu iş için devamlı bir sorun olarak kalacağını düşünüyorum. Peki bu durumu nasıl aşacağız derseniz, yaşadığım süreçlerden size şunu söyliyebilirimki zamanla aynı hataları aldığımız için çözümü fazla zaman almıyor. Azda olsa farklı hatalarla karşılaşıyoruz, bunlarıda arayıp çözüyoruz. 

Web kod yazarları her zaman bir tarayıcı ile uğraşır. Vakti zamanında Netscape Navigator 4, Internet Explorer 5, Internet Explorer 5.5 uğraştık. Şimdide ve son olarakta Internet Explorer 6 ile uğraşıyoruz. 27 Ağustos’ta Internet Explorer 6 7.senesini doldurdu.

Ama asıl sorun standart dışı tarayıcılar için ürettiğimiz fazla kodlar. İşte burada Internet Explorer 6 sorun olmaya başlıyor.

Okumaya devam edin »

21 Temmuz 2008′den seçme haberler

Temmuz 21st, 2008 • 7 yorum Haberler, Web Standartları
Etiketler: firebug, Firefox, HTML Form, internet explorer, jquery, saydam png, sorun, transparent png, WordPress

• jQuery’e başlamak için 15 adet makale. Bağlantı
• İnsanlar hala niçin Internet Explorer 6 kullanır. Bağlantı
• jQuery ile satıriçi grafik uygulaması yapmak. Bağlantı
• Mükemmel bir WordPress teması hemde ücretsiz. Bağlantı
• Gelecekte arama nasıl olacak, yakın gelecek. Bağlantı
  
• Firebug adlı FireFox Eklentisi - webdeneyimleri.com Bağlantı
• IE PNG Fix 2.0 Alfa 2 ile artık ie6 da ardalana tekrarı ve konumu belirleyebiliyoruz. Çok güzel bir gelişme bu. Denmek lazım Bağlantı
  
• Kitap sayfasındaki download için uyguladığım eklentide açık varmış, bende eklentiyi kaldırıp direk link verdim. s4l1h uyarısı için teşekkürler
  
• 20 adet CSS ile yapılmış güzel menü uygulaması. Bağlantı
• HTML form kullanımları için güzel ipuçları. Bağlantı
• 5 adet FireBug ekletisi. Eklentinin eklentisi olurmu demeyin. Bağlantı
• Garaj kapısı açılışı gibi menü yapmak. Bağlantı
• jQuery ipucu: metin dosyasından veri almak. Bağlantı