PDA

View Full Version : سوال: نحوه جدا شدن content وسط از body



davood59
شنبه 31 تیر 1391, 14:38 عصر
سلام دوستان؛
وقت همه شما بخیر باشه؛
ازتون یک سوال داشتم:
به این کد css ی که نوشتم دقت کنید:

*
{
margin:0;
padding:0;
font-family: tahoma;
font-size:11px;
}
body
{

background-image:url(images/bg.jpg);
background-position:center top;
background-repeat:no-repeat;
background-color:Black;
}
div#wrapper
{
width:940px;
margin-left:auto;
margin-right:auto;
min-height:768px;

/*
height:100%;
*/
}

div.centerside
{
width:600px;
}

div.maincontent
{
height:600px;
background-color:Green;

}



و اینهم کد Html مورد نظر:


<div id="wrapper">

<div class="centerside">

<div class="maincontent">in div content tag</div>
</div>
</div>



سوال من در اینجاست:
من عکسی رو که میخوام پس زمینه باشه الان دقیقا در وسط قرار گرفته و همچنین صفحه هم هیچ اسکرولی نمیخوره و من هم نمیخوام اسکرول بخوره چون قراره که در وسط همین پس زمینه مطالب درج بشن.
حالا وقتی که میام و میخوام maincontent رو در وسط قرار بدم تا داخلش مطالب قرار بگیرن، همین که از بالا بهش فاصله میدم با margin صفحه از پایین هم اسکرول میخوره و از پایین باز میشه، یعنی پس زمینه دقیقا در سرجاش هست ولی پایینش هم اسکرول میخوره و پس زمینه که رنگ سیاه هستش دیده میشه، که من نمیخوام اینجوری باشه.
امکانش هست بگید چرا وقتی به maincontent از بالا فاصله میدم از پایین صفحه هم اسکرول میخوره؟
با clear مشکلم حل میشه یا نه؟

Saber Mogaddas
شنبه 31 تیر 1391, 15:01 عصر
سلام
مقدار min-height برای تگ div#wrapper زیاد هست مقدار اون رو کم کنید..چون در هر صورت ارتفاع نسبت به محتوا متغیر خواهد بود.
اگه مایل هستید که به کل در این صفحه اسکرولی نباشه می تونید برای تگ body از دستور :

overflow:hidden;

استفاده کنید به این صورت :

*

{

margin:0;

padding:0;

font-family: tahoma;

font-size:11px;

}

body

{



background-image:url(images/bg.jpg);

background-position:center top;

background-repeat:no-repeat;

background-color:Black;
overflow:hidden;
overflow:hidden;

}

div#wrapper

{

width:940px;

margin-left:auto;

margin-right:auto;

min-height:10px;



/*

height:100%;

*/

}



div.centerside

{

width:600px;

}



div.maincontent

{

height:600px;
margin-top: 83px;

background-color:Green;

}


موفق باشید