ورود

View Full Version : مشکل با کشیده شدن موقعیتها


samiraneshati
شنبه 28 خرداد 1390, 10:40 صبح
من می خوام یه سایت سه ستونه داشته باشم که توی هر ستونش یه موقعیت قرار بگیره و اگر توی هر موقعیت چیزی نبود اون ستون رو نشون نده و دو ستون باقی مونده به اندازه جای خالی اون کشیده بشن مثلااگر 90پیکسل فضای داده شده به هر ستونه که به هر کدوم 30پیکسل می رسه اگه یکیش حذف شده دوتای باقی مونده خودشون رو بکشند و بشن 45پیکسل یا اگه دوتاش حذف شده یکی باقی مونده بشه همون 90پیکسل یعنی خودش رو بکشه باید چیکار کنم؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

اینم کداشه:



<div id="col_l">

<?php if($this->countModules('a')) : ?>
<div id="a"><jdoc:include type="modules" name="a" style="table" /></div>
<?php endif;?>

<?php if($this->countModules('b')) : ?>
<div id="b"><jdoc:include type="modules" name="b" style="table" /></div>
<?php endif;?>


<?php if($this->countModules('c')) : ?>
<div id="c"><jdoc:include type="modules" name="c" style="table" /></div>
<?php endif;?>
</div>

</div>
کسی نیست مرا یاری کند؟؟؟؟؟؟؟؟؟؟؟
alismith
شنبه 28 خرداد 1390, 12:31 عصر
سلام

اگر شما فقط مشکلتون با عرض div هستش که می تونید با % مقدار اون رو در فضای موجود نسبی و انعطاف پذیر کنید
در رابطه با نمایش ندادن div ی که محتوایی در آن نیست هم می تونید از javascript یا کتابخانه معروف آن jQuery کمک بگیرید



موفق باشید
samiraneshati
شنبه 28 خرداد 1390, 13:22 عصر
ببینید من یک div کلی در نظر گرفتم که اندازش 950px است و باید به سه ستون تقسیم بشه a,b,cاندازه های این ستونها رو به درصد هم میگذارم ولی وقتی یکیشون برداشته می شه دوتای باقی مونده خودشون رو نمی کشند میشه لطف کنید بگید کدش چطوریه شاید جایی از کد رو اشتباه می نویسم ممنون می شم
alismith
شنبه 28 خرداد 1390, 17:03 عصر
سلام

من یک مثال برای شما زدم که خودتون می تونید customize کنید :


<htm>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery","1.5");</script>
<script>
$(document).ready(function(){
$("div[name=side]").each(function(){
var $this = $(this);
if($this.html()==""){


$this.addClass('hide_side');

}else{

$this.addClass('show_side');

}

});

var elm = $("div.show_side");
var i = elm.length;

if(i==1){

$("div.show_side").addClass('c1');

}else if(i==2){

$("div.show_side").addClass('c2');

}else{

$("div.show_side").addClass('c3');

}



});
</script>
<style type="text/css">
.wrapper{ width: 950px; height: 300px; }
.show_side{ height: 300px; float: left; color: red; }
.hide_side{ display: none; }
.c3{width: 303px;}
.c2{width: 454.5px;}
.c1{width: 950px;}
</style>

</head>

<body>
<center>
<div class="wrapper">
<div name="side" style="background:#333;">a</div>
<div name="side" style="background:#666;">b</div>
<div name="side" style="background:#999;"></div>
</div>
</center>
</body>
</html>



ویرایش توضیحات :

در اولین load صفحه script تمام div هایی که نام side دارند را کنترل کرده و برمبنای محتوای آنها کلاس مربوطه را اضافه می کند
و در آخر مطابق خروجی و تعداد div که قرار هست نمایش داده شوند عرض آنها تنظیم می شود
شما می تونید با قرار دادن مقادیر در هر div و یا برداشتن این مقادیر نتیجه را ببینید

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



موفق باشید
samiraneshati
یک شنبه 29 خرداد 1390, 09:50 صبح
ممنونم ممنونم واقعا ممنونم