طراحی layout سایت با div [بایگانی]

elmira_63

دوشنبه 15 آذر 1389, 07:40 صبح

سلام دوستان
من یه سایتی طراحی کردم با استفاده از table حالا به دلایل بسیاری می خوام دوباره با div طراحیش کنم ولی به مشکل های متعددی بر خورد کردم که واقعا داره دیوونم می کنه
من میخوام یه table 3*3 رو با div طراحی کنم البته به کمک css ولی توی css زیاد وارد نیستم و هر کاری میکنم این div ها همش بهم میریزه یه بارم که با هزار و یک دردسر تونستم کنار هم بچینمشون توی مرور گر های مختلف بهم میریخت
عکس این جدول رو اینجا براتون میذارم بعد خدمتتون میگم که چه مشکل هایی برای طراحی این جدول با div دارم

63160

1) div ها دقیقا به همین ترتیب در مرورگر های مختلف در کنار هم قرار نمی گیرند
2) div2 و div5 و div8 باید در رزولیشن های مختلف عرض اون تغییر کنه تا این جدول در تمام مانیتورها تمام صفحه بشه البته divهای کناری (div1,3,4,6,7,9) عرضشون ثابته
3) با تغییر ارتفاع div5 ارتفاع دو div کناری آن (div4,6) نیز تغییر کند
4) خصوصیت valign برای div5 ، وسط (middle) شود

دوستان اگه کسی میتونه این جدول رو طراحی کنه واقعا خیلی از مشکلاتم رو حل کرده

1bsavad

دوشنبه 15 آذر 1389, 09:43 صبح

با خود div هم میشه جدول طراحی کرد اما
شما اول ببینید چرا می‌خواید برید سراغ div؟ در برخی موارد table ارجح بر div هست.
کار با div هایی که عرض اونها با % تعیین بشه نه px ، واقعا سخته.
div اغلب در طراحی هایی با عرض ثابت (مثلا 960) به کار میره.
اگر مایل بودید با عرض ثابت 960 کار کنید، می‌توانید از سایت 960.gs استفاده کنید یا از فریم ورک های سبک تری که بر مبنای اون ساخته شده.

Keramatifar

دوشنبه 15 آذر 1389, 11:01 صبح

با خود div هم میشه جدول طراحی کرد اما
شما اول ببینید چرا می‌خواید برید سراغ div؟ در برخی موارد table ارجح بر div هست.
کار با div هایی که عرض اونها با % تعیین بشه نه px ، واقعا سخته.
div اغلب در طراحی هایی با عرض ثابت (مثلا 960) به کار میره.
اگر مایل بودید با عرض ثابت 960 کار کنید، می‌توانید از سایت 960.gs استفاده کنید یا از فریم ورک های سبک تری که بر مبنای اون ساخته شده.
طراحی Layout با table به هیچ وجه قابل قبول نیست، table فقط زمانی کاربرد داره که بخواهید واقعا یک جدول ایجاد کنید
در طراحی با div محدودیتی وجود نداره و سایزهای درصدی نیز مشکل خاصی ندارند.

Keramatifar

دوشنبه 15 آذر 1389, 11:20 صبح

براتون یک کد نوشتم که پیاده سازی شکلتون با div و css است

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html>
<head>
<title>sample</title>
<style type="text/css">
*{margin: 0; padding: 0;}
div#outerDiv{
width: 100%;
background-color: gray;
}
div#headerDiv{
width: 100%;

}
div#contentDiv{
width: 100%;
height: 400px;
}
div#footerDiv{
width: 100%;
height: 150px;
}
.leftDiv{
float: left;
background-color: red;
width: 20%;

}
.centerDiv{
float: left;
background-color: white;
width: 60%;
}
.rightDiv{
float: left;
background-color: blue;
width: 20%;
}

</style>
<link media="print" type="text/css" href="http://www.computerhope.com/print.css" rel="stylesheet">
</head>
<body>
<div id="outerDiv">
<div id="headerDiv">
<div class="leftDiv">
<p>div1 <br /> <br /></p>
</div>
<div class="centerDiv">
<p>div2 <br /> <br /></p>
</div>
<div class="rightDiv">
<p>div3 <br /> <br /></p>

</div>
</div>
<div id="contentDiv">
<div class="leftDiv">
<p style="height: 390px;">div4</p>
</div>
<div class="centerDiv">
<p style="height: 390px;">div5</p>
</div>
<div class="rightDiv">
<p style="height: 390px;">div6</p>
</div>
</div>
<div id="footerDiv">
<div class="leftDiv">
<p style="height: 50px;">div7</p>
</div>
<div class="centerDiv">
<p style="height: 50px;">div8</p>
</div>
<div class="rightDiv">
<p style="height: 50px;">div9</p>
</div>
</div>
</div>
</body>

</html>

elmira_63

دوشنبه 15 آذر 1389, 13:10 عصر

ممنون از آقای کرامتی فقط یه چند تا سوال
1) در css فرق استفاده از کاراکتر . با # چیه ؟؟؟
یعنی چه موقع از دات استفاده می شه چه موقع از # ؟؟؟؟
2) و این که چطور یه متن رو میشه در وسط یه div قرار داد (از لحاظ عمودی نه افقی)
3) در این کدی که شما گذاشتید عرض تمام div ها با % مشخص شده اند در صورتی که مشکل من اینه که div های کناری (div1,3,4,6,7,9) باید عرض ثابت داشته باشند.

elmira_63

سه شنبه 16 آذر 1389, 07:10 صبح

بازم مثل ده ها دفعه پیش که سعی کردم سایتم رو با div طراحی کنم و نشد این بار هم باید دست به دامن table بشم .
وقتی نمی شه یه table به این سادگی رو با div طراحی کرد نمی دونم چرا اینقدر از مزایای استفاده از div می گن

DES - Young

سه شنبه 16 آذر 1389, 08:44 صبح

درود

دوست من اگه فقط میخوای یه جدول بسازی بهترین راه table هست ولی اگه میخوای سایتتو قالب بندی کنی ( layout ) بهترین گزینه div هستش

پیروز باشید...

DES - Young

سه شنبه 16 آذر 1389, 08:51 صبح

ممنون از آقای کرامتی فقط یه چند تا سوال
1) در css فرق استفاده از کاراکتر . با # چیه ؟؟؟
یعنی چه موقع از دات استفاده می شه چه موقع از # ؟؟؟؟
2) و این که چطور یه متن رو میشه در وسط یه div قرار داد (از لحاظ عمودی نه افقی)
3) در این کدی که شما گذاشتید عرض تمام div ها با % مشخص شده اند در صورتی که مشکل من اینه که div های کناری (div1,3,4,6,7,9) باید عرض ثابت داشته باشند.

درود

پاسخ سوالات
1: . برای فراخوانی Class و # برای فراخوانی به ID استفاده می شود ( اشاره )
2: برای وسط چین کردن به صورت عمودی از خاصیت روبرو استفاده کنید --> vertical-align:middle
3: برای اینکه div های شما عرض ثابتی داشته باشند از px استفاده کن و فکر کنم div های 2-5-8 رو 100% تنظیم کنی کارت درست شه

پیروز باشید

Keramatifar

سه شنبه 16 آذر 1389, 12:35 عصر

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

elmira_63

سه شنبه 16 آذر 1389, 13:41 عصر

درود

پاسخ سوالات
1: . برای فراخوانی Class و # برای فراخوانی به ID استفاده می شود ( اشاره )
2: برای وسط چین کردن به صورت عمودی از خاصیت روبرو استفاده کنید --> vertical-align:middle
3: برای اینکه div های شما عرض ثابتی داشته باشند از px استفاده کن و فکر کنم div های 2-5-8 رو 100% تنظیم کنی کارت درست شه

