فاصله دایو ها{چه کنم} [بایگانی]

mahdi.iqu

شنبه 13 مهر 1392, 16:09 عصر

سلام بر دوستان
لطفا فایلی که پیوست کردم رو دانلود کنند(حجمش خیــــــــلی کم هست 1.42 KB)
خب الان شما یک فایل Zip رو دانلود کردید که داخل این فایل ، یک فایل با نام for.html هست.
شما الان اون رو با مرور گر باز کنید خواهید دید که در سمت چپ یک کادر قرمز رنگ هست و در سمت راست یک کادر سبز رنگ.
خب مشکل کجاست:
اگر شما سمت چپ رو سمت نوشته یک سایت در نظر بگیرید و سمت راست رو یک منو در نظر بگیرید.
مشکل ما این جا هست که میخوایم به یه طریقی بفهمونیم که کادر سبز شما تا جایی کشیده شو که رنگ قرمز کشیده شده.
به معنی دیگه به منوی راست بگم شما رنگ پس ضمینه رو تا جایی ادامه بده که نوشته های من ادامه داره
آیا این کار شدنی هست؟
راه کاری یا ...؟
ممنون میشم کمک کنید

shayankhaz

شنبه 13 مهر 1392, 17:04 عصر

شما به جای خط نهم کد،بنویس min-width:10%;
ببین کارت راه می افته

mahdi.iqu

شنبه 13 مهر 1392, 17:48 عصر

شما به جای خط نهم کد،بنویس min-width:10%;
ببین کارت راه می افته
ممنون/اما این کد توی همه شرایط جواب بده نیست!
ممکن تو برخی از صفحات فاصله مطالب و منو به 10 پیکسل هم نرسه و ممکنه تو برخی صفحات فاصله این دو 700 پیکسل باشه
نمی دونم شاید کد Php یا ... وجود داشته باشه
منتظر راهنمایی دیگ دوستان هستم

qartalonline

شنبه 13 مهر 1392, 18:04 عصر

یعنی شما میخواین عرض ستون راست ثابت باشه و عرض ستون چپ متغییر؟

mahdi.iqu

شنبه 13 مهر 1392, 18:06 عصر

میخوام این دو به هم نگاه کنند اگر سمت راست بیشتر بود موقعیت کانتنت هم به همون اندازه کشیده بشه/اگر کانتنت بیشتر بود منوی سمت راست خودش رو به اون اندازه بکشه(منظور از کشیده بشه رنگ پس زمینه هست)

qartalonline

شنبه 13 مهر 1392, 18:17 عصر

منظورتون خوب متوجه نشدم.

ولی اگه میخواین عرض ستون با اندازه محتویات تغییر کنه کافیه عرض رو بصورت auto تعیین کنید.

mahdi.iqu

شنبه 13 مهر 1392, 18:34 عصر

منظورتون خوب متوجه نشدم.

ولی اگه میخواین عرض ستون با اندازه محتویات تغییر کنه کافیه عرض رو بصورت auto تعیین کنید.
بدین صورت:
اگر راست طولش بیشتر از چپ بود عرض چپ به اندازه عرض راست کشیده بشه و بلعکس
امیدوارم که متوجه منظور شده باشید

qartalonline

شنبه 13 مهر 1392, 19:02 عصر

برنامه نویسی لازمه ، با استفاده از جاوا اسکریپت میتونید این کار رو انجام بدید.

mehbod.rayaneh

شنبه 13 مهر 1392, 20:06 عصر

درود
من فایل 1.42 KB شما را ندیدم! ولی چیزی ک فهمیدم اینه ک میخواید ارتفاع سایدبار با زیاد شدن ارتفاع دیو اصلی زیاد بشه!
اینجوری میشه :

<!DOCTYPE html>
<head>
<style>
*{margin:0;padding:0}
#main{width:800px;margin:auto}
#wrapper{position:relative;direction:rtl}
#wrapper:after{display:block;content:"";height:0;clear:both}
.block{position:relative;float:right;width:300px;t ext-align:right;min-height:200px;padding:20px;z-index:2}
.background{position:absolute;padding:20px;top:0;b ottom:0;width:500px;z-index:1}
.bg1{background:#eee}
.bg2{right:300px;background:#aaa}
</style>
</head>
<body>
<div id="main">
<div id="wrapper">
<div class="background bg1"></div>
<div class="block">
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
</div>
<div class="background bg2"></div>
<div class="block">
2
</div>
</div>
</div>
</body>
</html>

موفق باشید

mahdi.iqu

یک شنبه 14 مهر 1392, 13:57 عصر

برنامه نویسی لازمه ، با استفاده از جاوا اسکریپت میتونید این کار رو انجام بدید.
میشه راهنمایی کنید؟

qartalonline

یک شنبه 14 مهر 1392, 15:26 عصر

کد زیر:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#content{
background-color:#F00;
width:500px;
float:left

}
#right{
background-color:#0F0;
width:300px;
float:left}
</style>
<script type="text/javascript">
function resize(){
var cHeight = document.getElementById('content').offsetHeight;
var rHeight = document.getElementById('right').offsetHeight;

if (cHeight > rHeight) {
document.getElementById('right').style.height = cHeight+'px';
} else if(cHeight < rHeight) {
document.getElementById('content').style.height = rHeight+'px';
}

}
</script>
</head>
<body onload="resize();">
<div id="main">
<div id="content">
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
<p>testtesttesttesttest</p>
</div>
<div id="right">
<p>MahdiMahdiMahdiMahdiMahdi</p>
<p>MahdiMahdiMahdiMahdiMahdi</p>
<p>MahdiMahdiMahdiMahdiMahdi</p>
<p>MahdiMahdiMahdiMahdiMahdi</p>
<p>MahdiMahdiMahdiMahdiMahdi</p>
<p>MahdiMahdiMahdiMahdiMahdi</p>
<p>MahdiMahdiMahdiMahdiMahdi</p>
<p>MahdiMahdiMahdiMahdiMahdi</p>
</div>
</div>
</body>
</html>