sprite soru - R10.net

20-07-2013, 22:55:40

Burti

Reveloper

#sayilar li {
    background: url(../images/sayilar.png) no-repeat top left;
	float: left;
	list-style:none;
	margin-top:-4px;
}

.sprite-sayi0{ background-position: 0 0; width: 32px; height: 28px; } 
.sprite-sayi1{ background-position: -34px 0; width: 32px; height: 28px; } 
.sprite-sayi2{ background-position: -66px 0; width: 32px; height: 28px; } 
.sprite-sayi3{ background-position: -100px 0; width: 32px; height: 28px; } 
.sprite-sayi4{ background-position: -134px 0; width: 32px; height: 28px; } 
.sprite-sayi5{ background-position: -168px 0; width: 32px; height: 28px; } 
.sprite-sayi6{ background-position: -202px 0; width: 32px; height: 28px; } 
.sprite-sayi7{ background-position: -236px 0; width: 32px; height: 28px; } 
.sprite-sayi8{ background-position: -270px 0; width: 32px; height: 28px; } 
.sprite-sayi9{ background-position: -304px 0; width: 32px; height: 28px; }

<div id="sayilar">
<li class="sprite-sayi0"></li>
<li class="sprite-sayi1"></li>
<li class="sprite-sayi2"></li>
<li class="sprite-sayi3"></li>
</div>

sadece en baştaki 32px'lik alanı gösteriyor hepsi?

20-07-2013, 22:59:22

#2

EA

ana li ye verdiğin top left kalıtsallıktan alıyor şimdi anladım

20-07-2013, 23:11:06

#3

Burti

Reveloper

EA adlı üyeden alıntı: mesajı görüntüle

ana li ye verdiğin top left kalıtsallıktan alıyor şimdi anladım

alakası yok hocam denedim tekrardanda olmadı

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 23:11:06 -->-> Daha önceki mesaj 23:04:06 --

Kullandığm tip:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<style>
#sayilar li {
    background: url(../images/sayilar.png) no-repeat top left;
	float: left;
	list-style:none;
	margin-top:-4px;
}

.sprite-sayi0{ background-position: 0 0; width: 32px; height: 28px; } 
.sprite-sayi1{ background-position: -34px 0; width: 32px; height: 28px; } 
.sprite-sayi2{ background-position: -66px 0; width: 32px; height: 28px; } 
.sprite-sayi3{ background-position: -100px 0; width: 32px; height: 28px; } 
.sprite-sayi4{ background-position: -134px 0; width: 32px; height: 28px; } 
.sprite-sayi5{ background-position: -168px 0; width: 32px; height: 28px; } 
.sprite-sayi6{ background-position: -202px 0; width: 32px; height: 28px; } 
.sprite-sayi7{ background-position: -236px 0; width: 32px; height: 28px; } 
.sprite-sayi8{ background-position: -270px 0; width: 32px; height: 28px; } 
.sprite-sayi9{ background-position: -304px 0; width: 32px; height: 28px; }
	</style>
</head>
<body>
<div id="sayilar">
<li class="sprite-sayi0"></li>
<li class="sprite-sayi1"></li>
<li class="sprite-sayi2"></li>
<li class="sprite-sayi3"></li>
</div>
</body>
</html>

21-07-2013, 01:29:30

#4

EA

#sayilar li {background: url(../images/sayilar.png) no-repeat top left; }

kullanmak yerine

.sprite-sayi0 { background: url(sayilar.png) 0 0; width: 32px; height: 28px;}

bu şekilde kullanırsanız daha sağlıklı olur hocam

ama derseniz ben bu şekilde kullanmak istemiyorum yazdığım şekilde kullanıcam

.sprite-sayi1{ background-position: -34px 0 !important; width: 32px; height: 28px; }

eklemeniz gerekmekte kalıtsallıktan #sayilar li görmekte

bana sorarsanız tanımladığınız her classta resmi background: url(sayilar.png) 0 0; çağırın ve posisyonunu bu şekilde ayarlayın

21-07-2013, 01:31:27

#5

acayip

Kimlik doğrulama veya yönetimden onay bekliyor.

Arkadaşım en başta id olarak tanımlama yapmışsın #sayilar li diye. Sonrasında classa göre yapmışsın. O nedenle olmuyor.Yani:

.sprite-sayi0{}

diye değil

#sayilar li.sprite-sayi0{}

şeklinde yaparsan düzelir.

21-07-2013, 05:20:12

#6

Burti

Reveloper

EA adlı üyeden alıntı: mesajı görüntüle

#sayilar li {background: url(../images/sayilar.png) no-repeat top left; }

kullanmak yerine

.sprite-sayi0 { background: url(sayilar.png) 0 0; width: 32px; height: 28px;}

bu şekilde kullanırsanız daha sağlıklı olur hocam

ama derseniz ben bu şekilde kullanmak istemiyorum yazdığım şekilde kullanıcam

.sprite-sayi1{ background-position: -34px 0 !important; width: 32px; height: 28px; }

eklemeniz gerekmekte kalıtsallıktan #sayilar li görmekte

bana sorarsanız tanımladığınız her classta resmi background: url(sayilar.png) 0 0; çağırın ve posisyonunu bu şekilde ayarlayın

çok teşekkür ederim.

acayip adlı üyeden alıntı: mesajı görüntüle

Arkadaşım en başta id olarak tanımlama yapmışsın #sayilar li diye. Sonrasında classa göre yapmışsın. O nedenle olmuyor.Yani:

.sprite-sayi0{}

diye değil

#sayilar li.sprite-sayi0{}

şeklinde yaparsan düzelir.

hocam oda kod fazlalığına giriyo ama ayrıca denedim calısmadı

21-07-2013, 15:55:24

#7

rws

sorunu çözüldümü bilmiyorum ama bu kodlama daha doğru olur kanaatindeyim

html:

Alıntı

<ul id="sayilar">
<li class="sprite-sayi0">anasayfa</li>
<li class="sprite-sayi1">anasayfa</li>
<li class="sprite-sayi2">anasayfa</li>
<li class="sprite-sayi3">anasayfa</li>

css

Alıntı

ul#sayilar li{float:left; list-style:none; margin-top:-4px; width:32px; height:28px;}
[class*="sprite-sayi"] {background:url(bg.png) no-repeat}
.sprite-sayi0{background-position: 0 0;}
.sprite-sayi1{background-position: -34px 0;}
.sprite-sayi2{background-position: -66px 0;}
.sprite-sayi3{background-position: -100px 0;}
.sprite-sayi4{background-position: -134px 0;}
.sprite-sayi5{background-position: -168px 0;}
.sprite-sayi6{background-position: -202px 0;}
.sprite-sayi7{background-position: -236px 0;}
.sprite-sayi8{background-position: -270px 0;}
.sprite-sayi9{background-position: -304px 0;}