Help giúp mình sửa cái CSS với

vavdiec

Private
Tham gia
08/01/2018
Bài viết
17
Được Like
3
mình có cái block hotnew như này

untitled-png.3261



mà nó hiển thị không full hêt phần block bị gán giá trị height, width cố định px


giờ mình muốn sửa lại thành giá trị % để nó có thể tự thích hợp với nhiều trình duyệt như trên điện thoại nhưng mà mãi không được



các bạn hướng dẫn mình sửa CSS cho nó đúng với thank

Mã:
.giaitri4u

{position: absolute;

top:0px;

background: url(rgba.php?r=0&g=206&b=209&a=153); background: rgba(0,206,209,0.6); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#9900CED1,endColorstr=#9900CED1);

font-size: 11px;

color: #fff;

padding: 3px 5px;

right:0px;

}

.anhhao

{position: absolute;

background: url(rgba.php?r=0&g=0&b=0&a=76); background: rgba(0,0,0,0.3); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);

top: 7px;

font-size: 13px;

color: #fff;

padding: 3px 5px;

right:2px;

float: right;}

.aut {

background: transparent url(/img/icon/post/play.png) no-repeat center left;

padding-left: 16px;

font-size: 11px;

color: gray;

}


.img .tthong {

background: none !important;

border: none;

color:white;

font-size:13px;

font-weight:normal;

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

-khtml-border-radius: 0px;

-webkit-border-radius: 0px; -moz-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px;

display: inline-block;}

.img .prefix {

background: none !important;

border: none;

color:white;

font-size:13px;

font-weight:normal;

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

-khtml-border-radius: 0px;

-webkit-border-radius: 0px; -moz-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px;

display: inline-block;}

#hotNews{

float: center;

margin-top: 5px;

margin-bottom: 5px;

width: 100%;

height: 100%;

}

.hot_news {

margin-top: 0px;

-webkit-box-shadow: 0 0 5px #b8b8b8;

-moz-box-shadow: 0 0 5px #b8b8b8;

-khtml-box-shadow: 0 0 5px #b8b8b8;

-webkit-box-shadow: 0 0 5px #b8b8b8;

-moz-box-shadow: 0 0 5px #b8b8b8;

-khtml-box-shadow: 0 0 5px #b8b8b8;

-webkit-box-shadow: 0 0 5px #b8b8b8;

-moz-box-shadow: 0 0 5px #b8b8b8;

-khtml-box-shadow: 0 0 5px #b8b8b8;

-webkit-box-shadow: 0 0 5px #b8b8b8; -moz-box-shadow: 0 0 5px #b8b8b8; -khtml-box-shadow: 0 0 5px #b8b8b8; box-shadow: 0 0 5px #b8b8b8;

background: #fff;

float: left;

width: 677px;

height: 414px;

overflow: hidden;

}

.hot_news a {font-weight: bold;color: #FFFFFF;}

.hot_news .item {

float: left;

padding: 2px 2px 0;

position: relative;

}

.hot_news .ud {

float: left;

padding: 2px 1px 0;

position: relative;

}

.hot_news .type1 .tieude:hover {text-decoration: none !important;

background: url(rgba.php?r=0&g=138&b=192&a=229);

background: url(rgba.php?r=0&g=138&b=192&a=229); background: rgba( 0,138,192,0.9); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);


}

.tieude a {

display: block;

height: 35px;

font-size: 13px;

font-weight: bold;

line-height: 18px;

text-decoration: none !important;

overflow: hidden;

}

.hot_news .type1 .tieude {

width: 438px;

font-size: 20px;

outline: medium none;

}

.hot_news .type2 {

padding-left: 0;

width: 214px;

}

.hot_news .type2 .tieude {

width: 204px;

}

.hot_news .type3 {

height: 140px;

padding-right: 0;

}

.hot_news .type3 .tieude {

width: 195px;

}

.hot_news .type1 div.img img {

height: 266px;

width: 448px;

}

.hot_news .type2 div.img img {

height: 131px;

width: 223px;

}

.hot_news .type3 div.img img {

height: 140px;

width: 223px;

}

.hot_news .item .tieude {

height: 50px;

padding: 5px;

text-align: left;

}


.hot_news .item .tieude .description span{

font-size: 12px !important;

}

.hot_news .type2 .tieude

{

background: url(rgba.php?r=0&g=0&b=0&a=178);

background: url(rgba.php?r=0&g=0&b=0&a=178); background: rgba( 0,0,0,0.7); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);

_filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);

position: absolute;

z-index: 100;

bottom: 0;

padding: 5px 10px;

overflow: hidden;

display: block;

width: 203px;

}

