• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
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

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط masoudmosleh267
      سلام دوستان. من سایتم سرعتش خیلی پایینه. wp rocket رو نصب کردم خیلی بهتر شد اما بخش فشرده کردن css , js رو فعال کردم قالب رو به هم ریخت و مجبور شدم این بخش رو غیر فعال کنم. قالب رو اورجینال از تم فارست خریدم. الان مشکل چیه؟ چطوری میشه فایل هایی که gtmetrix بم میگه رو gzip کنم؟
      به پشتیبانی سایتمم گفتم ارور 504 رو زیاد میده گفت کدنویسی سایتت رو بهینه کن یا هاست ویژه یا اختصاصی بخر. مصرف منابع ات بالاست.

    • توسط koolfayfer
      سلام به همه
      من یه div دارم که پیشفرض به سمت راست میچرخه به مدت نامحدود
      وقتی روش هاور میشی به اندازه یک ثانیه معکوس به سمت چپ میچرخه یه بار!
      حالا اگه کسی بیشتر از یک ثانیه هاور بمونه انیمیشن چرخش اولیه به خاطر وجود انیمیشن هاور stop میشه و میخوام اگه در css ترفندی هست بعد از گذشت یک ثانیه هاور شدن آنهاور بشه یا هر چیز دیگه که باعث بشه انیمیشن پیشفرض کار کنه
      اگه css نبود کسی با جیکوئری میدونه؟
    • توسط amzzm75
      باسلام و احترام قالبی که من استفاده میکنم تعداد زیادی فایل css و javascript داره به طوری که تعداد درخواست ها به سرور منو زیاد کرده به طوری که وقتی با gtmetrix تست میکنم میزنه 150 درخواست به سرور و به فشرده نبودن و تعداد زیاد فایل ها ایراد میگیره من یه بار اومدم با سایتایی که این فایلا رو فشرده میکنن فشردشون کردم اما فونت و ظاهر بعضی قسمت های سایت بهم ریخت و مجبور شدم به حالت قبل برش گردونم موندم چیکار کنم که تعداد فایل ها کم بشه تا سرعت لود سایت بالاتر بره و سایت بهینه بشه لطفا راهنمایی کنین 
      آدرس سایت من:umagazine.ir
    • توسط chemist
      با سلام و عرض خسته نباشید؛
      بنده از این کد CSS در وب سایت استفاده کرده ام؛
      #left-menu i img { max-width:24px; max-height:24px; } در مرورگر کروم موبایل تصاویر در اندازه واقعی عکس ها نمایش داده می شود! (از ماکزیمم طول و عرض تعیین شده تبعیت نمی کند) ولی در مابقی مرورگرها با ابعاد تعیین شده نمایش داده می شود. آیا برای سازگاری کامل با تمامی مرورگرها باید تغییری در کد اعمال کنم؟
      ممنون میشم راهنمایی بفرمائید.
      با تشکر
    • توسط mehr-cs
      سلام
      منمیخوام یه قسمت تحت عنوان تاریخچه داشته باشم به این صورت که، تو یک باکس کوچیک تمامی حروف الفبا رو داشته باشم و لوگوی کل تاریخچه ی برند هام تو صفحه باشه و کاربر بعد از کلیک کردن روی هر کدوم از حروف الفبا، کلیه تاریخچه هایی که با اون حرف شروع میشه رو ببینه !
      دوستان راهنمایی میکنن ؟