Hỏi & Đáp cùng Tú CaoDanh mục đơn: WordpressHỏi về HTML và CSS cho trang home-page và trang giới thiệu sản phẩm
Hỏi về HTML và CSS cho trang home-page và trang giới thiệu sản phẩm 1Vô danh hỏi 4 năm trước

Chào Tú,
Mình có 2 vấn đề muốn hỏi. Mong nhận được câu trả lời của Tú
1. Mình đang làm trang để giới thiệu sản phẩm. Đáng lẽ ra sản phẩm được đăng phải trình bày ngay hàng như link này nhưng có vài chỗ nó lại hiển thị lệch như thế này (link). Tú xem CSS và sửa lại giúp mình với
/*–Shop CSS–*/
.product-thumb {
   width: 45%;
   float: left;
}
.product-info {
   width: 45%;
   margin-left: 5%;
   float: right;
}
.product-info h1 {
   font-size: 1.5em;
   margin-bottom: 0.5em;
}
.product-price, .product-status, .product-description {
   margin: 5px 0;
}
.order-button {
   color: #fff;
   background: rgb(33,189, 12);
   background-color: #FA8714;
   text-decoration: none;
   padding: 5px;
   margin: 15px 0;
   display: table;
}
.post-info {
   clear: both;
   padding-top: 15px;
}
.san-pham-giay {
   width: 31%;
   float: left;
   margin-right: 3%;
}
.san-pham-giay.thrid {
   clear: right;
   margin-right: 0;
   float: right;
}
.san-pham-giay.thrid:before, .san-pham-giay.thrid:after{
   visibility: hidden;
   content: “”;
   display: block;
   clear: both;
   height:0;
}
 
Đây là link trang mình đang làm http://antoanphat.com/giay-bao-ho/

2/ Mình muốn hiển thị “dự án tiêu biểu” như hình ở link này và tự động chạy (link demo http://tinhky.vn/) nhưng theme của mình chỉ hỗ trợ hiển thị như thế này (link) (link web của mình http://antoanphat.com/)
Mình gửi Tú HTML của web mình và CSS…Tú giúp mình sửa lại với
HTML
<?php
}elseif($key == ‘project_block’){ ?>
<?php if(of_get_option(‘project’) || of_get_option(‘project_cat’) ): ?>
<section id=”widgets”>
<div class=”ak-container widget-container clearfix”>
<div class=”widget-container-wrap”>
<?php
if(of_get_option(‘project’)):
$args = array(
‘page_id’ => of_get_option(‘project’)
);
$query = new WP_Query($args);
if($query->have_posts()):
while($query->have_posts()):
$query->the_post();
?>
<div class=”widget-block”>
<div class=”info-block-wrap”>
<div class=”info-title”><?php the_title(); ?></div>
<?php if(has_post_thumbnail()):
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘accesspress-root-project-big-thumbnail’ );
?>
<div class=”info-img”>
<a href=”<?php the_permalink(); ?>”>
<img src=”<?php echo $image[0]; ?>” alt=”<?php the_title(); ?>”>
</a>
</div>
<?php endif; ?>
<div class=”info-content”><?php echo accesspress_letter_count(get_the_content(),’200′); ?></div>
<a class=”info-read-more” href=”<?php the_permalink(); ?>”><?php echo esc_attr(of_get_option(‘project_readmore’)); ?></a>
</div>
</div> <!– widget-block –>
<?php
endwhile;
endif;
wp_reset_postdata();
endif;
?>
<?php if(of_get_option(‘project_cat’)): ?>
<div class=”widget-block”>
<div class=”project-block-wrap”>
<div class=”info-title”><?php echo get_cat_name(of_get_option(‘project_cat’)); ?></div>
<?php
$args = array(
‘posts_per_page’ => 99999,
‘cat’ => of_get_option(‘project_cat’)
);
$query = new WP_Query($args);
if($query->have_posts()): ?>
<div class=”project-slider”>
<?php
while($query->have_posts()):
$query->the_post();
?>
<div class=”slides”>
<div class=”project-img-wrap”>
<?php
$big_image[0] = “”;
if(has_post_thumbnail()):
$big_image = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘full’ );
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘accesspress-root-project-thumbnail’ );
?>
<img src=”<?php echo esc_url($image[0]); ?>”>
<?php
endif; ?>
<div class=”project-title”><?php the_title(); ?></div>
</div>
<div class=”project-content-wrap”>
<div class=”project-title”><?php the_title(); ?></div>
<div class=”project-content”><?php echo accesspress_letter_count(get_the_content(),’120′); ?></div>
<div class=”project-link-wrap”>
<a class=”project-search fancybox-gallery” data-lightbox-gallery=”gallery1″ href=”<?php echo esc_url($big_image[0]); ?>”> <i class=”fa fa-search”> </i> </a>
<a class=”project-link” href=”<?php the_permalink(); ?>”><i class=”fa fa-link”></i></a>
</div>
</div>
</div><!– slides –>
<?php
endwhile; ?>
</div>
<?php
endif;
wp_reset_postdata();
?>
</div> <!– project-block-wrap –>
</div> <!– widget-block –>
<?php endif; ?>
</div>
</div>
</section> <!– widget section –>
<?php endif; ?>
 
