سؤال در مورد CSS Sprite

۱

حین فارسی‌سازی قالب Zbench برای وردپرس،یک سؤال در مورد CSS Sprite برام ایجاد شد که با جستجو به نتیجه‌ای نرسیدم.

sidebar

در Style.css قالب انگلیسی مکان آیکون کنار لینک‌ها که در تصویر مشخص کردم با دستور زیر نمایش داده می‌شه:

#sidebar ul li{padding-left:۱۵px;background:url("images/icons.gif") no-repeat 0 -۲۸۰px;}
#sidebar ul li:hover{background:url("images/icons.gif") no-repeat -۱۰px -۲۶۰px;}

اما در Style.css قالب فارسی که آقای مهدی نعیمی فارسی‌سازی کردن، کد نمایش مکان آیکون رو به این صورت نوشتن:

#sidebar ul li{padding-right:۱۵px;background:url("images/icons.gif") no-repeat ۲۵۷px -۲۸۰px;}
#sidebar ul li:hover{background:url("images/icons.gif") no-repeat ۲۴۷px -۲۶۰px;}

این‌جا منظور از ۲۵۷px یعنی این مقدار فاصله به چه سمتی حرکت کنیم؟ ، و چطور این عدد ۲۵۷ با ۰ قالب اصلی یکی هست که هر دو آیکون رو نشون می‌دن؟

البته می‌دونم اگر پشت عدد منفی باشه،یعنی به سمت راست حرکت می‌کنیم.

تصویر مربوط به آیکون‌ها:

icons

انصراف

۱  پاسخ

۲

به این دلیله که توی ورژن فارسی همه چی راست به چپ داره تعیین می‌شه. و توی این دو خط:

#sidebar{overflow:hidden;width:۲۷۶px;border:۱px solid #fff;padding:۲۰px ۱۰px ۱۰px;}
#sidebar ul{list-style:none;padding:۸px ۵px;border-top:۱px solid #ddd;}

معلومه که liهای sidebar عرضشون ۲۶۶ پیکسل‌ه. به خاطر همین هم توی این خط:

#sidebar ul li{padding-right:۱۵px;background:url("images/icons.gif") no-repeat ۲۵۷px -۲۸۰px;}

اون آیکون بولت لینک‌ها منتهاالیه سمت راست li قرار می‌گیره نه سمت چپ.

انصراف
انصراف