1tarah

سوال در مورد css

12 پست در این موضوع قرار دارد

سلام

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

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

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

قبلا ممنون.

up2eak3o8658qiqs51f.jpg

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

.test{
height:90%;
}

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

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

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

به اشتراک گذاری این پست


لینک به پست

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

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

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>

6

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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

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

ویرایش شده در توسط 1tarah
1

به اشتراک گذاری این پست


لینک به پست

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

اولی :


.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>

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

http://jsfiddle.net/qkXet/

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

http://jsfiddle.net/qkXet/1

3

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

http://jsfiddle.net/ZKbHE/ ویرایش شده در توسط 1tarah
0

به اشتراک گذاری این پست


لینک به پست

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

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

2

به اشتراک گذاری این پست


لینک به پست

درسته

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

ممنون آقا ایمان از وقتی که گذاشتید.

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط Rasoul
      سلام
      من میخواستم وقتی صفحه اسکرول میشه و هدر همراهش میاد پایین به هدر یه لگو مثلا اضافه بشه میدونم باید با جاوااسکریپ انجام بشه ولی من این زبان را تا این حد بلد نیستم ممنون میشم راهنماییم کنید.
      الان تو این دمو میخوام وقتی اسکرول میشه کنار My Header یک لوگو اضافه بشه و وقتی دوباره میبری بالا حذف بشه.
       
      دمو
    • توسط acc
      سلام دوستان
      بنده علاقمند هستم که فونت و استایل یک ویجت خارجی که مربوط به چت انلاین هست رو تغییر بدم , ایا این به وسیله جاوا امکان پذیر است؟
      اگر از دوستان کسی در این زمینه مهارت دارد لطفا من را راهنمایی کند
       
      با تشکر
    • توسط madidi
      سلام من همیشه واسه وردپرس که قالب مینویسم یه  مشکل دارم 
      توی تصویر زیر کامل توضیح دادم 
      چطوری تو یه دیو بزرگ دو تا دیو تعریف کنیم یکی متن و یکی عکس و وقتی دیو عکس تموم شده متن ها بقیه جاهای دیو بزرگ تر پر کنند ؟؟؟
      ممنون 

    • توسط madidi
      سلام 
      چطور میشه شرط برای یه المان تعریف کرد ؟
      مثلا اگر در یک قسمت [500px*500px] با فونت 15px بصورت کامل متن پر شد بجا اینکه ارتفاع اون دیو زیاد بشه یا اسکرول بخوره یا ... سایز متن از 15 به 12 بصورت خودکار تغییر کنه تا اون دیو همون جوری بدون تغییر بمونه ؟
    • توسط Monica
      سلام
      من با این دو روش استایل reset.css رو به پوسته معرفی میکنم ،
      میخوام برای کش نشدن ver=2.0 به انتهای css اضافه بشه میخوام این استایل پایین تر از rtl.css قرار بگیره  در حال حاضر کدهای زیر رو امتحان کردم و جواب نگرفتم !!!
      //روش اول add_action( 'wp_enqueue_scripts', 'custom_styles' ); function custom_styles() { wp_register_style( 'reset', get_template_directory_uri().'/my/reset.css', array(), '2.0', 'all' ); wp_enqueue_style( 'reset' ); } //روش دوم add_action( 'wp_enqueue_scripts', 'custom_styles' ); function custom_styles() { wp_enqueue_style( 'reset', get_template_directory_uri().'/my/reset.css',false,'2.0','all' ); }