electro-bargh

توضیح درباره این Combine images using CSS sprites

13 پست در این موضوع قرار دارد

با سلام

خوب هستین .. الحمدوالله .... ولی من خوب نیستم ... :rolleyes: به خاطر این :

ادرس وبسایتم : http://www.electro-bargh.ir/

دوستان برای سئوی وبسایتم خیلی زحمت کشیدم تا اینجا رسیدم .. خوب بریم سر اصل مطلب برین به لینک زیر رجوع کنید

http://gtmetrix.com/reports/www.electro-bargh.ir/6pNoCs9m

خوب قسمت Combine images using CSS sprites خیلی از وبسایت ها رو گشتم ولی مطالب یا ناقص بود یا اصل من هنگ کردم :o

خوب این ارور ها رو داده

The following images served from electro-bargh.ir should be combined into as few images as possible using CSS sprites.

حالا هر کاری می کنم نمیتونم چجوری این ارور ها رو درست کنم ..... این مطلب انگلیسی بالا میگه باید تمام عکس ها بشن یکی .... چجوری ...

خوهشا توضیح کامل باشه .

دوستان راهنمایی کنید............

راستی اگه این یه مورد رو اوکی کنم که میترکونه .... :D البته با کمک شما میترکونیـــــــــــــــــــــم :P

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

0

به اشتراک گذاری این پست


لینک به پست

شما باید تصاویری که در بکگراند لینکها ، لیستها، کلیدها و ... استفاده کردید را در یک فایل قرار دهید و با پوزیشن و طول و عرض مکان مورد نظر را در تصویر نشان دهید

http://www.w3schools.com/css/css_image_sprites.asp

http://www.spritecow.com/

http://css-sprit.es/

8

به اشتراک گذاری این پست


لینک به پست

ممنونم فکر کنم ... دارم درستش می کنم

0

به اشتراک گذاری این پست


لینک به پست

شما باید تصاویری که در بکگراند لینکها ، لیستها، کلیدها و ... استفاده کردید را در یک فایل قرار دهید و با پوزیشن و طول و عرض مکان مورد نظر را در تصویر نشان دهید

http://www.w3schools...age_sprites.asp

http://www.spritecow.com/

http://css-sprit.es/

ممنون

من متوجه نشدم یعنی اون کدی رو که بهمون می ده یک فایل css درست کنیم براش همون جا قرار بدیم؟ یا تمام عکسها رو که کد کریدم تو یک فایل cssجمع کنیم؟

بعد خود عکس رو چیکار کنیم پاک کنیم؟

0

به اشتراک گذاری این پست


لینک به پست

کلا عکسها رو باید یکی کنید و استفاده کنید

توضیح این ترفند در بخش html-css هست

1

به اشتراک گذاری این پست


لینک به پست

ممنون من یک سرچی زدم

اومدم همه عکسام رو تو یک فایل جمع اوری کردم و همه عکسها رو پاک کردم

الان خوب شده

ولی باید عکس ها پاک می کردم؟

0

به اشتراک گذاری این پست


لینک به پست

بله دیگه، استفاده‌ای ندارند!

2

به اشتراک گذاری این پست


لینک به پست

رفتم تمام کارایی که گفته شده رو انجام دادم ، حالا دارم عکس ها رو پاک میکنم و عکس جدید رو آپلود میکنم

از یه طرف Combine images using CSS sprites داره رتبش خوب میشه ، از یه طرف Avoid bad requests داره رتبش بد میشه

همون عکس ها رو داره درخواست میده

توی یه فایل عکس ها رو قرار دادم ، اینجوری که من برداشت کردم باید تکه کد فراخونیش رو اینجوری بنویسم :


.parent-element {background:url(result.png);background-position: 0px 0px;background-position: 0px -16px;background-position: 0px -34px;background-position: 0px -75px;background-position: 0px -121px;background-position: 0px -151px;background-position: 0px -181px;background-position: 0px -200px;background-position: 0px -220px;background-position: 0px -250px;}

و بذارم توی style قالبم ، درسته ؟

عکسه رو هم توی قسمت images آپلودش کردما ، اما بازم نمیدونم مشکل چیه !

1

به اشتراک گذاری این پست


لینک به پست

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

مثلا شما عکس چشم رو برای تعداد بازدید با تمامی عکس ها یکی کردین.

حالا میخواین توی کد ها ازش استفاده کنید.

اول از همه شما میاین توی استایل بازدید ها و

background:url(images/view.png);

و کد که داره تصویر view.png رو فراخوانی میکنه رو باید به result.png تغییر بدین و به جز اون باید ببینید که عکس چشم توی عکسی که ساختین چه اندازه ای داره.مثلا:

در اندازه:


background-position: 0px -16px;

قرار داره.حالا اینطوری تصویر به راحتی لود میشه و نیازی به تصویر های قبلی نیست.در اصل کد استایل view این شکلی میشه:


background:url(images/view.png);
background-position: 0px -16px;

البته برای تمامی تصویر ها همین کار باید انجام بشه.

در ضمن اون تصویری که ساخته میشه رو باید در پوشه images قالب بزارین.

2

به اشتراک گذاری این پست


لینک به پست

استایل بازدید ها ؟ از کجا بدونم کجا دارن فراخونی میشن ؟!

1

به اشتراک گذاری این پست


لینک به پست

بازدید ها مثال بود.

دقیق بخونید.

شما برید ببینید که تصاویرتون توی استایل کجا فراخوانی میشن.

بعد کار های بالا رو براش لنجلم بدین.

1

به اشتراک گذاری این پست


لینک به پست

شما برید ببینید که تصاویرتون توی استایل کجا فراخوانی میشن.

بعد کار های بالا رو براش انجام بدین.

از کجا میتونم بفهمم که تصاویر از کجا فراخوانی میشن ؟

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

ابتدا فایل .css این کد رو اضافه کنید


.Sp-ImageAll-2{background:url(images/ImageAll-2.png) no-repeat;}
.Sp-ImageAll-2.home{background-position:-83px -2px; width:23px; height:23px;}

کد بالا برای مثال هستش

نام ImageAll-2.png باید به عکسی که درست کردید تغییر کنه

آدرس فولدر عکساتون باید نام فولدر عکسهای خودتون باشه images

نام Sp-ImageAll-2.home رو در کلاس تگ div یا a قرار بدید تا عکس برای شما نمایش داده بشه

باید عرض کنم که background-position:-83px -2px;

پوزیشن آیکونی که میخواین نمایش بدید برای اینکه بفهمید پوزیشن عکستون چیه از طریق فتوشاپ این کار رو انجام بدید

در فتوشاپ منوی windows تیک info را بزنید تا ابزاری که پوزیشن عکس ها رو نمایش میده ظاهر میشه

بعد خودتون دستی تک تک برای هر عکس یک


.Sp-ImageAll-2.home{background-position:-83px -2px; width:23px; height:23px;}

تعریف کنید با این تفاوت که باید home رو تغییر نام بدید

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

از کجا میتونم بفهمم که تصاویر از کجا فراخوانی میشن ؟

خودتون باید تعریف کنید به این صورت


.Sp-ImageAll-2{background:url(images/ImageAll-2.png) no-repeat;}

ویرایش شده در توسط M.At
0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط Morteza
      قوانین کلی انجمن
      1- در هنگام ثبت نام از کلمات مناسب جهت نام کاربری استفاده نمایید. نام های کاربری حاوی کلمات نامناسب ، نام های کاربری که جنبه تبلیغاتی داشته و یا نام های کاربری که نام یک سایت می باشند ، سریعا حذف خواهند شد.
      2- به دیگران احترام بگزارید. با هرگونه بی احترامی برخورد جدی و حتی منجر به قطع دسترسی کاربر خاطی خواهد شد.
      3- در انتخاب آواتر و امضا دقت کنید و از تصاویر و کلمات موهون و نامناسب استفاده ننمایید. توجه کنید که امضا هایی که حاوی تصاویر و کلمات موهون و نامناسب باشند و یا جنبه تبلیغاتی داشته باشند سریعا حذف خواهند شد و در صورت تکرار با فرد خاطی برخورد خواهد شد.
      4- برای مطالب خود از عنوان مناسب و گویا استفاده نمایید. در عنوان مطالب خود از عبارات و کلمه هایی مانند : کمک کنید ، درخواست فوری ، نیاز شدید ، تورو خدا کمکم کنید ، خیلی مهم و جملاتی شبیه به این خودداری نمایید.
      5- حتما قبل از ایجاد یک موضوع در انجمن جستجو کنید و از ایجاد مطالب تکراری خودداری نمایید.
      6- از اسپم کردن موضوعات پرهیز کنید. جهت دریافت پاسخ صبر داشته باشید. برای تشکر از دکمه تشکر استفاده کنید.
      7- فارسی بنویسید و از فینگلیش نوشتن خودداری کنید. در غیر اینصورت با فرد خاطی برخورد خواهد شد.
      8- فعالیت های تجاری را فقط در بخش مشخص شده انجام دهید و از ایجاد موضوعاتی با جنبه تجاری در دیگر بخشها خودداری نمایید. از دادن پاسخهایی که جنبه تجاری و یا تبلیغی دارند خودداری نمایید. در صورت مشاهده چنین پست هایی با فرد خاطی برخورد خواهد شد.
      9- گروه وردپرس پارسی هیچگونه مسئولیتی در مورد فعالیت های بخش تجاری ندارد و تمامی مسئولیت به عهده ایجاد کننده موضوع است.
      10-هرگونه بحث سیاسی - مذهبی در این انجمن ممنوع می باشد. هرگونه توهین و مجادله و مباحثه در مباحث دینی و سیاسی ممنوع بوده و تاپیک های اینچنینی حذف و کاربران خاطی محروم می شوند. در صورت تکرار فرد خاطی برای همیشه از انجمن اخراج می شود.
      11- ارائه شماره تماس و ایمیل جهت همکاری و یا خرید و فروش و یا هرگونه مورد دیگر بصورت عمومی در انجمن ممنوع است. جهت تبادل موارد ذکر شده از طریق پیام خصوصی اقدام کنید.
      12- هرگونه درخواست کامل سازی پوسته در انجمن ممنوع است. اگر نیاز به تکمیل کد بخش خاصی از پوسته را دارید باید درخواست خود را در یک تاپیک جدید مطرح کنید و از درخواست تکمیل کدنویسی و یا طراحی یک پوسته جدا خودداری کنید.
      13- هرگونه بحث در مورد تکمیل و اشکال زدایی پوسته های ریپ در انجمن ممنوع است. اگر نیاز به تکمیل کد بخش خاصی از پوسته را دارید باید درخواست خود را در یک تاپیک جدید مطرح کنید و از درخواست تکمیل کدنویسی و یا طراحی یک پوسته ریپ جدا خودداری کنید.
      14- هرگونه درخواست فایل/پوسته/افزونه و سایر محصولهای تجاری در انجمن ممنوع است.
      15- هرگونه پرسش و بحث درباره محصولهای تجاری در انجمن ممنوع است. پشتیبانی محصولهای تجاری به عهده سازنده/فروشنده آن است.
      16- به هیچ طریقی از کاربران دیگر مشخصات ورود به سایت/سرور آنها را درخواست نکنید. در صورت نیاز کاربر در پیام خصوصی اطلاعات را ارسال خواهد کرد و نیازی به مطرح کردن این مورد نیست، توجه فرمایید انجمن هیچ مسئولیتی در این مورد بع عهده نخواهد گرفت. همچنین در صورت مشاهده درخواست ورود از کاربران دیگر، اخطار و در صورت تکرار کاربر خاطی از انجمن اخراج خواهد شد.
      بروزرسانی ششم.
    • توسط HADI.RBL
      سلام خسته نباشید من وقتی یک برگه رو در وردپرس خودم میسازم هرکار میکنم در سایتم نمایش داده نمیشه هرکی میدونه مشکل از کجاست لطفا راهنمایی کنه >. 
    • توسط amirdehghani
      سلام ببخشید من داخل سایت ام query monitor نصب کردم بعد بهم ارور slow query میده  میگه دو تا slow query داری 
      الان باید چیکار کنم که درست بشن با افزونه میشه درستش کرد یا باید کد های query رو تغییر بدم 
      لطفا کمک کنید خیلی مهمه تا امشب باید درستش کنم تحویل بدم
    • توسط mahnaz20
      با سلام خدمت دوستان و اساتید گرامی
      دیروز هنگام آپدیت افزونه ووکامرس مشکلی در بروزرسانی بوجود آمد و سایتم بالا نیومد مجبور شدم برم از هاست فایل maintance را پاک کنم و سایت بالا اومد .
      ولی تنظیمات پیکربندی گواهینامه ssl بهم ریخته و وقتی آدرس سایتم را میزنم مرورگر اخطار میده که این سایت امن نیست و سایت باز نمیشه. بجای آیکون سبز رنگ هم آیکون اخطار قرمز کنار url نشان میده.
      لطفا کمک کنید این مشکل را برطرف کنم. ممنونم
    • توسط mahsa98
      سلام دوستان. من از افزونه acf  برای نمایش برخی اطلاعات استفاده میکنم. ولی میخوام نمایش این اطلاعات رو یکم زیبا و منظم و مرتب کنم. مثلا تو یه کادر قرار بگیره، رنگشون تغییر کنه و ....
      میشه از شورتکد استفاده کرد؟ مثلا تو ویژوال کامپوزر یا صفحه ساز خود قالبم اون فرمی که میخوام رو بسازم بعد این اطلاعات رو نمایش بدم؟
       اگه نمیشه چطوری باید بهشون استایل دلخواهم رو بدم؟
      خواهش میکنم دوستانی که تواناییش رو دارن کمکم کنن خیلی کارم گیره