علی ایرانیمدتی هست که به یه مشکل زاقارت تو سی‌اس‌اس برخوردم و راه حل درست و حسابی هم براش پیدا نکردم
به خاطر همین تصمیم گرفتم تا موضوع رو تو انجمن مطرح کنم
در بعضی از پوسته‌ها برای زیبا تر شدن پوسته کنار متن یه قسمت یه آیکونی هم قرار می‌گیره ولی وقتی اون رو راست به چپ می کنی آیکون و متن روی هم می افته و دیگه هرچی padding , margin و این جور چیز ها بدی هیچ تاثیری نداره.
مثال: <img src="http://irani.2007.googlepages.com/css-test.jpg" alt="example" />
-
-
آخ علی جان خوب شد گفتی منم این مشکل رو دارم، ولی فقط با فایرفاکس با IE اینجوری نمیشه هر کاری هم کردم نتونستم درستش کنم. ولی با div میشه اینارو از هم جدا کرد. تنها راه حله به نظر من.
-
من واسه اضافه کردن mini icon به پوسته itheme واسه ی این سایت از همچین سی اس اسی در <span>استفاده کردم و مشکلی نداشت:
post-permalink { background:transparent url(images/permalink.gif) no-repeat scroll right center; color:#999999; float:right; font-size:95%; padding-right:20px; }ببین شاید به دردت خورد.
-
ببین در بعضی مواقع این
float:right;
نظم اون قسمت رو به هم میزنه و نمیشه از این استفاده کرد
کسی نمیدونه کلا چرا اینجوره؟
چون اصلا وقتی حالت rtl میشه این padding , margin قاطی میکنه -
کاش اون تکه سی اس اس رو میزاشتی ببینیم
-
همین! آره... بزرگترین مشکل در فارسی سازی K2 همین مشکله...اگر از خیر آیکون ها بگذریم K2 به راحتی فارسی میشه... اما مشکل از کجاست...؟
میدونید توی این چور پوسته ها تعریف میکنن عکس بره سمت راست یعنی این ... و عکس بره سمت چپ یعنی این... خب؟ البته "من" فکر میکنم مشکل از همین تعریف ها باشه...
اما...
یه راه حلی هست که میگه ... اگر شانس بیاری و جای درست و حسابی به اون عکس داده باشن... میتونی مثلاً بنویسی :
background:transparent url(images/permalink.gif) no-repeat right 0px 2px 0px 0px;
در واقع یعنی یه جوری که عکس بفهمه همون padding رو بهش اعمال میکنی...
اما اگر اکثر اوقات ( مثه من...) اگر شانس نیاری چون یه مقداری فضایی برای عکس تعریف شده عکس ار اون فضا میزنه بیرون و مثلاً نصفش انگار مخفی شده...
تو این جور مواقع بهتره گناهکار و یا علی ستاری عزیز که جزء استادان سایت هستند ما رو راهنمایی بفرمایند...
فعلاً
-
من چون بیشتر از لیست استفاده میکنم به این مشکل برنمی‌خورم اما اینو امتحان کنین ببینین حل میشه یا نه:
display: table-cell; *display: inline-block;اینو بدین به المان مورد نظر.
-
یه چزی بگم: پشمام ریخت (البته خیلی ببخشیدا ولی احساساته دیگه) !
همین یه تیکه کد
display: table-cell;
این همه مدت پدر ما رو در آورده بود
گناهکار جون - خیلی حال کردم
دمت گرم
راستی این * میزاری تو ie7 جواب نمیده -
فقط یه چیز دیگه
اگه میشه یه توضیحی بده که این دستور دقیقا چی کار می کنه و چرا همچین مشکلی به وجود می اومد؟ -
جناب گناهکار من تقریبا مشکلم حل شد. فقط طبق Screenshot زیر در فایرفاکس این دوتا زیر هم میافتن! ولی در IE اینطور نیست. میشه یه راه حل برای این مشکل پیشنهاد کنید؟
تصویر از فایرفاکس: http://babak.ws/temp/FF_screenshot.jpg
تصویر از اینترنت اکسپلورر: http://babak.ws/temp/IE_Screenshot.jpgکدهای سی اس اس هم اینه:
.link-comentariu { background: url('images/icon_comentariu.gif') no-repeat center right; display: table-cell; text-align: left; margin-left:15px; margin-right:0px; margin-top:0px; margin-bottom:0px; padding-left:0px; padding-right:12px; padding-top:0px; padding-bottom:0px; }صفحه Index.php هم کدش اینه:
<div class="feedback" style="display: inline-block; "> <?php wp_link_pages(); ?> <span class="link-categorie">درباره <?php the_category(', ') ?></span>| <span><?php comments_popup_link(__('بدون نظر'), __('يك نظر'), __('% نظر'), 'link-comentariu', __('Comments off')); ?></span> </div> -
بابک جان٬ بی‌زحمت css این کلاس رو هم بذار ببینیم! link-categorie.
بعدش اینکه چرا به این div اولی inline-block دادی؟
-
Gonahkar گفت:
بابک جان٬ بی‌زحمت css این کلاس رو هم بذار ببینیم! link-categorie.
بعدش اینکه چرا به این div اولی inline-block دادی؟اینم CSS کلاس link-categorie.
.link-categorie { background: #FFFFFF url('images/icon_categorie.gif') no-repeat center right; display: table-cell; color: #666666; font-size: 10px; text-align: left; margin-left:10px; margin-right:0px; margin-top:0px; margin-bottom:0px; padding-left:0px; padding-right:10px; padding-top:0px; padding-bottom:0px; }راجع به اون Div هم داشتم باهاش ور میرفتم یادم رفت پاکش کنم!
راستی جناب گناهکار من برای حل این مشکل تو یکی دیگه از قالب هام به جای تغییر در CSS اومدم از دو تا Div به صورت زیر استفاده کردم:
<div class="feedback"> <div id="date" lang="fa"><?php the_time('l، j F Y') ?></div> <div id="reply" lang="fa"><?php comments_popup_link(__('بدون نظر'), __('يك نظر'), __('% نظر'), 'link-comentariu', __('Comments off')); ?></div> </div>فقط مشکل اینه که زیر هم میافتن برای اینکه دو تا Div کنار هم قرار بگیرن چیکار کنم؟
-
راستی جناب گناهکار من برای حل این مشکل تو یکی دیگه از قالب هام...
اگه می‌خوای از این جنگولک بازیا راحت بشی به Divهات width و float مشخص بده خودتو خلاص کن!
این‌جور display تنظیم کردنا رو من بیشتر واسه اونایی گفتم که نمی‌خوان تو کد html قالب دست ببرن و فقط می‌خوان با css کار رو راه بندازن!
-
Gonahkar گفت:
راستی جناب گناهکار من برای حل این مشکل تو یکی دیگه از قالب هام...
اگه می‌خوای از این جنگولک بازیا راحت بشی به Divهات width و float مشخص بده خودتو خلاص کن!
این‌جور display تنظیم کردنا رو من بیشتر واسه اونایی گفتم که نمی‌خوان تو کد html قالب دست ببرن و فقط می‌خوان با css کار رو راه بندازن!ممنون. ديروز مثل اينكه فروم مشكل داشت نتونستم وارد اين بخش بشم جوابتون رو بخونم!
-
مشکل اگر حل شده وضعیتش رو به حل شده تغییر بدید لطفا
-
اگه می‌خوای از این جنگولک بازیا راحت بشی به Divهات width و float مشخص بده خودتو خلاص کن!
این‌جور display تنظیم کردنا رو من بیشتر واسه اونایی گفتم که نمی‌خوان تو کد html قالب دست ببرن و فقط می‌خوان با css کار رو راه بندازن!
دقیقا موافقم. بعضی المان‌های html رو نمیشه به راحتی با دایرکشن rtl سازگار کرد. بهترین راهشم تغییر خود html هست. زور که نیست بابا با css نمیشه!
راستی این display: inline-block هم یه مشکلی داره با IE7 آخرین ورژنش. متن فارسی و انگلیسی با هم باشه به شکل خیلی عجیبی نمایشش می‌ده!!
توی یکی از بتاهاش فکر کنم این مشکل رو نداشت.
Babak
lukadium
بهرنگ
گناهکار
mazdakam
martianboyدرباره‌ی این موضوع
- خوراک RSS برای این موضوع
- آغاز شده ۱۷ سال پیش توسط علی ایرانی
- آخرین پاسخ توسط martianboy
- این موضوع
حل‌شده
