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

vavdiec · 19/01/2018

mình có cái block hotnew như này

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 · 19/01/2018

Biết dùng Teamview thì Inbox ID Pass mình qua sửa live cho.

vavdiec · 19/01/2018

thuyet951 nói:
Biết dùng Teamview thì Inbox ID Pass mình qua sửa live cho.

bạn add skype của mh: vavdiec
khi nào online pm mh bật teamview nhé

Người đăng	Chủ đề tương tự	Diễn đàn	Trả lời	Ngày đăng
T	Help Giúp Mình Với Mội Người, Không Hiển Thị Được Khung Soạn Thảo Văn Bản	Installation, Upgrade, and Import Support	2	06/10/2022
	Help Giúp mình fix lỗi email verify	Installation, Upgrade, and Import Support	4	27/02/2020
H	Help Các bạn giúp mình cách định dạng giá tiền khi mình thêm một ô yêu cầu nhập giá	Installation, Upgrade, and Import Support	1	28/12/2019
	Help Giúp mình sửa lỗi này	Installation, Upgrade, and Import Support	2	24/03/2016
	Godaddy đã sp nhưng mình k biết cách sửa ai giúp mình với	Installation, Upgrade, and Import Support	2	15/09/2015

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

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

vavdiec

Private

thuyet951

MasterCorporal

vavdiec

Private

Chủ đề tương tự

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

Dịch vụ XenForo của VNXF

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ

Thông tin chung

LIÊN KẾT

LIÊN KẾT

LIÊN KẾT