.hot_news .type2 .tieude:hover  {

background: url(rgba.php?r=0&g=138&b=192&a=229);

background: url(rgba.php?r=0&g=138&b=192&a=229); background: rgba( 0,138,192,0.9); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);

_filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);

transition: all 0.8s ease 0s;

}

.hot_news .type3 .tieude

{

background: url(rgba.php?r=0&g=0&b=0&a=178);

background: url(rgba.php?r=0&g=0&b=0&a=127); background: rgba( 0,0,0,0.5); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);

_filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);

position: absolute;

z-index: 100;

bottom: 0;

padding: 5px 10px;

overflow: hidden;

width: auto;

display: block;

width: 203px;

}

.hot_news .type3 .tieude:hover {text-decoration: none !important;

background: url(rgba.php?r=0&g=138&b=192&a=229);

background: url(rgba.php?r=0&g=138&b=192&a=229); background: rgba( 0,138,192,0.9); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);

_filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);

transition: all 0.3s ease 0s;


}

.hot_news .fade .tieude {

background: url("http://giaitri4u.com/styles/itviet/Images/opacity.png") repeat scroll 0 0 transparent;

bottom: 0;

font-size:15px;

position: absolute;

}

.hot_news .fade .tieude:hover {

opacity: 2;

}

.hot_news .type2 .tieude h3 {

font-size: 16px;

line-height: 18px;

margin-bottom: 10px;

}

.hot_news .type3 .tieude h3 {

font-size: 16px;

line-height: 18px;

margin-bottom: 10px;

}


.hot_news .fade .tieude {

line-height: 22px;

}

EWRblock_HotNews:

Mã:
]

<xen:require css="message_user_info.css" />

<xen:require css="bb_code.css" />

<xen:require css="EWRblock_HotNews.css" />


<div id="hotNews">

<div class="hot_news">

<xen:foreach loop="$HotNews" value="$news" i="$i">

<xen:if is="{$i}==1">      

<div class="item type1 fade">

<div class="img">

<span class="anhhao">

<a href="{xen:link forums, $news}" title="{$news.node_title}" >{$news.node_title}</a>

<br /><span class="aut"><a href="{xen:link members, $news}" class="username">{$news.username}</a></span>

</span>

<xen:if is="{$news.promote_icon} != 'disabled'">

<xen:if hascontent="true">

<xen:contentcheck>

<xen:if is="{$news.attach}">

<a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>

<xen:elseif is="{$news.medio}" />

<div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">

<a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>

</div>

<xen:elseif is="{$news.image}" />

<a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}"  /></a>

<xen:else />

<a href="{xen:link threads, $news}"><img src="http://hanhtrinhso.com/img/news.jpg" alt="{$news.title}" /></a>

</xen:if>

</xen:contentcheck>

</xen:if>

</xen:if>



</div>

<div class="tieude">

<h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3>

</div>

</div>

<div class="clearFix"></div>


<xen:elseif is="{$i}>=2 && {$i}<=3" />

<div class="item type2 nofade">

<div class="img">


<xen:if is="{$news.promote_icon} != 'disabled'">

<xen:if hascontent="true">

<xen:contentcheck>

<xen:if is="{$news.attach}">

<a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>

<xen:elseif is="{$news.medio}" />

<div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">

<a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>

</div>

<xen:elseif is="{$news.image}" />

<a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}"  /></a>

<xen:else />

<a href="{xen:link threads, $news}"><img src="http://hanhtrinhso.com/img/news.jpg" alt="{$news.title}" /></a>

</xen:if>

</xen:contentcheck>

</xen:if>

</xen:if>



</div>

<div class="tieude">

<h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3>

</div>

</div>

<xen:elseif is="{$i}>=4 && {$i}<=6" />

<div class="item type3 nofade">

<div class="img">

<span class="anhhao"><span class="tthong">{$news.node_title}</span> </span>

<xen:if is="{$news.promote_icon} != 'disabled'">

<xen:if hascontent="true">

<xen:contentcheck>

<xen:if is="{$news.attach}">

<a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>

<xen:elseif is="{$news.medio}" />

<div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">

<a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>

</div>

<xen:elseif is="{$news.image}" />

<a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}"  /></a>

<xen:else />

<a href="{xen:link threads, $news}"><img src="http://hanhtrinhso.com/img/news.jpg" alt="{$news.title}" /></a>

</xen:if>

</xen:contentcheck>

</xen:if>

</xen:if>



</div>

<div class="tieude">

<h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3>

</div>

</div>

<div class="clearFix"></div>


</xen:if>

</xen:foreach>

</div>

</div>
 

thuyet951

MasterCorporal
Tham gia
01/04/2016
Bài viết
311
Được Like
425
Biết dùng Teamview thì Inbox ID Pass mình qua sửa live cho.
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom