Css Sprite Sorunu

Merhaba http://www.spritecow.com/ sitesi ile aşağıdaki kodları css dosyama ekledim..

.menu_AnaSayfa {
	background: url('../resim/menu_img.png') no-repeat -2px -2px;
	width: 16px;
	height: 15px;
}
.menu_Hakkimda {
	background: url('../resim/menu_img.png') no-repeat -25px -1px;
	width: 16px;
	height: 16px;
	margin-right:2px;
	margin-top:2px;
}
.menu_iletisim {
	background: url('../resim/menu_img.png') no-repeat -3px -27px;
	width: 16px;
	height: 14px;
	margin-right:2px;
	margin-top:2px;
}
.menu_Reklam {
	background: url('../resim/menu_img.png') no-repeat -27px -26px;
	width: 15px;
	height: 16px;
	margin-right:2px;
	margin-top:2px;
}
.menu_VideoKlip {
	background: url('../resim/menu_img.png') no-repeat -47px -27px;
	width: 16px;
	height: 16px;
	margin-right:2px;
	margin-top:2px;
}
.tweet_img {
	background: url('../resim/menu_img.png') no-repeat -4px -48px;
	width: 20px;
	height: 16px;
}
.istatistikler {
	background: url('../resim/menu_img.png') no-repeat -47px -1px;
	width: 20px;
	height: 20px;
}

Daha sonra

<li class="menu_AnaSayfa"><a title="Ana Sayfa" href="<?php bloginfo('url'); ?>">Ana Sayfa</a></li>

Kodunu ekleyince malesef sitemede kayma oldu. yani div class ile kullandım olmadı. Resim aşağıda

css sprite yanlış uygulanmış siten için baştan onu söyliyelim css sprite uygulanan yer yana doğru uzadıkça resimin sağ tarafıda açığa çıkar.
Bunun için resimler alt alta alınarak tekrar denemelisin ve height / width değeri girilmemeli.

Hocam http://www.spritecow.com/ sitesi ile yaptım. Site bilgileri yanlış mı vermiş ?

site bilgileri doğru vermişte senin menü kısmındaki menü yazıları yana doğru uzadığı için oraya uygulayıcağın css sprite resminin iconları alt alta olmalı örneğin şöyle gibi ;
Kırmızı ile gösterilen alandaki resimde gördüğün gibi iconlar alt alta öyle olmalı senin iconlarda ona göre kodlar ayarlanmalı ve width height değeri girilmemeli.

Hmmm. anladım şimdi.. Deneyip haber vereceğim

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 23:25:21 -->-> Daha önceki mesaj 23:13:29 --

Hocam yaptım resim aşağıda ama hala aynı.


--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 23:34:23 -->-> Daha önceki mesaj 23:25:21 --

Hocam bu arada height weight değerini sildim bu sefer öbür iconlarda gözüküyor

Dediklerimi yapmadan önce kodları değiştirdiğin css dosyalarının yedeğini al lütfen.
1. divlere verilen class ları <li> kodlarına uygulayın div kodlarınıda silin
2. mavi.css içindeki #page-bar li kodundaki margin-top:-6px; bunu sil.
3. css sprite kodlarındaki bütün width kodlarını(sil).
4. mavi.css içindeki #page-bar a, #page-bar a:visited kodundaki padding:6px 17px; kodunu değiştir bununla padding:0 17px;

Yukarıdakileri yaptıktan sonra birkaç bişey daha yapılıcak bunları yaptıktan sonra onlara bakalım hoverla ilgili ufak bir düzenleme daha var.

Hocam çok uzun işmiş Yarın uğraşim bunla. İlginiz için çok teşekkürler. Sitede birsürü resim var şunun mantığını bir öğrensem her resmi böyle yapacam

mantığı çok basit aslında ama senin temandaki menüde bazı değişiklikleri yapmadan css sprite uygulamak gördüğün gibi bozukluklara sebep verebiliyor. İstersen team viewer bilgilerini ver msn üzerinden 5dk halledelim.

Hocam bilgisayarı kapattım. Telefondan giriyorum şimdi. Yapamassam mesaj atarım size