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

V

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>
 
T

thuyet951

MasterCorporal
Tham gia
01/04/2016
Bài viết
311
Được Like
426
Biết dùng Teamview thì Inbox ID Pass mình qua sửa live cho.
 
Bạn phải đăng nhập hoặc đăng ký để bình luận.
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
Root296 Help Giúp mình fix lỗi email verify Installation, Upgrade, and Import Support 4
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
namhbnam Help Giúp mình sửa lỗi này Installation, Upgrade, and Import Support 2
congquocsearu 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

Chủ đề tương tự


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

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom