مشکل در ایجاد انقطاع بین اجزای یک کادر طراحی شده با جدول

[amir-m]

سلام دوستان
با توجه به اینکه مرورگرهای قدیمی CSS3 را پشتیبانی نمی کنند و border-radius هم در CSS3 گنجانده شده باید برای طراحی کادرهایی با لبه های گرد و نمایش اونها در مرورگرهای قدیمی از تصاویر استفاده کرد. من یه جدول به این شکل طراحی کردم:


<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" style="height: 77px"></td>
</tr>
<tr>
<td rowspan="3" style="width: 397px">&nbsp;</td>
<td><img src="left-top.jpg"></td>
<td style="vertical-align:top; "><img src="horizontal.jpg" ></td>
<td><img src="right-top.jpg"></td>
<td rowspan="3">&nbsp;</td>
</tr>
<tr>
<td><img src="vertical.jpg"></td>
<td>&nbsp;</td>
<td align="right"><img src="vertical.jpg"></td>
</tr>
<tr>
<td><img src="left-bott.jpg"></td>
<td style="vertical-align:bottom "><img src="horizontal.jpg"></td>
<td><img src="right-bott.jpg"></td>
</tr>
</table>

مشکل اینجاست که خطوط فرضی بین جداول در نمایش جدول هم اثر می گذارن و باعث می شن بین اجزای کادر فاصله بیفته
از بین اساتید کی می دونه چطور میشه این مشکل را حل کرد؟ (تصویر ضمیمه را ملاحظه بفرمائید)

[دانیال دزفولی]

من که نفهمیدم مشکل چیه از توی این جدول هم چیزی نمیشه فهمید

[amir-m]

تصویر ضمیمه را بی زحمت ببینید
بین اضلاع کادر فاصله افتاده که تو نمایش قشنگ نیست. می خوام این فاصله ها حذف بشن و اضلاع کادر بچسبن به هم

[_mojitaba_]

ببخشید border رو 0 قرار بدید

[amir-m]

وقتی border را تعریف نکنیم فکر کنم خودش 0 در نظر می گیره. با این حال الان تست کردم بازهم نشد

[refugee]

وقتی border را تعریف نکنیم فکر کنم خودش 0 در نظر می گیره. با این حال الان تست کردم بازهم نشد

بله پیشفرض 0 است بردر ولی در مرورگر IE من هر جایی دیدم حتی داخل تگ های خود html بردر رو 0 قرار میدن .

یه سوال :‌چرا شما 4 تیکه درست کردین ؟

من معمولا همچین تصویری رو بخوام درست کنم به 3 بخش تقسیم میکنم :
1 هدر کادر
2 بادی قسمت میانی که یک پیکسل است و بصورت عمودی تکرار میشه
3. فوتر که قابلیت تکرار نداره و عرض و ارتفاع مشخص مثل هدر کادر

کدها و عکس المان ها را بذارید . بیشتر بررسی کنم .

[refugee]

شما فایل ریست دارید ؟

اول کدهای سی اس اس اینو بنویسید :



*{
margin:0px;
padding:0px;
border:0px;
}


چنانچه با این کد هم نشد سرچ کنید و از فایل های ریستارت استاندارد استفاده کنید اون خطوط انشالله پاک میشه ;)

[amir-m]

بله پیشفرض 0 است بردر ولی در مرورگر IE من هر جایی دیدم حتی داخل تگ های خود html بردر رو 0 قرار میدن .

یه سوال :‌چرا شما 4 تیکه درست کردین ؟

من معمولا همچین تصویری رو بخوام درست کنم به 3 بخش تقسیم میکنم :
1 هدر کادر
2 بادی قسمت میانی که یک پیکسل است و بصورت عمودی تکرار میشه
3. فوتر که قابلیت تکرار نداره و عرض و ارتفاع مشخص مثل هدر کادر

کدها و عکس المان ها را بذارید . بیشتر بررسی کنم .


سلام دوست عزیز.
فایل ریست دارم اما از اون هم کاری بر نمیاد. فایل html و فایل ریست و عکس المان ها را تو یه فایل زیپ ضمیمه کردم. اگه زحمت بکشین یه نگاهی بندازین ممنون میشم

راستی این که فرمودین شما سه تیکه درست می کنید ایده ی خیلی بهتریه نسبت به کاری که من دارم انجام میدم چون اون طوری ارتفاع جدول پویا میشه.این کار را هم تست کردم ولی مشکل اینجاست که بازهم بین بادی قسمت میانی (ستون های عمودی چپ و راست) و هدر و فوتر فاصله می افته. نمی دونم کجای کار را دارم اشتباه می کنم

اگه محبت کنید یه نمونه کد با المان هاش برای من بگذارید یه دنیا ممنون میشم

[دانیال دزفولی]

دوست عزیز مشکل عکساس

یه فاصله حاشیه ی هر عکستون هست

[amir-m]

دوست عزیز مشکل عکساس

یه فاصله حاشیه ی هر عکستون هست

عجب! بعضی وقتها آدم از یه جاهایی سر کار میره که فکرش را هم نمی کنه :قهقهه:
تشکر از شما به خاطر دقتتون :چشمک:

[دانیال دزفولی]

ای بابا .... :قهقهه:

[qartalonline]

بهتره از چنین مواردی در طراحی پرهیز کنید چون border radius چیزی نیست که اگه نباشه سایت به هم ریخته نمایش داده باشه مطمئن باشید اگه برای کاربر این موارد اهمیت داشته باشه مرورگر خودش رو ارتقا میده. البته مواردی استثنای هم هستش مثل درخواست اجباری مشتری که فرق میکنه ولی در کل قابل چشم پوشی هستن.

[amir-m]

بهتره از چنین مواردی در طراحی پرهیز کنید چون border radius چیزی نیست که اگه نباشه سایت به هم ریخته نمایش داده باشه مطمئن باشید اگه برای کاربر این موارد اهمیت داشته باشه مرورگر خودش رو ارتقا میده. البته مواردی استثنای هم هستش مثل درخواست اجباری مشتری که فرق میکنه ولی در کل قابل چشم پوشی هستن.
تشکر از تذکرتون. مسئله به هم ریختگی صفحه نیست.برای سازمانی یه برنامه تحت وب می نویسم(سازمانشون اینترانت داخلی داره) که تقریباً رو تمام سیستم هاشون ویندوز xp سرویس پک یک نصبه و کاربران نمی تونند ویندوز و مرورگرهاشون را ارتقاء بدن چون به خاطر مسائل امنیتی سی دی رم ندارن و usb هاشون هم بسته است. از طرفی استفاده از جداول با کناره های تیز تو کل برنامه هم خیلی قشنگ نیست :لبخندساده:

[refugee]

تشکر از تذکرتون. مسئله به هم ریختگی صفحه نیست.برای سازمانی یه برنامه تحت وب می نویسم(سازمانشون اینترانت داخلی داره) که تقریباً رو تمام سیستم هاشون ویندوز xp سرویس پک یک نصبه و کاربران نمی تونند ویندوز و مرورگرهاشون را ارتقاء بدن چون به خاطر مسائل امنیتی سی دی رم ندارن و usb هاشون هم بسته است. از طرفی استفاده از جداول با کناره های تیز تو کل برنامه هم خیلی قشنگ نیست :لبخندساده:

همونطور که دوستمون گفتن شما تو عکس ها از پسوند .jpg استفاده کردین و حتی تصویر رو هم به اندازه فیکس خود کادر نبود ( حاشیه ها خالیگاه داشت که بجاش پس زمینه نمایش داده میشه ) پس این کار اشتباه بود و باید در اینجور تصاویر از پسوند .png و یا .gif استفاده کنید که تصویر زمینه پشت را نشان نمیده . transparent است .

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

* روی تصاویر بیشتر کار کنید . و یا اگر نیازی نمیبنید حذف کنید و از بردر گوشه تیز استفاده کنید .