PDA

View Full Version : تقسیم بندی صفحه با عنصر div


farhad26
یک شنبه 08 بهمن 1391, 22:11 عصر
سلام دوستان


یک سوال ساده: من قصد دارم با عنصر div در HTML و Css یک صفحه که شامل:


یک بخش هدر , سه ستون (قسمت محتوا “main” ) و یک فوتر یا همون کادرپایین صفحه بسازم.


حالا به چه روشی سه ستون را بسازیم که تحت تاثیر هم قرار نگیرند.؟
ترجیحا کد را بنویسید
mokha21
یک شنبه 08 بهمن 1391, 22:41 عصر
<style type="text/css" media="all">
body{
margin:0 auto;
direction:rtl;
text-align:right;
}
#header{
background:#CCC;
height:100px;
width:1000px;
margin:0 auto;
}
#body{
background:#999;
width:1000px;
margin:0 auto;
}
#sidebar_right{
background:#999;
float:right;
width:180px;
}
#content{
background:#777;
float:right;
width:640px;
}
#sidebar_left{
background:#999;
float:left;
width:180px;
}
#footer{
background:#CCC;
height:100px;
width:1000px;
margin:0 auto;
}
.clear{
clear:both;
float:none;
}
</style>




<body>

<div id="header">
هدر
</div>

<div id="body">

<div id="sidebar_right">ستون راست</div>

<div id="content">محتوا</div>

<div id="sidebar_left">ستون چپ</div>

<div class="clear"></div>

</div>

<div id="footer">
فوتر
</div>



</body>
emad4000
دوشنبه 09 بهمن 1391, 14:28 عصر
سلام
من می خوام این سه ستون ذکرشده به این شکل باشن که ستون چپ و راست عرض ثابت داشته باشن و به دو طرف صفحه چسبیده باشن و ستون وسط (محتوی) مابین این دو قرار بگیره و با افزایش عرض صفحه این ستون محتوی هم بزرگ بشه
این مثالی که شما زدین، عرض ستون وسط هم ثابته.
من ستون چپ و راست رو float می کنم به left و right . ولی مشکل اون ستون وسطه (محتوی) هست که وسط قرار نمیگیره و عرضش هم ثابت هست. حالا عرض ثابتش رو هم می تونم بیخیال شم، ولی وسط چین بودنش رو نه.
میشه در این مورد راهنمایی کنید.
mokha21
دوشنبه 09 بهمن 1391, 16:51 عصر
شما باید عرض div ها (بجز ستون چپ و راست) رو بردارید.

از css زیر استفاده کنید

<style type="text/css" media="all">
body{
margin:0 auto;
direction:rtl;
text-align:right;
}
#header{
background:#CCC;
height:100px;
width:100%;
margin:0 auto;
}
#body{
background:#999;
width:100%;
margin:0 auto;
}
#sidebar_right{
background:#999;
float:right;
width:180px;
}
#content{
background:#777;
float:right;
}
#sidebar_left{
background:#999;
float:left;
width:180px;
}
#footer{
background:#CCC;
height:100px;
width:100%;
margin:0 auto;
}
.clear{
clear:both;
float:none;
}
</style>