مشکل با css

[romila 44]

سلام من یه باکس دارم که برای نمایش اخبار وبسایت استفاده میشه،مشکل من اینه که "ادامه خبر ها" پایین این باکس ثابت نمیمونن و متناسب با محتوای باکس تغییر میکنن مثلا اگر متن این باکس کم بشه "ادامه خبر" میره بالا .

عکس رو ببینید متوجه میشید.

[Ghasem Paran 333]

کدوم عکس ؟

[romila 44]

ببخشید مثل اینکه پیوست نشده بود!!!

[amirali.bk 656]

سلام

با خاصیت position اون قسمت رو میتونید ثابت کنید که دیگه حرکت نکنه

[Ghasem Paran 333]

شما میتونید یه ارتفاع مشخص به کادر خبر بدید ، و با این css خبرهای که متنشون زیاده رو به صورت ... نشون بدید.

height: 70%;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

[IMasoud 102]

به باکس ها سایز بده

[romila 44]

سلام

با خاصیت position اون قسمت رو میتونید ثابت کنید که دیگه حرکت نکنه

قبلا امتحان کردم،در این صورت وقتی که اسکرول صفحه بالا و پایین میشه متن ها تو کل صفحه ثابت میمونن.

پس عملی نیست.

شما میتونید یه ارتفاع مشخص به کادر خبر بدید ، و با این css خبرهای که متنشون زیاده رو به صورت ... نشون بدید.

height: 70%;

text-align: right;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

با این روشی هم که شما گفتی ردیف نشد عکس رو نگاه کنید:

به باکس ها سایز بده

این کار رو هم قبلا انجام دادم اگر مثلا برای عنوان سایز قرار بدم وقتی که متن عنوان کوتاه باشه،بین متن عنوان و متن خبر فاصله می افته که نمای قشنگی نداره.

کد های من:

<div class="news-content">
<a href="<?php the_permalink();?>"><?php the_post_thumbnail('news-thumb');?></a>
<h2><?php the_title();?></h2>
<article class="news-text"><?php the_excerpt('5');?></article>
<h4 class="news-more"><a href="<?php the_permalink();?>">ادامه خبر</a></h4>
</div><!--/news-content-->

و css

.news-content{
width:216px;
height:303px;
float:right;
margin:0 0 15px 15px;
}
.news-content h2{
direction:rtl;
text-align:center;
color:#ca0c10;
width:100%;
margin-top:10px;
overflow: hidden;
max-height: 46px;
min-height: 20px;
border:1px solid;
}
.news-text{
direction: rtl;
    text-align: right;
    padding: 10px 5px 0px 0px;
    line-height: 1.5;
height:75px;
overflow:hidden;
border:1px solid;
}
.news-more{
float:left;
color:#ca0c10;
margin:8px;
}

ویرایش شده مرداد 93 توسط hami73

[IMasoud 102]

آدرس بده الان ما هیچی نمی دونیم فایل پیوست کن حداقل

[Farid 2281]

سلام

شما باید به Article مقدار position:relative رو بدید و بعدش به به لینک (ادامه خبر ) مقدار position:absolute تا اینکه شما بتونید بدونه وابستگی به Article بهش جهت right top و ... بدید ... نمونه اش رو براتون درست کردم نگاه کنید حتی وقتی مقدار مطلب کم باشه عبارت نمیاد بالا و همون پایین ثابته

http://codepen.io/faridghasemi/pen/Euicb

[romila 44]

آدرس بده الان ما هیچی نمی دونیم فایل پیوست کن حداقل

من با کد زیر درستش کردم

.news-content{
width:216px;
height:303px;
float:right;
margin:0 0 15px 15px;
}
.thumbnail-holder{
width:100%;
height:135px;
float:right;
}
.news-content h2{
direction:rtl;
text-align:center;
color:#ca0c10;
width:100%;
margin-top:10px;
overflow: hidden;
height:38px;
float:right;
line-height: 1.5;
}
.news-text{
direction: rtl;
    text-align: right;
    padding: 0 5px 0px 0px;
    line-height: 1.5;
height:89px;
overflow:hidden;
}

اما چیزی که من میخوام این نیست!!!

من میخوام وقتی که مثلا ازتفاع کادر متن یا عنوان کم شد ادامه خبر سر جای خودش بمونه.

اینم آدرس آنلاین لینک آدرس

خودتون سایز کادر ها رو کم و زیاد کنید متوجه میشید

[Farid 2281]

دوست عزیز پست من رو نخوندید ... بهتون جواب داده شد

[romila 44]

فرید جان ممنون مشکلم حل شد.

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

ویرایش شده مرداد 93 توسط hami73