میلاد قاضی پور
شنبه 01 اسفند 1388, 23:17 عصر
سلام . همه ما سبک ها و روشهای خودمون رو برای ساختمان بندی فرممون داریم اما آشنایی با بعضی روشهای دیگه باعث میشه تا در مواردی با توجه به اقتضا ، راحت ترین و اصولی ترین روش رو برای انجام کارمون به کار ببریم . مثلا میخوایم سه لیبل با عناوین "نام" و "ایمیل" و "کامنت" و همچنین سه کنترل اینپوت مقابل هر کدوم قرار بدیم .و میخوایم بدون استفاده از تیبل کاری کنیم که لیبل ها در چپ، و کنترلهای اینپوت در راست قرار بگیرن . خب من چکار باید بکنم ؟
به تصویر زیر دقت کنید :
http://sites.google.com/site/myuploadedimages/_/rsrc/1266694531224/home/barna-1/frm-without-table.JPG
خوشبختانه سی اس اس دست من رو برای اینکار باز گذاشته . در قدم اول به سی اس اس میریم و با نوشتن کد زیر ، خصوصیات مورد نظرمون رو برای یک چهار چوب کلی که به جای ساختمان تیبل قراره ازش استفاده کنیم مشخص میکنیم :
fieldset
{
padding:0 10px;
width:400px;
}
اما من میخوام این چهار چوب قسمتی هم برای عنوانش داشته باشه . مثل اونچه در تصویر میبینید بخشی برای عنوان نسبت میدم . پس این کد هم در سی اس اس به این کار مربوط میشه :
legent
{
font-weight:bold;
font-size: 20px;
}
کارمون ساده شد . نوبت میرسه به استایل بخشهای مربوط به لیبل و کنترلهای اینپوت.کد اول و دوم به ترتیب مختص لیبل و اینپوت می باشند :
ul
{
margin: 0;
padding: 0;
list-style: none;
}
li
{
margin:0;
padding: 10px 0;
clear:both;
}
دیگه با سی اس اس کاری نداریم . نوبت برداشت کاشته هاست . پس به قسمت html میریم و بعد از نوشتن کد های زیر آنچه که قرار بود ایجاد کنیم رو خواهیم داشت .
<fieldset>
<legend>Contact:</legend>
<form method="post" action="contact_demo.php" >
<ul>
<li><label for="name">Name: *</label>
<input type="text" name="name" id="name" size="30" value="<?=$name?>" /></li>
<li><label for="email">Email: *</label>
<input type="text" name="email" id="email" size="30" value="<?=$email?>" /></li>
<li><label for="comment">Comment: *</label></li>
<li><textarea rows="4" cols="" name="comment" id="comment" ><?=$comment?></textarea></li>
<li><input type="submit" name="submit" id="submit" value="submit"/></li>
<li> </li>
</ul>
</form>
</fieldset>
به تصویر زیر دقت کنید :
http://sites.google.com/site/myuploadedimages/_/rsrc/1266694531224/home/barna-1/frm-without-table.JPG
خوشبختانه سی اس اس دست من رو برای اینکار باز گذاشته . در قدم اول به سی اس اس میریم و با نوشتن کد زیر ، خصوصیات مورد نظرمون رو برای یک چهار چوب کلی که به جای ساختمان تیبل قراره ازش استفاده کنیم مشخص میکنیم :
fieldset
{
padding:0 10px;
width:400px;
}
اما من میخوام این چهار چوب قسمتی هم برای عنوانش داشته باشه . مثل اونچه در تصویر میبینید بخشی برای عنوان نسبت میدم . پس این کد هم در سی اس اس به این کار مربوط میشه :
legent
{
font-weight:bold;
font-size: 20px;
}
کارمون ساده شد . نوبت میرسه به استایل بخشهای مربوط به لیبل و کنترلهای اینپوت.کد اول و دوم به ترتیب مختص لیبل و اینپوت می باشند :
ul
{
margin: 0;
padding: 0;
list-style: none;
}
li
{
margin:0;
padding: 10px 0;
clear:both;
}
دیگه با سی اس اس کاری نداریم . نوبت برداشت کاشته هاست . پس به قسمت html میریم و بعد از نوشتن کد های زیر آنچه که قرار بود ایجاد کنیم رو خواهیم داشت .
<fieldset>
<legend>Contact:</legend>
<form method="post" action="contact_demo.php" >
<ul>
<li><label for="name">Name: *</label>
<input type="text" name="name" id="name" size="30" value="<?=$name?>" /></li>
<li><label for="email">Email: *</label>
<input type="text" name="email" id="email" size="30" value="<?=$email?>" /></li>
<li><label for="comment">Comment: *</label></li>
<li><textarea rows="4" cols="" name="comment" id="comment" ><?=$comment?></textarea></li>
<li><input type="submit" name="submit" id="submit" value="submit"/></li>
<li> </li>
</ul>
</form>
</fieldset>