رفتن به مطلب

سوال در مورد css


پست های پیشنهاد شده

سلام

من میخوام ستون های سایتم رو مطابق با ستون وسط سایت که ثابت نیست و بسته به میزان نوشته و پست heightش مشخص نیست یکی بشه.

حالا میخواد محتواش کمترم باشه که باشه.

مثل شکل زیر. ستون سمت چپ رو میخوام که موازی ستون وسط هست. هرچی ستون وسط بلند بشه ستون سمت چپ هم بلند میشه.

قبلا ممنون.

up2eak3o8658qiqs51f.jpg

لینک به ارسال

میتونید خاصیت height رو به صورت درصد بدین به این شکل:

.test{
height:90%;
}

البته اگه میخواین قابل تغییر باشه.

هر دو رو یه استایل بدین که وقتی یکی استایلش تغییر کرد اونم تغییر کنه.

ویرایش شده توسط اشکان
لینک به ارسال

راه که زیاد داره این سه راه به عنوان نمونه

اول با جی کوئری :

header.php


<script src="http://code.jquery.com/jquery-latest.js"></script>

style.css


.sidebars {
width:250px;
margin:0px 10px;
padding:5px;
background:#0099CC
}
#sidebar1 {
float:left;
}
#sidebar2 {
float:right;
}
#content {
background:#FF6600;
margin:10px 285px 10px;;
padding:5px;
}

و در index.php,single.php , page.php, archives.php (هرجا سایدبار داره


<div id="sidebar1" class="sidebars">
ستون کناری1
</div>
<div id="sidebar2" class="sidebars">
ستون کناری2
</div>
<div id="content">
حلقه مطالب
</div>

jquery:


<script type="text/javascript">
$(document).ready(function () {
var height = $("#content").height();
$(".sidebars").height(height);
});
</script>

روش دوم با css

در style.cc


#page {
height:auto;
position:relative;
}
.sidebars {
width:250px;
position:absolute;
bottom:0px;
top:0px;
zoom:1;
background:#0099FF;
}
#content {
background:#FF6600;
margin:10px 300px;
}
.sidebars#sidebar1 {
right:10px;
}
.sidebars#sidebar2 {
left:10px;
}

ساختار صفحات


<div id="page">
<div id="sidebar1" class="sidebars">
ستون کناری1
</div>
<div id="sidebar2" class="sidebars">
ستون کناری2
</div>
<div id="content">
حلقه مطالب
</div>
</div>

روش سوم table


<table cellpadding="10" cellspacing="0" style="width: 100%;direction: rtl">
<tr>
<td style="background:maroon">ستون کناری 1</td>
<td style="background:#009933;width:60%">حلقه مطالب</td>
<td style="background:orange">ستون کناری2</td>
</tr>
</table>

لینک به ارسال

فکر کنم آقا ایمان منظور من رو درست متوجه نشدم

شاید به قول دوستمون اگه با درصد کار کنم درست بشه. هنوز فرصت نکردم چک کنم

لینک به ارسال

فکر کنم آقا ایمان منظور من رو درست متوجه نشدم

شاید به قول دوستمون اگه با درصد کار کنم درست بشه. هنوز فرصت نکردم چک کنم

دوست عزیز کار آقا ایمان حرف نداره شما یکم دقت کن مشکلت حل میشه.

لینک به ارسال
دوست عزیز کار آقا ایمان حرف نداره شما یکم دقت کن مشکلت حل میشه.

ما چاکر آقا ایمانم هستیم

از پست جامعی که زدن مشخصه. در ضمن من ایشون رو میشناسم ;)

چشم. ما دقت میکنیم

ویرایش شده توسط 1tarah
لینک به ارسال

دوراه پیدا کردم :

اولی :


.container {
overflow: hidden;
}
.column1 {
float: left;
margin: 20px;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.column2 {
float: left;
margin: 20px;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.column3 {
float: left;
margin: 20px;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}

...


<div class="container">
<div class="column1">
column1
</div>
<div class="column2">
column2<br/>
column2<br/>
column2<br/>
column2
</div>
<div class="column3">
column3
</div>
</div>

راه دوم :


#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
background-color:#ccc;
margin:10px;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
background-color:#ccc;
margin:10px;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
background-color:#ccc;
margin:10px;
}

....


<div id="col1">Column 1<br />Column 1<br />
Column 1<br />
Column 1<br />
Column 1<br />
</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</body>

لینک به ارسال

روش اول شما که اشتباهه چون اگر سایدبار بزرگتر از حلقه ها بشه مخفی می شه و کلا تا 1000 پیکسل هم بیشتر پیش بینی نشده

روش دوم هم ربطی به ارتفاع نداشت شما با روش درصدی که اشکان عزیز فرمودند پهنا را تعریف کردید نه ارتفاع را

نمونه روش اولی که عرض شد:

http://jsfiddle.net/qkXet/

همان نمونه در حالت عادی

http://jsfiddle.net/qkXet/1

لینک به ارسال

اینجا نگاه بر اینه که قالب بسته است ولی اگر قرار باشه از بیس نوشته شه طبیعی ترین راهش table است ضمن اینکه اول هم عرض شد راه زیاده

http://jsfiddle.net/ZKbHE/1/

لینک به ارسال

ولی خب table استاندارد نیست.

table کاملا استاندارده

چه کسی گفته استاندارد نیست؟!!

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...