حالت موضوعی | حالت خطی

Azemati

خب تصمیم گرفتم همچین تاپیکی ایجاد کنم تا حداقل سوال‌های متفرقه خودم از سی‌اس‌اس رو (که شاید ارزش ایجاد یک تاپیک جداگانه رو نداشته باشه) بپرسم. شما هم اگه خواستین سوال‌هاتون رو بپرسید. خوب می‌شه. با توجه به اینکه ملت می‌تونن در بین محتویات این تاپیک هم جستجو کنند (روشش رو که بلدین؟ همین بالا دست چپ، جستجو در این مبحث) شاید به درد آیندگان و حتی حال! خورد.

نکته‌ایی که باید بهش اشاره کنم اینه که چون قراره این تاپیک مفید بشه و زیاد هم وقت بازدیدکننده رو نگیره، پست‌های افرادی که کمکی به حل مشکل دوستان نکنه (حتی اگه اسپم نباشه) ترجیحا پاک می‌شه. دیگه تو تاپیک خودم که می‌تونم از این کارها بکنم!

Azemati

اولین سوال رو خودم می‌پرسم، برای فاصله بین دو خط یک لیست چطور بیشتر میشه؟ به طوری که در آی یی و اف اف به خوبی اعمال بشه. البته لیستی که به جای اون دایره های سیاه پیشفرض از یک عکس در ابتدای هر خط استفاده شده. یعنی:

[تصویر: zy2d1.jpg]

کد:

list-style-image : url(images/test.gif);

البته به شرطی که همچین مشکلی پیش نیاد:

[تصویر: oic4jt.jpg]

navid66

برای زیاد کردن فاصله ها می تونی از دستور line-height استفاده کنی . مثلا :

کد:

line-height:200%;

برای گذاشتن تصویر هم اون دستور list-style-image اصلا جالب نیست چون همین مشکلی که نشون دادی پیش میاد. بهترین روش استفاده از تصویر پس زمینه هست. مثلا اینطوری :

کد:

ul.test li {

    background:transparent url(images/test.gif) no-repeat right 7px;

    padding-right:10px;

}

Azemati

درسته، برای دادن فاصله از اون دستور استفاده می‌شه. این راه شما هم ایده ی خوبیه. اگه حل نشه باید برم سراغ همین.

ولی بعید می‌دونم راه حل نداشته باشه اون مشکلی که گفتم.

**rockboy_62**

navid66 نوشته شده:برای زیاد کردن فاصله ها می تونی از دستور line-height استفاده کنی . مثلا :

کد:

line-height:200%;
padding-right:10px;
}[/code]

اگه in line-height تو مرورگر اینترنت اکسپلورر جواب نده چی کار باید کرد.خیلی موقعها این اتفاق رخ میده

navid66

بعید می دونم دستوری باشه که با اینترنت اکسپلورر مشکلی باشه. کلا یه دستور جا افتاده هست. به هر حال راه دیگش اینه که از margin و padding بسته به نوع طراحی استفاده بشه .

**amir abbas**

امیر جان یه پیشنهاد. برای سایت های فارسی اولین دستوری که به برگه سبکت اضافه می کنی همیشه این باشه

کد:

list-style: none;

این کار تمامی اون دکمه ها و نقطه های کنار گزینه های لیست رو حذف می کنه. این دایره ها و نقطه های کنار گزینه های لیست برای سایت فارسی مثل سمه. انواع و اقسام نا سازگاری ها رو ایجاد می کنن. به جاش شما اون تصویر رو بذار تو پس زمینه تگ a

به این شکل عمل کن
اول به ul باید padding , margin صفر بدی
بعد li ها رو display inline کنی
آخر هم تگ های a داخل li ها رو display block کنی

بعد از این دیگه خیالت راحته که هر کاری کنی تو همه مرورگر ها یکسان دیده میشه و اتفاقات عجیب و غریب برات نمیافته. وقتی از این شیوه استفاده کنی میتونی برای افزایش فاصله بین گزینه های لیست هم از padding استفاده کنی.

navid66

در ادامه صحبت های امیرعباس عزیز کلا توصیه می شه از فایل reset.css استفاده کنی. من شخصا مال یاهو رو می پسندم...

ic.ofogh

فکر کنم با استفاده از ul , li مشکل حل بشه:confused:
نمونه کد:

کد:

[align=left].mt ul{list-style-type: none;margin: 0px;padding:0 10px 10px 20px}

.mt li {padding-right:18px;background:url(images/bull1.jpg) right no-repeat; line-height:1.3em; text-align:right;direction:rtl; padding-bottom:1px;}[/align]

حالا خودت میتونی در قسمت background عکس مورد نظر کوچیک که چه دایره باشه یه مربع کوچولو بزرای.
یه تست بزن ببینی بدک نیست. Rolleyes

Azemati

اول ممنون از پاسخ‌ها؛ یک سوال دیگه؛ من برای فرم جستجوی سایتم از یک تصویر استفاده کردم، در واقع در بک گراند input یک تصویر گذاشتم، حالا می خوام وقتی متن رو داخلش می نویسم جوری باشه که داخل این تصویر من قرار بگیره، به عبارتی می خوام بهش Padding بدم، منتهی استفاده از کد در آی یی و اف اف رفتارهای عجیبی رو باعث میشه.

[تصویر: 2eg4txd.gif]

چه راهی پیشنهاد میشه برای حل این معضل!؟

حالت موضوعی \| حالت خطی سوال و جواب‌های متفرقه Css
نویسنده	پیام