CSS:
/*————————————————————–
Blog section css
————————————————————–*/
#widgets{
margin-bottom: 50px;
}
.widget-block {
width: 47%;
float: left;
margin-left: 3%;
}
#widgets .widget-container {
padding-bottom: 45px;
border-bottom: 1px solid #f2f2f2;
}
.widget-container-wrap{
margin-left: -3%;
}
.info-title {
font-size: 18px;
font-weight: 600;
line-height: 24px;
margin-bottom: 15px;
}
.info-img img:hover{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url(“data:image/svg+xml;utf8,<svg version=’1.1′ xmlns=’http://www.w3.org/2000/svg&#8217; height=’0′><filter id=’greyscale’><feColorMatrix type=’matrix’ values=’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0′ /></filter></svg>#greyscale”);
}
.info-content {
margin-top: 10px;
font-size: 14px;
line-height: 22px;
}
.info-read-more{
margin-top: 0;
}

.project-block-wrap {
position: relative;
}
.project-block-wrap .slides {
cursor: pointer;
position: relative;
overflow: hidden;
}
.project-block-wrap .slides .project-img-wrap{
-webkit-transform:translateY(0);
-moz-transform:translateY(0);
transform:translateY(0);
-webkit-transition: -webkittransform 1s ease 0s;
-moz-transition: -moz-transform 1s ease 0s;
transition: transform 1s ease 0s;
}
.project-block-wrap .slides:hover .project-img-wrap{
-webkit-transform:translateY(-60px);
-moz-transform:translateY(-60px);
transform:translateY(-60px);
}
.project-block-wrap .bx-slider {
margin-left: -3%;
}
.project-title {
background: none repeat scroll 0 0 #f9f8f8;
line-height: 36px;
padding: 10px;
font-size: 16px;
line-height: 1.5;
padding: 10px;
}
.project-content-wrap {
bottom: 0;
left: 0;
position: absolute;
-webkit-transform: translateY(250px);
-moz-transform: translateY(250px);
transform: translateY(250px);
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1.5s ease 0s;
-moz-transition: -moz-transform 1.5s ease 0s;
transition: transform 1.5s ease 0s;
background: #1eb0bc;
text-align: center;
color: #ffffff;
}
.project-block-wrap .slides:hover .project-content-wrap {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 1s ease 0s;
-moz-transition: -moz-transform 1s ease 0s;
transition: transform 1s ease 0s;
}
.project-content-wrap .project-title{
color: #ffffff;
line-height: 22px;
text-align: center;
background: none;
padding-top: 60px;
}
.project-img-wrap .project-title{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
.project-content {
font-size: 12px;
line-height: 17px;
margin: 10px 0;
padding: 0 10px;
}
.project-link-wrap a {
border: 1px solid #fff;
color: #fff;
display: inline-block;
font-size: 12px;
height: 24px;
line-height: 20px;
margin-right: 2px;
width: 24px;
}
.project-block-wrap .bx-controls.bx-has-pager {
line-height: 5px;
position: absolute;
right: 0;
text-align: right;
top: 5px;
width: 50%;
}
.project-block-wrap .bx-wrapper .bx-pager{
text-align: right;
}

 
Chân thành cám ơn Tú đã đọc tin

Your Answer

13 + 15 =