• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
تعریف کلاس برای تگ image
#1
سلام . من تصویری رو جاهای مختلف استفاده میکنم و برای همین یک کلاس برای تگ image تعریف کردم که در صورت تغییر عکس image ها ، از این کلاس استفاده کنم . اما تصویر دیده نمیشه . نوع تعریف کلاس به این صورت نادرسته ؟
کد:
.img-link
{
background-image:url(../picture/1343675921_Favorite.png);
width:15px;
height:15px;
}
<body>
<li class="nav"> <a href=""  class="a-link"><img class="img-link"/> www.w3schools.com</a></li>
</body>
ممنون.
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#2
آره نادرسته. برچسب <img> کلاس میپذیره اما نه به این صورت. این برچسب دست کم یک خصیصه رو باید داشته باشه، اونم src هست. وقتی شما از این برچسب استفاده میکنید همراه با خصیصه src تصویر شما نه تنها قابل رویت هست بلکه امکان انتخاب و ذخیره اون هم برای بازدیدکننده فراهم میشه. اما وقتی شما در استایل یک کلاس آدرس تصویر رو وارد میکنید اون کلاس اگر در برچسب مناسبی قرار بگیره فقط قابل رویت خواهد بود.
در نتیجه، وقتی شما تصویری رو برای یک کلاس درنظر میگیرید نباید از برچسب <img> استفاده کنید. شیوه صحیح بدین شکل هست،
کد:
<style>
.img-link
{
background-image:url(../picture/1343675921_Favorite.png);
width:15px;
height:15px;
}
</style>
<body>
<li class="nav"> <a class="a-link"><div class="img-link"></div> www.w3schools.com</a></li>
</body>
* البته من خصیصه href رو هم حذف کردم چون مقدار NULL داره که در این حالت اختیاریه.
* من هیچوقت ندیدم تنهایی از <li> استفاده بشه. حتما همراه <ul> استفاده کن.
غایب
  پاسخ
تشکر شده توسط : pary_daryayi
#3
ممنونم . خیلی کامل توضیح دادید . ولی علت اینکه خواستم از تگ image‌ به جای div استفاده کنم این بود که یه مقدار بهم ریختگی ایجاد میشه که میبایست تنظیمات بیشتری رو برای همون div ای که نوشتید ایجاد کنم . چون الان با اینکه همون 15 پیکسل رو در نظر گرفتم ، فقط یک چهارم عکس رو نشون میده و از طرفی بالاتر از متن قرار گرفته . به خاطر این مشکلات به فکر این نوع تعریف کلاس افتادم .
مرسی.
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#4
نقل قول:الان با اینکه همون 15 پیکسل رو در نظر گرفتم ، فقط یک چهارم عکس رو نشون میده و از طرفی بالاتر از متن قرار گرفته
تصویر کوچیک نشده درسته؟ بزرگ و حالت استاندارد هست ولی در ابعاد 15 پیکسل. درسته؟ شما برای حل این مشکل باید از پراپرتی زیر به این صورت استفاده کنید،
کد:
background-size: 100%;
غایب
  پاسخ
تشکر شده توسط : Reza Bojbaj pary_daryayi
#5
درسته . با این کدی که دادید حل شد . یه دنیا ممنون
برای حل مشکل بالاتر قرار گرفتن عکس از متن هم از دو div کنار هم استفاده کردم .
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#6
نقل قول: برای حل مشکل بالاتر قرار گرفتن عکس از متن هم از دو div کنار هم استفاده کردم .
هیچ وقت سمبل (sambal) نکن. شاید بتونی با ترکیب چند چیز اونی که میخوای رو درست کنی ولی راه استاندارد و درستش نیست. اگر بخوای بطور افقی متن و تصویر کنار هم قرار بگیره به این صورت هست.
غایب
  پاسخ
تشکر شده توسط : pary_daryayi
#7
ممنون . چه محیط کد نویسی بامزه ایه. من هم اول همین کار رو انجام داده بودم . ولی چون خواستم برای عکس کلاسی تعریف کنم که بعدا از طریق کد css همه ی عکس های مربوطه رو بشه تغییر داد ، از دایوی که گفتید استفاده کردم ... به این خاطر مجبور شدم متن کناریش رو هم درون دایو بزارم .منظورتون از اینکه هیچ وقت سمبل نکن یعنی چی ؟ یعنی اینکه از یک راه حل منحصر به فرد استفاده نکنم ؟
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#8
نقل قول:منظورتون از اینکه هیچ وقت سمبل نکن یعنی چی ؟ یعنی اینکه از یک راه حل منحصر به فرد استفاده نکنم ؟
بنظر شما استفاده دو تا div منحصر بفرد هست؟ Big Grin من گفتم بهت که راه استاندارد رو انتخاب کن.
واسه اون موردی که گفتی این استاندارده.
غایب
  پاسخ
تشکر شده توسط : pary_daryayi
#9
چقدر قشنگ ... مرسی.یه سوال ؟ من از کجا میتونم بدونم که هر چیزی استانداردش چیه ؟ خیلی دوست دارم css رو درست بنویسم . من از w3schools بصورت گسسته و نیازم استفاده کردم ، اگر کامل بخونمش میرسم به اون چیزی که میخوام ؟
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#10
نقل قول:من از کجا میتونم بدونم که هر چیزی استانداردش چیه ؟ اگر کامل بخونمش میرسم به اون چیزی که میخوام ؟
از نگاه کردن به کدهایی که افرادی مثل Chris Coyer در css-tricks مینویسن. خودت، با دونستن چند راه، راه بهتر رو انتخاب میکنی. در یک کلمه تجربه
خوندن فقط پیش نیاز هست. نیاز اصلیت باز تجربست.
غایب
  پاسخ
تشکر شده توسط : pary_daryayi


پرش به انجمن:


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