ساخت صفحات به وسیله تگ div

[ho0rezam]

سلام و خشته نباشید به اساتید محترم.

من مدتها هست که در طراحی صفحات از table های تودرتو استفاده میکنم...میخوام دیگه کوچ کنم به div و بیشتر از این تگ استفاده کنم.

چون قبلا مقداری با دیو کار کردم آشنایی مقدماتی باهاش دارم. میخواستم یه سری تکنیک هارو اگه امکانش هست بهم آموزش بدید

مثلا من اگه بخوام به کمک div همچین چیزی که با table ساخته میشه رو ایجاد کنم به چه صورت باید عمل کنم؟



<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>


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

[khanlo.javid]

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



موفق باشید.

[ho0rezam]

خوانایی داره که دوست عزیز.با این وجود این کد میخواد یه تیبل بسازه با دو سطر که در سطر اول دو ستون وجود داره و در سطر دوم یک ستون.
به همچین حالتی:
[ ][ ]
[ ]
که اگه با div این طرح رو بزنین، من به جواب همه سوال هام میرسم.
با تشکر دوست عزیز

[buggen]

سلام دوست عزیز
اینو ببنید


<style>
body {
margin: 0px;
padding: 0px;
border: 0px;
}

table {
border-collapse: collapse;
border-spacing: 0px;
}
</style>
<table style="width:225px;background:red;border:1px solid black;">
<tr>
<td style="width:104;height:150px;">
<table style="background:blue;border:1px solid black;" align="center">
<tr>
<td style="width:50px;height:50px;background:blue;border:1px solid black;float:left;"></td>
<td style="width:50px;height:50px;background:blue;border:1px solid black;float:left;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:225px;height:150px;background:red;border:1px solid black;"></td>
</tr>
</table>
</br>
<div style="width:225px;background:red;border:1px solid black;margin 0 auto;">

<div style="width:104;margin:0 auto;height:150px;">
<div style="width:50px;height:50px;background:blue;border:1px solid black;float:left;margin-top:50%;"></div>
<div style="width:50px;height:50px;background:blue;border:1px solid black;float:left;margin-top:50%;"></div>
</div>
<div style="width:225px;height:150px;background:red;border:1px solid black;" ></div>

</div>



منظورتون همینه؟

[ho0rezam]

سلام...بله دوست عزیز...منظورم همین هست اما نگاه کنید... الان چیزی که نوشتین هم مشکل داره...دقیقا مشکل منم همینه که در div های کنار همدیگه نمیشه مثه table کار کرد... الان float باعث شده کنار همدیگه قرار بگیرن div ها...اما alignشون دچار مشکل شده و دیگه center نیستن.

http://up6.iranblog.com/images/84718080154703557578.png

[buggen]

تو چه browser تست کردید چون من این کد رو تو فایرفاکس تست کردم و برای browser ها بهینه سازی و استاندارد سازی نشده
حالا بازمن یه review می کنم کد رو

آپدیت: من تست کردم تو IE8 مشکل داشت به خاطر سوتی من !
width:104 باید width:104px بشه

[ho0rezam]

ممنون دوسته عزیز از کمکتون.
پس اینجور که متوجه شدم. برای center کردنه align ـه div های فرزند، باید style ـه div پدر رو اولا حتما بهش width داد و از همه مهمتر margin رو auto بذاریم درسته؟

ویرایش:
راستی منظورتون از بهینه سازی و استاندارد سازی نشده، چی بود؟

[buggen]

ممنون دوسته عزیز از کمکتون.
پس اینجور که متوجه شدم. برای center کردنه align ـه div های فرزند، باید style ـه div پدر رو اولا حتما بهش width داد و از همه مهمتر margin رو auto بذاریم درسته؟

خواهش میکنم ، بله درسته


راستی منظورتون از بهینه سازی و استاندارد سازی نشده، چی بود؟
مثلا همین مورد استاندارد میگه باید px گذاشته بشه ولی چون من عجله کردم نذاشتم فایرفاکس درست بود ولی ie مشکل داشت ولی با رعایت اون همه درست میبینن
البته موارد دیگه ای هم هست مثلا شما از امکانات css3 استفاده میکنی که ie 6-8 ساپورت نمی کنه باید کد رو بهینه سازی کرد (نمی دونم این اصطلاح درسته یا نه!) که تو این مورد مثلا ، یکی از راه ها استفاده از library جاوا اسکریپتی css3pie هست و ...

[ho0rezam]

خواهش میکنم ، بله درسته
مثلا همین مورد استاندارد میگه باید px گذاشته بشه ولی چون من عجله کردم نذاشتم فایرفاکس درست بود ولی ie مشکل داشت ولی با رعایت اون همه درست میبینن
البته موارد دیگه ای هم هست مثلا شما از امکانات css3 استفاده میکنی که ie 6-8 ساپورت نمی کنه باید کد رو بهینه سازی کرد (نمی دونم این اصطلاح درسته یا نه!) که تو این مورد مثلا ، یکی از راه ها استفاده از library جاوا اسکریپتی css3pie هست و ...

خب با کمکتون و یه مقدار تمرین دیگه دستم اومد div ، خیلی بهتر و راحت تره نسبت به table به نظرم و همچین جمع و جور تر و خوش فرم تره.
در مورد بهینه سازی هم باهاتون موافقم...اصلا یکی از بدبختی های ما هم همینه دیگه...الان به طور مثال واسه gradient کردن باید 4تا نوشت تا هر کدوم از گروه مرورگر ها ساپورت کنن...من خودم رو سیستمم (فایرفاکس، کروم، سافاری،اپرا) رو نصب کردم تا کارهارو باهاشون تست کنم.

IE که کلا خدا بیامرزه، امیدی بهش نیست :دی:دی اما این کروم هم گاهی روی px ها اذیت میکنه و کلا یکی دوتا بالا پایین میکنه، مخصوصا رو padding ها...رویه این text-shadow هم که کلا مشکل داره

[hakan648]

سلام
به این کد دقت کنید :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Centered Div</title>
</head>

<body>

<div style="background-color: gray; padding: 10px; margin: 50px auto; width: 400px;">
<div style="height: 100px; background-color: red; width: 200px; float: left;"></div>
<div style="height: 100px; background-color: blue; width: 200px; float: left;"></div>
<div style="clear: both;"></div>
</div>

</body>

</html>



این کد رو در IE7,8 + Opera + FF + Chrome تست کردم و درست کار کرد .
چیزی که مهم هست اینه که همین کد بدون عبارت DOCTYPE در IE درست کار نمیکرد !
پس همیشه عبارت DOCTYPE رو هم در صفحه هاتون داشته باشید - چون بر نوع تفسیر مرورگر از کدها تاثیر گزار هست .

در ضمن DeveloperTools در IE + فایرباگ و Web Developer در FireFox رو حتما داشته باشید !

موفق باشید ...