پیروز باشید

ممنون از توجهتون ولی اگه ممکنه کد آقای کرامتی رو تکمیل کنید ممنون می شم
کد ایشون همون چیزی هست که من می خوام ولی یه سری موارد رو کم داره
1) ارتفاع div4 , div6 ثابت داده شده که من میخوام ارتفاعش با div5 یکی بشه
2) عرض تمام div ها به درصد داده شده که div های کناری باید ثابت باشه

در ضمن بنده تئوری css رو تا حدودی می دونم (می دونم برای عرض ثابت باید به px بدیم برای نسبی % و v-align و float و . . . ) ولی وقتی طراحی میشه توی هر مرور گری یه عیبی پیدا می کنه
مثلا وقتی div های کناری رو عرض ثابت بدم div وسط رو به در صد مشکلی که پیش میاد اینه که وقتی عرض مرورگر از یه حدی کوچکتر بشه این div ها از بهم میریزند از لحاظ موقعیتی
اگه بخوام همش رو به در صد بدم div کناری قراره توش عکس قرار بگیره بازم بهم میریزه
در واقع من میخوام با این کار کادر سایتم رو طراحی کنم که در چهار طرف گوشه این جدول یه عکس گوشه کادر قرار می گیره و در div2,4,6,8 یه عکس کوچک کنار هم repeat می شه تا حاشیه های سایتم به وجود بیاد
این کار رو قبلا با table انجام دادم می تونید توی سایتم ببینید http://iran-job.com/Internal/Home.aspx
برای همین خواهش میکنم به صورت عملی راهنمایی کنید اگه براتون ممکنه وگر نه تئوری هاش رو حفظم و در اون حد سواد دارم
این اون چیزیه که من میخوام

63224

elmira_63

چهارشنبه 17 آذر 1389, 12:10 عصر

علما خبری نشد ؟؟؟؟؟؟؟

ravand

چهارشنبه 17 آذر 1389, 18:57 عصر

من دیدم شما دنبال یه مطلب هستی که با div جدول بسازی . گفتم آموزشی رو که توی وبلاگم گذاشتم بهتون پیشنهاد بدم اگه این مطلب رو بخونی مطمئنا می تونی یه قالب با div بسازی:http://barnamenevisi.blogsky.com/1389/09/03/post-74/
امیدوارم بدردتون بخوره.

elmira_63

پنج شنبه 18 آذر 1389, 07:11 صبح

من دیدم شما دنبال یه مطلب هستی که با div جدول بسازی . گفتم آموزشی رو که توی وبلاگم گذاشتم بهتون پیشنهاد بدم اگه این مطلب رو بخونی مطمئنا می تونی یه قالب با div بسازی:http://barnamenevisi.blogsky.com/1389/09/03/post-74/
امیدوارم بدردتون بخوره.

ممنون دوست عزیز ولی فکر میکنم شما پست های قبلی رو مطالعه نفرمودید مشکل من ساخت هر جدولی با div نیست مشکل من ساخت این جدول به خصوص با این شرایطی است که در پست های قبلی ذکر شد

Keramatifar

پنج شنبه 18 آذر 1389, 11:34 صبح

از نظر تئوری شما نمی تونی در div های موازی هم از fixed size استفاده کنید و هم از percentage size ، برای انجام اینکار باید در div های کناری که درصدی هستند div های دیگری قرار بدید و به آنها سایز فیکس بدید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html>
<head>
<title>sample</title>
<style type="text/css">
*{margin: 0; padding: 0;}
div#outerDiv{
width: 100%;
background-color: black;
}
div#headerDiv{
width: 100%;
border-bottom: 1px solid black;

}
div#contentDiv{
width: 100%;
height: auto;
background-color: white;
}
div#footerDiv{
width: 100%;
height: 150px;
border-top: 1px solid black;
}
.leftDiv{
float: left;
background-color: red;
width: 20%;
position: relative;
}
.centerDiv{
float: left;
background-color: white;
width: 60%;
}
.rightDiv{
float: left;
background-color: blue;
width: 20%;
}
div#contentDiv div.leftDiv div.leftSideBar{
height: 200px;
width: 200px;
background-color: gray;
margin: 0 auto;
margin-top: 10px;

}
.clear{clear: both}

