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?
