lostyazilim
tr.link

Editörde Çalışan Sprite Sitemde Çalışmıyor

8 Mesajlar 1.041 Okunma
acebozum
tr.link

Durotan Durotan WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek 3D Sanatçı
  • Konum Kocaeli
  • Ad Soyad F** T**
  • Mesajlar 1676
  • Beğeniler 204 / 340
  • Ticaret 2, (%100)
Merhaba arkadaşlar. Az önce bir sprite yapmaya çalıştım.

Dreamweaver'da sorunsuz bir şekilde çalışıyor, tarayıcıda test ettim yine sorunsuz bir şekilde çalışıyor. Ancak sitemin css dosyasına kodları ekleyip, HTML kodu sitede yerleştirince, tüm spritelar ilk sprite (heroes-abathur) olarak gözüküyor.

Sprite kodu:

.heroes {
background-image: url(http://i.imgur.com/ZsZJNyT.png);
background-repeat: no-repeat;
display: block;
}

.heroes-abathur {
width: 64px;
height: 72px;
background-position: 0 0;
}
.heroes-arthas {
width: 64px;
height: 72px;
background-position: 0 -72;
}
.heroes-diablo {
width: 64px;
height: 72px;
background-position: 0 -144;
}
.heroes-etc {
width: 64px;
height: 72px;
background-position: 0 -216;
}
.heroes-falstad {
width: 64px;
height: 72px;
background-position: 0 -288;
}
.heroes-gazlowe {
width: 64px;
height: 72px;
background-position: 0 -360;
}
.heroes-illidan {
width: 64px;
height: 72px;
background-position: 0 -432;
}
.heroes-kerrigan {
width: 64px;
height: 72px;
background-position: 0 -504;
}
.heroes-malfurion {
width: 64px;
height: 72px;
background-position: 0 -576;
}
.heroes-muradin {
width: 64px;
height: 72px;
background-position: 0 -648;
}
.heroes-nazeebo {
width: 64px;
height: 72px;
background-position: 0 -720;
}
.heroes-nova {
width: 64px;
height: 72px;
background-position: 0 -792;
}
.heroes-raynor {
width: 64px;
height: 72px;
background-position: 0 -864;
}
.heroes-sgthammer {
width: 64px;
height: 72px;
background-position: 0 -936;
}
.heroes-sonya {
width: 64px;
height: 72px;
background-position: 0 -1008;
}
.heroes-stitches {
width: 64px;
height: 72px;
background-position: 0 -1080;
}
.heroes-tassadar {
width: 64px;
height: 72px;
background-position: 0 -1152;
}
.heroes-tychus {
width: 64px;
height: 72px;
background-position: 0 -1224;
}
.heroes-tyrael {
width: 64px;
height: 72px;
background-position: 0 -1296;
}
.heroes-tyrande {
width: 64px;
height: 72px;
background-position: 0 -1368;
}
.heroes-uther {
width: 64px;
height: 72px;
background-position: 0 -1440;
}
.heroes-valla {
width: 64px;
height: 72px;
background-position: 0 -1512;
}
.heroes-zeratul {
width: 64px;
height: 72px;
background-position: 0 -1584;
}
.heroes-brightwing {
width: 64px;
height: 72px;
background-position: 0 -1656;
}
.heroes-lili {
width: 64px;
height: 72px;
background-position: 0 -1728;
}
.heroes-murky {
width: 64px;
height: 72px;
background-position: 0 -1800;
}
.heroes-zagara {
width: 64px;
height: 72px;
background-position: 0 -1872;
}
.heroes-drekthar {
width: 64px;
height: 72px;
background-position: 0 -1944;
}
.heroes-anubarak {
width: 64px;
height: 72px;
background-position: 0 -2016;
}
.heroes-azmodan {
width: 64px;
height: 72px;
background-position: 0 -2088;
}
.heroes-chen {
width: 64px;
height: 72px;
background-position: 0 -2160;
}
.heroes-jaina {
width: 64px;
height: 72px;
background-position: 0 -2232;
}
.heroes-thrall {
width: 64px;
height: 72px;
background-position: 0 -2304;
}
.heroes-thelostvikings {
width: 64px;
height: 72px;
background-position: 0 -2376;
}


HTML'de de şöyle aktarıyorum:

Örneğin "Arthas" kodu için:



Büyük ihtimal CSS konusunda bilgim olmadığından bir yerde hata yaptım ama bir türlü bulamıyorum. Yardımcı olabilir misiniz?
 

 

elektronikssl
webimgo

27207 27207 WM Aracı Anonim Üyelik
  • Üyelik 02.01.2014
  • Yaş/Cinsiyet - /
  • Meslek
  • Konum
  • Ad Soyad ** **
  • Mesajlar 1852
  • Beğeniler 346 / 707
  • Ticaret 5, (%100)


.heroes {
background-image: url(http://i.imgur.com/ZsZJNyT.png);
background-repeat: no-repeat;
display: block;
}

.heroes-abathur {
background: url(http://i.imgur.com/ZsZJNyT.png) 0 0 no-repeat;
width: 64px;
height: 72px;

}
.heroes-arthas {
width: 64px;
height: 72px;
background: url(http://i.imgur.com/ZsZJNyT.png) 0 -72 no-repeat;

}
.heroes-diablo {
background: url(http://i.imgur.com/ZsZJNyT.png) 0 -144 no-repeat;
width: 64px;
height: 72px;

}



Böyle deneyince de aynı sorun oluyor mu?
 

 

Durotan Durotan WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek 3D Sanatçı
  • Konum Kocaeli
  • Ad Soyad F** T**
  • Mesajlar 1676
  • Beğeniler 204 / 340
  • Ticaret 2, (%100)

PHPacemisi adlı üyeden alıntı



.heroes {
background-image: url(http://i.imgur.com/ZsZJNyT.png);
background-repeat: no-repeat;
display: block;
}

.heroes-abathur {
background: url(http://i.imgur.com/ZsZJNyT.png) 0 0 no-repeat;
width: 64px;
height: 72px;

}
.heroes-arthas {
width: 64px;
height: 72px;
background: url(http://i.imgur.com/ZsZJNyT.png) 0 -72 no-repeat;

}
.heroes-diablo {
background: url(http://i.imgur.com/ZsZJNyT.png) 0 -144 no-repeat;
width: 64px;
height: 72px;

}



Böyle deneyince de aynı sorun oluyor mu?

Oluyor hocam.

Sizin verdiğiniz kodlarla değiştirdim durum böyle: blizzardturk.com/heroes-101/kahraman
 

 

27207 27207 WM Aracı Anonim Üyelik
  • Üyelik 02.01.2014
  • Yaş/Cinsiyet - /
  • Meslek
  • Konum
  • Ad Soyad ** **
  • Mesajlar 1852
  • Beğeniler 346 / 707
  • Ticaret 5, (%100)
Cloudflare cache temizleyip deneyin birde, temizlemediyseniz tabii.
 

 

wmaraci
wmaraci

sosyalmedya sosyalmedya Sms Onayı Gerekli Banlı Kullanıcı
  • Üyelik 18.07.2012
  • Yaş/Cinsiyet 37 / E
  • Meslek Front End Developer
  • Konum İstanbul Avrupa
  • Ad Soyad S** A**
  • Mesajlar 219
  • Beğeniler 28 / 66
  • Ticaret 0, (%0)
Hocam kordinatlara px ekleyin düzelecektir.
Durotan

kişi bu mesajı beğendi.

Durotan Durotan WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek 3D Sanatçı
  • Konum Kocaeli
  • Ad Soyad F** T**
  • Mesajlar 1676
  • Beğeniler 204 / 340
  • Ticaret 2, (%100)

sosyalmedya adlı üyeden alıntı

Hocam kordinatlara px ekleyin düzelecektir.


Teşekkürler, dediğiniz gibi px ekleyince hepsi düzeldi. :)
 

 

Durotan Durotan WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek 3D Sanatçı
  • Konum Kocaeli
  • Ad Soyad F** T**
  • Mesajlar 1676
  • Beğeniler 204 / 340
  • Ticaret 2, (%100)

sosyalmedya adlı üyeden alıntı

Hocam kordinatlara px ekleyin düzelecektir.


Bir de ufak bir sorum olacaktı.

Normal resimlere eklediğimiz "title" etiketi gibi sprite'lara da title verebiliyor muyuz? Veya title'a benzer üzerine fare imleci getirince metin gözükmesi gibi bir özellik var mı?
 

 

sosyalmedya sosyalmedya Sms Onayı Gerekli Banlı Kullanıcı
  • Üyelik 18.07.2012
  • Yaş/Cinsiyet 37 / E
  • Meslek Front End Developer
  • Konum İstanbul Avrupa
  • Ad Soyad S** A**
  • Mesajlar 219
  • Beğeniler 28 / 66
  • Ticaret 0, (%0)
etiketine title ekleyin olacaktır.
Durotan

kişi bu mesajı beğendi.