کمک در SpriteMe کردن پوسته

[Sgwgo 316]

سلام دوستان خوبید

این تمام عکس هایی هست که تو سایت لود میشن عکسشون ساختم ولی حالا تو css ضعیف هستم و نمیدونم چطور باید کدهارو دستکاری کنم

با مختصات دادن مشکل دارم

اینم آدرس سایتم www.fadroid.ir

به عنوان مثال برای عکس بگراند کمکم کنید

عکس زیر عکس بگراند منه

که تو تصویری که ساختم همون اسپرایته در قسمت بالا قرار داده حالا چطور کد بدم که فقط همین بک گراند دیده بشه فقط

کد های منو هم که میتونید خودتون از سایت من ببینید

http://www.fadroid.com/wp-content/themes/goodnews-persianscript/images/dark/bg.png

[imanfakhar 26231]

مختصات دادن کار سخت و زمان بریه اول از همه عکس ها را باید با قانونی مشخص کنار هم بگذاری به طور مثال با فاصله ی 50 پیکسل از دو طرف و در هر مربع از گوشه ی سمت چپ بالا یک آیکون قرار بدی و اگر فرض کنیم عرض تصویر ساخته شده 250 پیکسل بشود یعنی در هر ردیف 5 آیکون باشد

کدت می شود

<style type="text/css">
.icon1 {
background-position:0px 0px;
}
.icon2 {
background-position:50px 0px;
}
.icon3 {
background-position:100px 0px;
}
.icon4 {
background-position:150px 0px;
}
.icon5 {
background-position:200px 0px;
}
.icon6 {
background-position:0px 50px;
}
.icon7 {
background-position:50px 50px;
}
.icon8 {
background-position:100px 50px;
}
.icon9 {
background-position:150px 50px;
}
.icon10 {
background-position:200px 50px;
}
</style>

[oMid 2114]

css image sprites

spriteme

[imanfakhar 26231]

برای بک گراندت پیشنهاد می کنم از رنگش استفاده کنی

کد رنگ بک گراند شما #4C4F52 است که می شود

background:#4C4F52;

[Sgwgo 316]

آقا من با spriteme عکسامو درست کردم آیا این قانونی درست میکنه

اگه قانونی درست میکنه مختصات این عکسم چطور بدست بیارم

[Morteza 34190]

ببینید اگر شما خودتون عکس رو در فتوشاپ ایجاد کنید و اندازه ها رو با پیکسل بدید اونوقت فاصله دادن اسون میشه.

آقا من با spriteme عکسامو درست کردم آیا این قانونی درست میکنه

من نتونستم باهاش کار کنم.

[Sgwgo 316]

آقا مرتضی برای شما مقدور عکس هارو برای من بسازید؟

این لینک عکس هایی هستن که باید اسپرایت بشن

• http://www.fadroid.com/wp-content/plugins/lightbox-plus/css/elegant/images/border.png
  
• http://www.fadroid.com/wp-content/plugins/lightbox-plus/css/elegant/images/controls.png
  
• http://www.fadroid.com/wp-content/plugins/lightbox-plus/css/elegant/images/loading_background.png
  
• http://www.fadroid.com/wp-content/plugins/lightbox-plus/css/elegant/images/overlay.png
  
• http://www.fadroid.com/wp-content/themes/goodnews-persianscript/images/bull_arrow_rtl.png
  
• http://www.fadroid.com/wp-content/themes/goodnews-persianscript/images/dark/bg.png
  
• http://www.fadroid.com/wp-content/themes/goodnews-persianscript/images/dark/grid_dark.png
  
• http://www.fadroid.com/wp-content/themes/goodnews-persianscript/images/dark/home_icon.png
  
• http://www.fadroid.com/wp-content/themes/goodnews-persianscript/images/dark/nav_bg.png
  
• http://www.fadroid.com/wp-content/themes/goodnews-persianscript/images/dark/search_icon.png
  
• http://www.fadroid.com/wp-content/themes/goodnews-persianscript/images/dots_pat.png
  
• http://www.fadroid.com/wp-content/themes/goodnews-persianscript/images/slide_cap.png
  

[Sgwgo 316]

خب دوستان من تا حدودی موفق شدم

عکسمو به صورت استاندارد ساختم ولی هنوز یجایی مشکل دارم و اون عدم آشنایی کامل با کدهایی css

به این عکس دقت کنید

آیکن هوم فقط باید یکم بیاد پایین