</style>

</head>
<body>
<div id="outerDiv">
<div id="headerDiv">
<div class="leftDiv">
<p>div1 <br /> <br /></p>
</div>
<div class="centerDiv">
<p>div2 <br /> <br /></p>
</div>
<div class="rightDiv">
<p>div3 <br /> <br /></p>

</div>
<p class="clear"></p>
</div>
<div id="contentDiv">
<div class="leftDiv">

<p>div4</p>
<div class="leftSideBar"><p>Left Side Bar</p></div>
<div class="leftSideBar"><p>Left Side Bar</p></div>

</div>

<div class="centerDiv">
<p style="height: 390px;">div5</p>
</div>
<div class="rightDiv">
<p style="height: 390px;">div6</p>
</div>
<div class="clear"> </div>
</div>
<div id="footerDiv">
<div class="leftDiv">
<p style="height: 50px;">div7</p>
</div>
<div class="centerDiv">
<p style="height: 50px;">div8</p>
</div>
<div class="rightDiv">
<p style="height: 50px;">div9</p>
</div>
</div>
</div>
</body>

</html>

9px.ir

پنج شنبه 18 آذر 1389, 13:22 عصر

ممنون دوست عزیز ولی فکر میکنم شما پست های قبلی رو مطالعه نفرمودید مشکل من ساخت هر جدولی با div نیست مشکل من ساخت این جدول به خصوص با این شرایطی است که در پست های قبلی ذکر شد

همونطور که یکی از عزیزان اشاره کرد، بعضی جاها استفاده از جدول راحت تره و اینکه بعضیا معتقدند «استفاده از جدول به جای div توجیهی نداره» به نظرم درست نیست.

البته توجه کنید که اینی که شما می‌خواید رو میشه با div هم درست کرد اما اونقدر دردسر داره که بهتره با همون جدول درستش کنید خصوصا وقتی بدونید که مشکلات cross browser هم بهش اضافه میشه. برای درست کردنش با div، میتونید دو div عرض ثابت چپ و راست رو شناور کنید. البته برای درست کردن ارتفاع دو ستون شماره 4و6 مجبور به استفاده از جاوااسکریپت شدم:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
div{text-align:center;padding:0;margin:0}
#top_left,#top_right,#bottom_left,#bottom_right,#m ain_left,#main_right{width:100px}
#top_left,#top_right,#bottom_left,#bottom_right{he ight:100px;background-color:#FFFFCC}
#top_left,#bottom_left,#main_left{float:left}
#top_right,#bottom_right,#main_right{float:right}
#main_left,#main_right{height:100%;background-color:#CCFFFF}
#top,#bottom{background-color:#CCFFCC}
.clr{clear:both;height:0;font-size:0;line-height:0}
</style>
</head>

<body>

<div id="top">
<div id="top_right">Div 3</div>
<div id="top_left">Div 1</div>
Div 2
<div class="clr"></div>
</div>

<div id="main">
<div id="main_right">Div 6</div>
<div id="main_left">Div 4</div>
Div 5<br><br><br><br>style design by <a href="http://9px.ir">9px.ir</a>
<div class="clr"></div>
</div>

<div id="bottom">
<div id="bottom_right">Div 9</div>
<div id="bottom_left">Div 7</div>
Div 8
<div class="clr"></div>
</div>

<script>
$=function(id){return document.getElementById(id)}
$s=function(id){return $(id).style}
window.onload=function(){$s('main_left').height=$s ('main_right').height=$('main').clientHeight+'px'}
</script>

</body></html>

این کد در فایرفاکس تست شده است.