چینش صفحات بدون استفاده از جدول

[zrahimic]

سلام. سال نو همه مبارک.
برای طراحی صفحات وب بدون استفاده از تگ table ( یعنی با استفاده از تگهای Div و UL و LI ) چه مواردی رو باید رعایت کرد؟ برای اینکه اجزای صفحه در محل مورد نظر ثابت بمانند و چینش صفحه به هم نریزد و اینکه در مرورگرهای مختلف به یک صورت نمایش داده شود.

[raravaice]

http://barnamenevis.org/forum/showthread.php?t=98588
http://barnamenevis.org/forum/showthread.php?t=98707

[zrahimic]

من از این روشهایی که شما در این تاپیک ها فرمودین استفاده کرده ام. ولی باز هم نتیجه در IE و FireFox فرق میکنه. مرورگرهای دیگه رو هم تست نکردم.

[ali_kolahdoozan]

از yahoo ایده بگیر . یک table هم نداره

[raravaice]

ولی باز هم نتیجه در IE و FireFox فرق میکنه


اگر تمامیه موارد و جزئیات رو در نظر بگیرید تفوتی وجود نداره چون این روش طراحی نیاز به دقت بیشتری داره



مرورگرهای دیگه رو هم تست نکردم.

اگر روی IE و FF درست کار کنه مشکلی در مرورگر های دیگر نخواهید داشت



از yahoo ایده بگیر . یک table هم نداره


بررسی سورس HTML این سایت یه کم مشکله و نیاز به دانستن کامل HTML و Css داره

[zrahimic]

ممنون.
از این جور سایت ها زیاد دیدم ولی میخوام بدونم هیچ قاعده ی خاصی برای استفاده ازتگها و style ها وجود نداره که صفحه در مرورگرهای مختلف به هم نریزه؟

[ehsan2007]

قاعدش اینکه از div که راحتره استفاده کنی و اندازه هارو به درصد ندید و محاسباتی حساب کنید
مثلا یک div طولشو 500 میگذاری اندازهای div های داخلیشو طوری تعیین میکنی که طولشون از 500 بیشتر نشه

[zrahimic]

من در صفحه ای از تگهای UL و LI استفاده کردم و مقادیر رو به درصد هم ندادم ولی در FireFox مقادیری که تعیین کردم اصلا رعایت نمیشه و اشیای صفحه همه به هم میچسبند.

[zrahimic]

این هم کد:


<ul style="width: 730px; height:450px;">
<li style="clear:left; text-align:right; position:relative; margin-right:140px; margin-top:15px;"><img alt="" src="Images/Name.jpg" /></li>

<li style="float: right; text-align:right; position:relative; margin-right:190px; margin-top:110px;"><img alt="" src="Images/LineTR.jpg" /></li>
<li style="float: right; text-align:right; position:relative; margin-right:0px; margin-top:40px;"><a href="Recitation.aspx"><img alt="کلاس روخوانی قرآن" src="Images/ClassBtn.jpg" /></a></li>
<li style="float: right; text-align:right; position:relative; margin-right:0px; margin-top:110px;"><img alt="" src="Images/LineTL.jpg" /></li>
<li style="clear:right;"></li>
</ul>

[raravaice]

سلام

با ul و li چنین کاری طاقت فرساست شما هر ul رو یک ستون در نظر بگیر و li رو سطر و یا کلا از div استفاده کن تگ dd,dt,dl رو هم امتحان کنید نتایج خوبی داره.

موفق باشید

[cybercoder]

اگر صرفا از استانداردها استفاده کنی نه در آورده های مایکروسافت صحیح ترین کاره

[MKalami]

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

ولی اگر فرصتش رو نداری یه صفحه نمونه درست کن و همین جا بذار تا برات با css طراحیش کنم.

[cybercoder]

بهترین کار استفاده مطلق از css هست

که اونم مشکلاتی داره البته
http://www.artypapers.com/csshelppile/category.php?4

[zrahimic]

میشه این جمله رو توضیح بدید؟

بهترین کار استفاده مطلق از css هست


مگه برای تنظیم حالت ظاهری و محل عناصر صفحه غیر از استفاده از CSS کار دیگه ای هم میشه کرد؟

[MKalami]

مگه برای تنظیم حالت ظاهری و محل عناصر صفحه غیر از استفاده از CSS کار دیگه ای هم میشه کرد؟

متاسفانه بله.

میشه از تگ table,tr,td برای تنظیم محل قرار گیری عناصر استفاده کرد که اتفاقا اکثر مرورگر ها هم بدون مشکل صفحه رو نشون میدن.
از تگ های font, center,strong ,... هم میشه برای برخی تنظیمات ظاهری استفاده کرد که هم حجم کد صفحه رو بالا میبرند و هم اعمال تغییرات رو خیلی مشکل میکنند.

درسته که هنوز از تگ های table,tr,td میشه برای تنظیم قالب صفحات استفاده کرد ولی از وقتی که css به یه استاندارد تبدیل شد , استفاده از این تگها برای طراحی قالب صفحه منسوخ شد.

[zrahimic]

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

[MKalami]

فقط با استفاده از CSS میشه صفحه رو چید. درسته؟

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