• 20-07-2013, 22:55:40
    #1
    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
    ana li ye verdiğin top left kalıtsallıktan alıyor şimdi anladım
  • 20-07-2013, 23:11:06
    #3
    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
    #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
    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
    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
    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;}