با هیچ کدی نتونستم با موفقیت بیارمش پایین

اینم عکس اسپرایت من

و اینم کدهایی css من

#navigation ul.nav li.home > a {
	   background:url(../images/spite.png) no-repeat top left;
	background-position: 15px -262px; width: 29px; height: 28px;

ویرایش شده مرداد 91 توسط Sgwgo

[imanfakhar 26231]

#navigation ul.nav li.home > a {
		   background:url(../images/spite.png) no-repeat 3px left;
		background-position: 15px -262px; width: 29px; height: 28px;

با کم و زیاد کردن 3px جای دقیق آیکون را تعیین کنید

[Sgwgo 316]

از 262 کم کنم؟

وااااااااااااااااااااای باورم نمیشه مشکل فقط از یه height بود باید 100% میکردم

[Sgwgo 316]

اینبار با عکس بکگراند مشکل دارم

کد سی اس اسش اینه

background:#3a3c3d  url(../images/sprite.png);
background-position: 0px 0px;

پرا چرا اینطور نشون میده

ویرایش شده مرداد 91 توسط Sgwgo

[Parsa 23463]

بکگراند سایتتتون هست؟

برای انتخاب بکگراند یک بخش به روش Sprite باید width و height اون قسمت هم تنظیم باشد

از norepeat هم استفاده کنید برای تکرار نشدن

background:#3a3c3d  url(../images/sprite.png) norepeat ;

[Sgwgo 316]

بله زمینه سایت هست

طول و عرض که داده نمیشه!!

تکرار همکه باید باشه

[Parsa 23463]

فکر میکنم تصویر اشتباه انتخاب شده!

[Sgwgo 316]

خب عکس من قرار دادم اولین تیکه هم مال خود بکگراند یعنی مختصاصت 0 و 0

ولی چرا کل عکس نمایش داده میشه

خداااااا دارم راوانی میشم

[Parsa 23463]

واسه زمینه سایت (body) نمیشه موقعیت تعیین کرد!

باید از تصویر یک شکل استفاده کنید

[oMid 2114]

از norepeat هم استفاده کنید برای تکرار نشدن

background:#3a3c3d url(../images/sprite.png) norepeat ;

بی ادبی مرا بپذیرید.ولی فکر کنم no-repeat صحیح تر است...#

[Sgwgo 316]

از زمینه که بگذریم

یه قسمت هم دارم که توش مشکل دارم

بخاطر اینکه عرض تصویر زیاد شده تو تصویر اسپریت شده فاصله اون قسمت خالی مونده چیکار کنم؟

[Morteza 34190]

من متوجه این مشکل آخرتون نشدم. بیشتر توضیح بدید که چیکار کردید.

[Sgwgo 316]

تصویر اول قبل اسپرایت

و دوم بعد اسپرایت

عکس اسپرایتی که گذاشتم و شامل چندتا عکسه دیگه بضیا عریض هستن و بعضیا باریک

حالا اونایی که باریکن یه زمینه ترنسپرد کنارشون هست به اندازه ی عرض کل تصویر اسپرایتی

حالا وقتی عکس مختصات میدی تو قالب باید عکس تکرار بشه و چون اون فاصله خالی هستش پس بین خطها همونطور که تو تصویر میبینید فاصله میوفته

با چه کدی به هم نزدیکشون کنم؟

[Morteza 34190]

اگر آنلاین باشه یا بتونید کد رو بزارید تا در عمل هم مشکل رو ببینیم خیلی خوب میشه.

چون وقتی مختصات دایدید و repeat هم هست باید درست عمل کنه مگر اینکه آدرس دهی یا position اشتباه باشه.

[Sgwgo 316]

خب من رو قالب اصلی انجام ندادم گفتم بهم نریزه و هی مجبورم باشم کش پاک کنم.

دارم روی لوکال باهاش ور میرم که تا الان واسه 2 تا از تصویرا موفق بودم و رو قالب آنلاین هم اعمالشون کردم

من به شما وسایل میدم شما با خاصیت inspact یا یا افزونه firebug روی قالب اصلی من تست کنید

آدرس عکس اسپرایت شده:

http://www.fadroid.c...ages/sprite.png

آدرس سایت : www.fadroid.ir

پستیشن تصویر در عکس اسپرایت :

background-position: 0 -143px;

محلی که این تصویر وجود داره

[Sgwgo 316]

کسی متوجه مشکل من نشد ؟