natanziدوستان چطور میشه دور عکسی که در ساید بار قرار داره یه حاشیه چیزی انداخت مثل یه جور قاب کردن که عکس رو از بقیه عکس ها متمایز کنه
توجه کنید من چند تا عکس در ساید بار سمت راستم دارم میخوام یه جوری دورشو قاب کنم که متمایز بشن
http://www.natanzi.ir/weblog
-
-
دوستمون درست گفتن اما کامل نبود . حالا چطوری padding بدین ؟ کد زیر رو در css تون بزارین . به چند روش میتونید استفاده کنین .:
#imagecol{ padding:10px 5px 10px 5px !important; padding:10px 4px 10px 6px; color:#333; }حالا میتونید با img به تمام تصاویر حاشیه بدین این طوری :
img{ padding:10px 5px 10px 5px !important; padding:10px 4px 10px 6px; color:#333; }کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
natanzi -
من کد اول رو به اخر استایلم اضافه کردم
اما مثلا میخوام تواین کد که تو قسمت ابزارک دارم استفاده کنم و به اصطلاح تصویری که دادمو قاب کنمچطور استفاده کنم؟
-
اگه کد اول رو به style.css اضافه کردین به این شکل میتونید اجراش کنید :
<div class="imagecol"> <p> <img border="0" src="http://www.natanzi.ir/weblog/wp-content/themes/Conventy/images/timthumb.gif" width="255" height="90"></p> </div>منظورتون این بود ؟
-
بله اما عکس باید درو این کادر قرار بگیره چطور باید اینکارو انجام بدم؟
ببینید http://www.natanzi.ir الان تصاویر پست های من رو نگاه کنید که تصویر شاخصه البته یه کادری دورش هست
من میخوام تصاویر سمت راست من هم یه کادر مثل این بخوره
( -
city-sound گفت:
دوستمون درست گفتن اما کامل نبود . حالا چطوری padding بدین ؟ کد زیر رو در css تون بزارین . به چند روش میتونید استفاده کنین .:#imagecol{ padding:10px 5px 10px 5px !important; padding:10px 4px 10px 6px; color:#333; }حالا میتونید با img به تمام تصاویر حاشیه بدین این طوری :
img{ padding:10px 5px 10px 5px !important; padding:10px 4px 10px 6px; color:#333; }من کد اولی در فایل css قالبم گذاشتم ولی تغییری روی تصاویر ایجاد نشده یعنی اطراف تصاویر کادر نمیاد!!چرا؟
-
کد اولی باید فراخوانی بشه اما کد دوم بصورت خود کار روی تمامی تصاویر عمل میکنه . پیشنهاد میکنم این کد رو بزارید هم ساده هست هم مقادیرش براحتی قابل تغییره :
img { background-color : #f6f6f6; padding : 10px; }کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
shapoor -
city-sound گفت:
کد اولی باید فراخوانی بشه اما کد دوم بصورت خود کار روی تمامی تصاویر عمل میکنه . پیشنهاد میکنم این کد رو بزارید هم ساده هست هم مقادیرش براحتی قابل تغییره :
img { background-color : #f6f6f6; padding : 10px; }خیلی ممنون
الآن کادر انداخته ولی توبعضی سایتها دیدم وقتی ماوس میره روی تصویر هم تغییر رنگ میده وهم کادرش رنگش تغییر میکنه یعنی دراصل backgroundحالت پنهان داره با رفتن ماوس نمایان میشه
اگر میشه کدش را بذارین -
shapoor گفت:
خیلی ممنون
الآن کادر انداخته ولی توبعضی سایتها دیدم وقتی ماوس میره روی تصویر هم تغییر رنگ میده وهم کادرش رنگش تغییر میکنه یعنی دراصل backgroundحالت پنهان داره با رفتن ماوس نمایان میشه
اگر میشه کدش را بذاریناین کد را به استایل خود اضافه کنید:
img:hover{ background: #000000 ; } -
دوست عزیز من قطعه کد اول رو در اخر فایل استالی اضافه کردم (همون کلاس)
و کد فراخوانی را هم در ابزارک استفاده کردم اما تصویر را نمایش نمیده فقط پشت زمینه میاد!
http://www.natanzi.ir -
این کدرو برای کلاس امتحان کنید :
#imagecol { padding:3px; background-color:#e7e7e7; -moz-border-radius:5px 5px 5px 5px; border:1px #d3d3d3 solid; opacity : 0.8; align : center } -
این کد را هم قرار دادم
تصویر نمایش داده نمیشه فقط کادر خاکستری...
http://www.natanzi.ir -
دوستان من فقط میخوام دوره عکسم بکم برجسته بشه تا متمایز بشه همین
از کد های بالا استفاده کردم اما فقط کادر خاکستری عکس رو نشون میده و خود عکس داخل نیست
کسی هست راهنمایی کنه؟
M.Dark
best designer
shapoor
پویا آنلایندربارهی این موضوع
- خوراک RSS برای این موضوع
- آغاز شده ۱۲ سال پیش توسط natanzi
- آخرین پاسخ توسط natanzi
- این موضوع
حل‌نشده
