• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
Combine images using CSS sprites
#1
درود
دوستان میخواستم در این مورد راهنمایی کنید که چطور میتونم این مشکل رو رفع کنم در قالب فرومم :
http://gtmetrix.com/reports/forum.4users.ir/1EltLymL
Combine images using CSS sprites :

http://forum.4users.ir/images/attachtypes/doc.gif
http://forum.4users.ir/images/collapse.gif
http://forum.4users.ir/images/earth/bg.png
http://forum.4users.ir/images/earth/collapse.gif
http://forum.4users.ir/images/earth/icons/calendar.gif
http://forum.4users.ir/images/earth/icons/login.gif
http://forum.4users.ir/images/earth/icons/logout.gif
http://forum.4users.ir/images/earth/icon...erlist.gif
http://forum.4users.ir/images/earth/icons/search.gif
http://forum.4users.ir/images/earth/minioff.gif
http://forum.4users.ir/images/earth/miniofflock.gif
http://forum.4users.ir/images/earth/minion.gif
http://forum.4users.ir/images/earth/off.gif
http://forum.4users.ir/images/earth/offlock.gif
http://forum.4users.ir/images/earth/on.gif
http://forum.4users.ir/images/earth/tcat.png
http://forum.4users.ir/images/icons/music.gif
http://forum.4users.ir/images/prostats/ps_minioff.gif
http://forum.4users.ir/images/prostats/ps_reload.gif



اگر درست منظورش رو فهمیده باشم میگه این عکس ها باید در سی اس اس قرار بگیرند :
ولی به طور مثال :
http://forum.4users.ir/images/earth/on.gif
http://forum.4users.ir/images/earth/tcat.png
http://forum.4users.ir/images/icons/music.gif
و
http://forum.4users.ir/images/earth/bg.png
و
http://forum.4users.ir/images/earth/icons/calendar.gif
http://forum.4users.ir/images/earth/icons/login.gif
http://forum.4users.ir/images/earth/icons/logout.gif
http://forum.4users.ir/images/earth/icon...erlist.gif
http://forum.4users.ir/images/earth/icons/search.gif

در سی اس اس ها تعریف شده اند ولی ایراد میگیرد !
به طور مثال برای بکگراند انجمنم :
http://forum.4users.ir/images/earth/bg.png
در سی اس اس :

کد پی‌اچ‌پی:
body {
    
background#222 url(images/earth/bg.png);
    
color#000;
    
text-aligncenter;
    
line-height1.4;
    
margin0;
    
font-familyTahoma;
    
font-size12px;


وجود دارد ولی باز سایت جی تی متریک ایراد میگیرد و وقتی یک مربع قرار میدهم قبل body دیگر ایرادی نمیگیرد ولی ضاهر سایت خراب میشود ! چه باید بکنم ؟
یک راهنمایی جامع به من بکنید ممنون میشم سپاسسسسسسسسسسس HeartHeartHeart
  پاسخ
تشکر شده توسط :
#2
تمام عکس هاتونو بیارین توی این لینک و اینجا تبدیل به یک عکس کنین...
خودش Css Sprites شو درست میکنه و یه کد Css بهتون میده با تمام استایلها...
ساخت Css Sprites
بنده طعم ايمان را نمي چشد، تا اينكه دريابد آنچه اتفاق نيفتاده است نمي شد كه اتفاق بيفتد؛و آنچه شده و اتفاق افتاده است,نمي شد كه نشود و اتفاق نيفتد....حضرت علي(ع)
  پاسخ
تشکر شده توسط : Mohammad.T ali786
#3
اگر لطف کنی یه توضیح کوچیک در مورد نحوه کار با این سایت بدی ممنون میشم نیم ساعتی هست پای این سایت اصلا نفهمیدم چطور باید عکس ها رو بهش بدم !! Huh
  پاسخ
تشکر شده توسط :
#4
خیلی ساده عکس هاتو با drag and drop میندازی توی صفحه ای که توی این سایت هست...سمت راستش کد CSSاشو بهت میده... در آخر کار از بالای صفحه لینک دانلود رو انتخاب میکنی و عکس Sprite شده و کدهای CSSشو بهت میده
بنده طعم ايمان را نمي چشد، تا اينكه دريابد آنچه اتفاق نيفتاده است نمي شد كه اتفاق بيفتد؛و آنچه شده و اتفاق افتاده است,نمي شد كه نشود و اتفاق نيفتد....حضرت علي(ع)
  پاسخ
تشکر شده توسط :
#5
خیلی جالبه دقیقا همین کار رو میکنم ! ! ! ولی نمیشه

منظورت از drag and drop اینه که عکس رو بگیرم بذارم توی اون صفحه دیگه ؟
من اینکارو میکنم ولی نمیشه !
  پاسخ
تشکر شده توسط :
#6
فهمیدم چطوری هستش Big Grin باید از توی هاردم میگرفتم میذاشتم توی سایت من از سایت خودم مستقیم میذاشتم توی اون سایت Confused
در هر صورت مرسی Heart

فقط سوال مثلا بکگراند رو من گذاشتم این کد رو داده :

کد پی‌اچ‌پی:
.bg{
background-position: -17px -18px;
width21px;
height21px;


خوب این رو هر جا توی اون صفحه تغییر میدادم پزیشنش تغییر میکرد ( کد ها منظورم هست ) ، چطور باید استفاده کنم و چه روشی دارد - ممنونم Heart
  پاسخ
تشکر شده توسط :
#7
خب بکگروند فرق میکنه دیگه... المان هایی که واسه بکگروند استفاده میشه رو بذار
بنده طعم ايمان را نمي چشد، تا اينكه دريابد آنچه اتفاق نيفتاده است نمي شد كه اتفاق بيفتد؛و آنچه شده و اتفاق افتاده است,نمي شد كه نشود و اتفاق نيفتد....حضرت علي(ع)
  پاسخ
تشکر شده توسط : Mohammad.T
#8
خب من اصلا منظور شما رو نگرفتم
ببینید برای تمام عکس ها پوزیشن میدهد !
مثلا برای این عکس : [عکس: off.gif]

کد پی‌اچ‌پی:
.off{
background-position: -426px -222px;
width30px;
height30px;


کد پی‌اچ‌پی:
Selection Toolbox
Repeat x Delete Sprite
.off{
background-position: -109px -8px;
width30px;
height30px;


من هر عکسی رو هر جای اون صفحه بذارم اینطور میکنه !
  پاسخ
تشکر شده توسط :
#9
من از دوباره اومدم با دقت به حرفات توجه کردم - در پست اول گفتی :
نقل قول:تمام عکس هاتونو بیارین توی این لینک و اینجا تبدیل به یک عکس کنین...
از این حرفت متوجه شدم که من باید تمام عکس ها رو بذارم توی همون صفحه بعد که دانلود میکنم یک عکس میده که اون پزیشنی که توی کد ها میده مربوط به هر عکس رو عکس اصلی است که تمام عکس ها را قرار دادم !
من عکس رو آپلود کردم ، کدهای اسکریپت هم به کدهای سی اس اس قالبم اضافه کردم ! ! ! ! ولی عکس اصلی ( که تمام عکس ها توش هست ) به جای همه عکس ها اومد Undecided

براتون زیپش رو گذاشتم یه چک میکنید ، ممنونم Heart


فایل‌های پیوست
.zip   MT.zip (اندازه 8.07 KB / تعداد دانلود: 2)
  پاسخ
تشکر شده توسط :
#10
دوستان من رو راهنمایی نمیکنید ؟ Confused
البته تا همینجاشم خیلیییییییییییی ممنونممم
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان