ویکی‌پدیا:ویکی‌پروژه سی‌اس‌اس/۱
بیان مساله[ویرایش]
من قبلا با این مشکل مواجه شده بودم. وقتی یک object با float:left داشته باشی، فایرفاکس متنی رو که دور این object قرار گرفته درست render نمی‌کنه (البته به شرط اون که RTL باشه) به این معنی که اگر اون متن حاوی یک لسیت باشه (چه ol چه ul) آیتم‌های لیست چندین پیکسل سمت راست‌تر از جایی که باید باشن render می‌شن. حجت ۱۰:۳۹, ۱۶ ژوئیه ۲۰۰۶ (UTC)
مثال[ویرایش]
ویکی‌پدیا:ویکی‌پروژه سی‌اس‌اس/۱/مثال
پیشنهاد راه حل[ویرایش]
راه حلش ساده بود، اون P ای که حاوی متن هست هم باید براش style تعریف کنی (clear:right) و برای لسیت هم باید تعریف کنی که float:right. منتها هنوز نتونستم راهی پیدا کنم که فقط با کمک monobook.css بشه این مشکل رو حل کرد. امیدوارم که راهی باشه. حجت ۱۰:۳۹, ۱۶ ژوئیه ۲۰۰۶ (UTC)
- خوب اگر چند خط زیر را به monobook.css اضافه کنیم فکر کنم راه حلت با کمک monobook.css حل میشه.
- #bodyContent p {
- clear: right;
- }
- #bodyContent ol {
- float: right;
- }
- #bodyContent ul {
- float: right;
- }
- البته حسام می‌گه اگر بتونیم خطوط را بشکانیم و از clear استفاده نکنیم بهتر است. رضا محمدی ۱۳:۲۹, ۱۶ ژوئیه ۲۰۰۶ (UTC)
یه راه حل دیگه که بدون استفاده از Clear عمل می‌کنه، و به همین خاطر خطوط به زیر باکس سمت چپ رونده نمی‌شن (و همونی میشه که ما از یه float انتظار داریم) هم وجود داره که من دارم روش کار می‌کنم. در واقع این که لیست‌های ما از سمت راست شوت می‌شن بیرون دو دلیل داره. یکی‌اش مساله‌ای بود که در مورد float و فایرفاکس گفتم. اما دومیشس اینه که اصلا خود باکس آبی کم‌رنگی که متن‌ها توشن (همون bodyContent) هم یک float چپه با 12.2em انحراف به چپ. بنابراین میشه سر فایرفاکس گول مالید که لیست‌ها رو هم به اندازه کافی (یعنی 18.2em) سمت چپ‌تر بذاره. تا این‌جاشو من رسیدم:
html>body DIV#bodyContent ol{ margin-right: 18.2em; margin-left: 0; }
اما هنوز کار داره.
ضمنا ایرادی که به راه حل شما در شکل فعلی‌اش وارده اینه که باعث میشه کل متن بره زیر باکس سمت چپی، که منظور ما این نیست. ایراد مال من هم اینه که یه مارجین مجازی سمت چپ متن ایجاد می‌کنه و متن لب به لب باکس نمی‌شه.
حجت ۲۰:۱۷, ۱۶ ژوئیه ۲۰۰۶ (UTC)
بالاخره راهش پیدا شد، اما در کمال ناباوری من (!) باید margin-left رو تنظیم کنی، تا از سمت راست برات فاصله بده! (چراشو نمی‌دونم!!)
جواب معما، اینه که این متن رو در usermonobook.css وارد کنین:
html>body DIV#bodyContent ol{ margin-left: 17.2em; }
html>body DIV#bodyContent ul{ margin-left: 17.2em; }
راه حل بالا یک سری مشکلات جدید از جمله مشکل ۵ام رو به وجود می‌آره. من این راه حل رو تست کردم بد نبود:
html>body DIV#bodyContent>ol, html>body DIV#bodyContent>ul{ margin-right: 19.5em; }
--سروش رادپور ۰۸:۲۶, ۱۹ ژوئیه ۲۰۰۶ (UTC)
- سروش جان، همین صفحهٔ کاربری من رو نگاه کن، با تغییر شما، اون UL که پایین‌تر قرار داره، زیادی می‌ره سمت چپ. با تغییر من، جاش درسته ولی از سمت چپ تا آخر صفحه نمی‌رسه. من خیلی گیج شدم راستش. باید یه فکر اساسی کرد. حجت ۱۰:۵۸, ۱۹ ژوئیه ۲۰۰۶ (UTC)
با این روش، وقتی یک float در سمت چپ داریم، لیست‌های سمت راستش توی کادر می‌مونن، اما یه ایراد بزرگ داره: وقتی سمت چپ لسیتی هیچ object راه با float نداریم، الکی از چپ margin دادیم و جای متن رو تنگ کردیم! پس هنوز راه حل نهایی نیست. حجت ۲۱:۴۷, ۱۸ ژوئیه ۲۰۰۶ (UTC)
امیدوارم این کار کنه، خیلی تستش کردم (نیم ساعت!) ولی فقط رو فایر فاکس:
div#content ul { display: table; } body.ns-6 div#content ul#filetoc, body.ns-14 div#content ul { display: block; } html > body div#content ol { clear: left; }
--سروش رادپور ۱۵:۵۹, ۱۹ ژوئیه ۲۰۰۶ (UTC)
- باید بگم در نگاه اول که همه مشکلات رو حل کرد، اما باید حسابی امتحانش کنم. در هر حال ایدهٔ خیلی خوبی بود. ضمناً باید بگم که در زمینه CSS جداً گل می‌کاری. حجت ۱۷:۳۵, ۱۹ ژوئیه ۲۰۰۶ (UTC)
من از اون موقع تا حالا تستش (روی فایرفاکس و konqueror ) کردم و هنوز به مشکلی بر نخوردم. میشه تو قهوه خونه اعلام کرد که کاربرها به اضافه کنن اگر مشکلی نبود به CSS اصلی اضافه شه. --سروش رادپور ۱۷:۴۶, ۱۹ ژوئیه ۲۰۰۶ (UTC)
- ببین من نفهمیدم که اون سطر آخر رو برای چی اضافه کردی (همون که OL ها Clear:Left باشن.) قرار شد که با Clear کار نکنیم دیگه! برو به صفحهٔ مثال که بالا گذاشتم. Clear باعث میشه که لسیت شماره دار بیفته پایین، و ما اینو نمی‌خوایم. حجت ۱۸:۱۸, ۱۹ ژوئیه ۲۰۰۶ (UTC)
من اصلا یه راه حل دیگه پیدا کردم، که ظاهراً ایرادای قبلی رو هم نداره:
#bodyContent ol, #bodyContent ul {
display:table;
border:1px solid #F8FCFF;
}
اگر border رو نظاری عمل نمی‌کنه!!
شاید این بهتر باشه :
div#content ul ,html > body div#content ol { display :table; } body.ns-6 div#content ul#filetoc, body.ns-14 div#content ul { display: block; }
--سروش رادپور ۱۹:۱۱, ۱۹ ژوئیه ۲۰۰۶ (UTC)
این یکی دیگه آخرین چیزیه که به ذهنم می‌رسه. فقط هم تو فایرفاکس اصلاح می‌کنه:
html>body DIV#bodyContent ol, html>body DIV#bodyContent ul {
display:table;
border:1px solid #F8FCFF;
}
ضمناً در مورد راه حل‌هایی که می‌فرستی، تو توشون از ns-6 استفاده می‌کنی اما من تو صفحه‌ام فقط ns-2 دارم، و اصلا دستورات ns-6 تو روشون اثر نداره. نمی‌دونم ویکی‌پدیا این ns رو چه‌جوری render می‌کنه از کجاش می‌آره. حجت ۱۹:۲۰, ۱۹ ژوئیه ۲۰۰۶ (UTC)
این ns مربوط به namespace هاست، که مثلاً فضای نام ۶ برای عکس‌هاست. این تغییر در راستای این باگ نبود. اثر آن را می‌توانید در نوار بالای این صفحه یا هر عکس دیگری ببینید. --سروش رادپور ۱۹:۴۱, ۱۹ ژوئیه ۲۰۰۶ (UTC)
