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?