NabiKAZ
Well-Known Member
سلام
يه مدته زديم تو کار div .
چند تا سوال کوچولو هست که ممنون ميشم راهنمايي کنيد.
1. تا چه حد استفاده از div رو بجاي table پيشنهاد ميکنيد. لطفا در اين باره کمي توضيح بديد و نظر بديد.
2. اول بگيد ببينم کدوم يکي از اين کد ها بيشتر با اصول طراحي همخوني داره.
البته در نظر بگيريد که مقصود جدول بندي بزرگ نيست ، بلکه هدف تراز بندي چند عکس و نوشته کم مي باشد.
3. دو کد زير رو مقايسه کنيد، به نظر مياد با هم فرقي نميکنند. ولي اگر اجراشون کنيد تفاوت رو ميبينيد. به قسمت پايين تصوير توجه کنيد.
اين تفاوت از کجا ناشي ميشه.
4. توسط table ها ميشه نوشته درونش رو middle کرد، در مورد div چطور ميشه اين خاصيت رو ست کرد (منظور valign=middle است)
اين دو کد رو با هم مقايسه کنيد:
5. در مورد table ها ميشه ارتفاعي در حد چند پيکسل براي اونها قرار داد که در خيلي جاها ميتونه مفيد باشه ، اما در مورد div اينکار امکان پذير نيست، راه حل چيست؟
مقايسه کنيد:
6. اين کد دو خروجي مشابه دارد، بفرمائيد کداميک اصولي تر است (هم از نظر نسبي و هم مطلق)
(تصویر ضمیمه است)
باتشکر
نبي
يه مدته زديم تو کار div .
چند تا سوال کوچولو هست که ممنون ميشم راهنمايي کنيد.
1. تا چه حد استفاده از div رو بجاي table پيشنهاد ميکنيد. لطفا در اين باره کمي توضيح بديد و نظر بديد.
2. اول بگيد ببينم کدوم يکي از اين کد ها بيشتر با اصول طراحي همخوني داره.
البته در نظر بگيريد که مقصود جدول بندي بزرگ نيست ، بلکه هدف تراز بندي چند عکس و نوشته کم مي باشد.
HTML:
<table border="1" width="300" id="table2" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#000000">
<tr>
<td width="50%" align="center">a</td>
<td width="50%" align="center">a</td>
</tr>
</table>
HTML:
<center>
<div style="width:300px; border: 1px solid #000000;">
<div style="width:50%; float:right; border-left: 1px solid #000000;">a</div>
<div style="width:50%; float:right">a</div>
</div>
</center>
3. دو کد زير رو مقايسه کنيد، به نظر مياد با هم فرقي نميکنند. ولي اگر اجراشون کنيد تفاوت رو ميبينيد. به قسمت پايين تصوير توجه کنيد.
اين تفاوت از کجا ناشي ميشه.
HTML:
<div style="border: 1px solid #000000; width:150px;">
<img border="0" src="#" width="150" height="60">
</div>
HTML:
<div style="border: 1px solid #000000; width:150px;">
<img border="0" src="#" width="150" height="60"></div>
4. توسط table ها ميشه نوشته درونش رو middle کرد، در مورد div چطور ميشه اين خاصيت رو ست کرد (منظور valign=middle است)
اين دو کد رو با هم مقايسه کنيد:
HTML:
<table border="1" width="31%" id="table1" height="84" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#000000">
<tr>
<td valign="middle">salam</td>
</tr>
</table>
HTML:
<div style="width:282px; height:100px; border: 1px solid #000000;">
salam
</div>
5. در مورد table ها ميشه ارتفاعي در حد چند پيکسل براي اونها قرار داد که در خيلي جاها ميتونه مفيد باشه ، اما در مورد div اينکار امکان پذير نيست، راه حل چيست؟
مقايسه کنيد:
HTML:
<table border="0" width="100%" id="table3" cellspacing="0" cellpadding="0" height="4" bgcolor="#F7F7F7">
<tr>
<td></td>
</tr>
</table>
HTML:
<div style="height:4px; background-color:#F7F7F7;">
</div>
6. اين کد دو خروجي مشابه دارد، بفرمائيد کداميک اصولي تر است (هم از نظر نسبي و هم مطلق)
(تصویر ضمیمه است)
HTML:
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<style>
INPUT {
color: #000080; font-family: Tahoma; font-size: 10pt; border-style: solid; border-width: 1px; background-color: #D6EEFF; background-image: url('images/back_button.gif')
}
#input_en {
direction: ltr; text-align: left; background-color: #F5FBFF; background-image: url('');
}
#input_fa {
direction: rtl; text-align: right; background-color: #F5FBFF; background-image: url('');
}
</style>
</head>
<body>
<br>
<form method="POST" action="../mozeh/admin.php">
<div align="center">
<center>
<table border="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#111111" width="262" id="table1" height="167" dir="rtl">
<tr>
<td width="80%" colspan="2" height="20">
<img border="0" src="http://forum.majidonline.com/images/title_password.gif" width="264" height="54"></td>
</tr>
<tr>
<td width="37%" height="36" bgcolor="#EFEFEF" style="border-right: 1px solid #000000">
<p align="left" style="text-align: center"><font face="Tahoma" size="2">
نام کاربری:</font></td>
<td width="56%" height="36" bgcolor="#EFEFEF" style="border-left: 1px solid #000000">
<p align="center" dir="ltr">
<font face="Tahoma">
<input name="User" size="18" id="input_en" style="float: right"></font></p>
</td>
</tr>
<tr>
<td width="37%" height="32" bgcolor="#EFEFEF" style="border-right: 1px solid #000000">
<p align="left" style="text-align: center"><font face="Tahoma" size="2">کلمه
عبور:</font></td>
<td width="56%" height="32" bgcolor="#EFEFEF" style="border-left: 1px solid #000000">
<p dir="ltr"><font face="Tahoma">
<input name="Pass" size="18" type="password" id="input_en" style="float: right"></font></td>
</tr>
<tr>
<td width="80%" colspan="2" bgcolor="#F7F7F7" style="border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000">
<p align="center" style="text-align: center">
<input type="submit" value=" ورود... " style="border:1px solid #646464; font-family: Tahoma; font-size: 10pt; background-color:#EFEFEF"></td>
</tr>
</table>
<p align="center"> </p>
<div align="center">
<img border="0" src="http://forum.majidonline.com/images/title_password.gif" width="264" height="54"><div style="width:264px; border-left:1px solid #000000; border-right:1px solid #000000; border-bottom:1px solid #000000; background-color:#F7F7F7;">
<div style="height:8px; background-color:#EFEFEF;">
</div>
<div style="width:37%; height:30px; float:right; background-color:#EFEFEF;">
<font face="Tahoma" size="2">نام کاربری:</font></div>
<div style="width:63%; height:30px; float:right; background-color:#EFEFEF;">
<input name="User" size="18" id="input_en" style="float: right"></div>
<div style="width:37%; height:30px; float:right; background-color:#EFEFEF;">
<font face="Tahoma" size="2">کلمه عبور:</font></div>
<div style="width:63%; height:30px; float:right; background-color:#EFEFEF;">
<input name="User" type="password" size="18" id="input_en" style="float: right"></div>
<div style="height:8px; background-color:#F7F7F7;"></div>
<div style="height:33px; width:262px">
<input type="submit" value=" ورود... "></div>
</div>
</div>
</center>
</div>
<p align="center">
<font face="Tahoma" size="2">
<input type="hidden" value="login" name="Flag"></font></p>
</form>
</div>
</center>
</body>
</html>
باتشکر
نبي
پیوست ها
آخرین ویرایش: