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
312
Được Like
427
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

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom