PDA

View Full Version : استفاده از div بجای جدول



razeyeh_sh
سه شنبه 14 شهریور 1391, 12:57 عصر
سلام.من شنیدم استفاده از div بهتر از جدوله.ظاهرا باعث میشه صفحات زودتر بالا بیاد.
ولی روش استفاده از دایو هارو نمیدونم.مثلا جدول رو میشه بخش بندی کرد.ولی وقتی از دایو استفاده میکنن چطوری اونو تقسیم میکنن؟
این id دادن به دایو جریانش چیه؟
چجوری اصلا دایو ها کنار هم قرار میگیرن.
چون من چندتا دایو روی صفحه گذاشتم، پشت سرهم بطور عمودی قرار گرفتن.
واینکه چه مزایای دیگه ای داره.

از دوستان خواهش میکنم هرکسی اطلاعاتی داره راهنمایی کنه ونحوه ی استفاده از اون رو اگه امکانش هست در قالب یک مثال یا قالب طراحی شده بگین.
با تشکر از همه ی دوستانی که وقت میزارن و ما مبتدی هارو راهنمایی میکنن.:لبخندساده::تشویق:

Fartaj
سه شنبه 14 شهریور 1391, 13:33 عصر
سلام

ببینید دوست عزیز این سوال بیشتر به بخش طراحی مربوط می شه و اگر شما به این بخش برید با جستجو به مطالب مفیدی دست پیدا می کنید اما با این حال من با یک مثال این مسئله رو توضیح می دم :

فرض کنید قرار است سایت شما قالب سه ستونه داشته باشه که این سه ستون در یک زمینه اصلی قرار می گیره و قرار نیست از جدول استفاده بشه پس می ریم سراغ دیو و css :

یک پروژه جدید باز کنید و به آن یک صفحه و یک فایل css اضافه کنید ابتدا می ریم سراغ فایل css :

در این پروژه قراره ما یک زمینه اصلی داشته باشیم که ستون های سایت در آن قرار می گیرند پس یک کلاس تعریف می کنیم با عنوان main :


.main
{
margin:0px auto auto auto;
width:910px;
background:#506C88;
}



در این کلاس ما margin مربوط به چپ و راست را روی auto می زاریم تا وسط قرار بگیرد .

خوب می ریم سراغ ستون ها :


.right
{
margin-top:4px;
margin-right:5px;
float:right;
width:180px;
position: relative;
margin-bottom: 0px;
}
.left
{
margin-top:4px;
margin-left:5px;
float:left;
width:180px;
position: relative;
}


.center
{
margin-top:25px;
margin-right:5px;
margin-left:5px;
width:530px;
float:left;
}


ما وقتی می خوایم چند تا دیو رو کنار هم بزاریم از float استفاده می کنیم حالا اگر float روی right باشه دیو ها رو از راست می چینه و اگر روی left باشه از چپ کنار هم می چینه

حالا می ریم تو صفحه و فایل css رو به صفحه ضمیمه می کنیم و به این صورت دیو ها رو قرار می دیم :



<div class="right"></div>
یا
<div class="main"></div>