Question Làm thế nào để đúng khung các bài viết cùng chuyên mục và khung chia sẽ !

Tình hình là em đã mài mò nhiều nhưng kết quả chả được bao nhiêu. Phần vì mới tập tọ làm quen với xenfo, phần vì toàn tiếng anh. Em xin nói rõ mục đích là em muốn đong khung cái phần các bài viết cùng chuyên mục và mục chia sẽ ở cuối trang giống trong hình đính kèm.
Mong các bác cao tay giúp đỡ!
Em xin cảm ơn mọi người!

 

vào temp
chip_morethreads
thay thế toàn bộ bằng code

PHP:

<xen:require css="chip_morethreads.css" />
<center><table><tbody><tr style="margin-left: 3px; margin-right: 3px;">
<td>
<fieldset style="border: 1px solid rgb(204, 204, 204); border-radius: 5px 5px 5px 5px; width: 360px; height: 238px; padding: 9px;  float: left; margin:10px;">
<legend class="docthem"><img src="data/pic/tim.gif" border="0" width="50"> <font color="red"> BÀI VIẾT CÙNG CHUYÊN MỤC</font></legend>
    <div class="moreThreads">
<ul>
<xen:foreach loop="{$morethreads.items}" value="$item">
    <li><a href="{xen:link 'threads', $item}">{xen:raw $item.title}</a> <xen:if is="{$xenOptions.chip_morethreads_showtime}"><span class="muted">{xen:raw $item.postDate}</span></xen:if></li>
</xen:foreach>
</ul>
</div>
</fieldset>
</td>
<td>
<fieldset style="border: 1px solid rgb(204, 204, 204); border-radius: 5px 5px 5px 5px; width: 320px; height: 238px; padding: 9px; text-align: center; float: right; margin:10px;">
<legend class="docthem"><img src="data/pic/chiase.png" border="0" width="50"> <font color="red"> CHIA SẺ VỚI BÀI VIẾT BẠN BÈ</font></legend>
<!-- AddToAny BEGIN -->
<a class="a2a_dd" href="http://tuoitredalat.net/{xen:link threads, $thread}"><img title="Share" src="http://i40.servimg.com/u/f40/17/40/28/86/kqkqh10.png" alt="Share" border="0"></a>
<script type="text/javascript" src="js/ChipXF/readmorethread.js"></script>
<!-- AddToAny END -->
<br><br>
<center>
<input class="guichobanbe" type="text" title="Gửi cho bạn bè bài viết này" onclick="this.select()" value="{$thread.title} ~~>  http://tuoitredalat.net/{xen:link 'threads', $thread} :x ">
</center>
<br>
<a title="Gửi bài này cho bạn bè qua yahoo" href="ymsgr:im?+&amp;msg=Xem bài này hay lắm nè: http://tuoitredalat.net/{xen:link threads, $thread} Gửi cho bạn bè nữa nha :x"><img src="data/pic/yahoo.png" border="0"></a>
<br><br>
<a title="Ðăng lên Google" target="_blank" href="https://www.google.com.vn/bookmarks/mark?op=add&amp;bkmk=http://tuoitredalat.net/{xen:link threads, $thread}&amp;title=&amp;annotation="><img src="http://a.imageshack.us/img842/3125/googlea.png" border="0"></a>
<a title="Ðăng lên FaceBook" target="_blank" href="http://www.facebook.com/share.php?u=http://tuoitredalat.net/{xen:link threads, $thread}"><img src="http://farm3.anhso.net/upload/20111014/11/o/anhso-115453_DjR35.jpg" border="0"></a>
<a title="Ðăng lên ZingMe" target="_blank" href="http://link.apps.zing.vn/pro/view/conn/share?u=http://tuoitredalat.net/{xen:link threads, $thread}"><img src="http://a.imageshack.us/img402/8168/zing.gif" border="0"></a>
<a title="In trang này" href="javascript:window.print()"><img src="http://farm3.anhso.net/upload/20111014/12/o/anhso-12953_prints.gif" border="0"></a>
<br>
</fieldset>
</td>
</tr>
</tbody></table></center>

chip_morethreads.css

PHP:

.guichobanbe {
background-color: #EDF2F7;
background-image: url("styles/svhy/guibanbe.png");
background-repeat: no-repeat;
border: 1px solid #85B1DE;
display: block;
font-family: Arial,Sans-Serif;
font-size: 13px;
font-weight: 700;
padding: 1px 1px 1px 20px;
width: 260px;
margin-left: 10px;
}
.moreThreads {
    margin-left: 14px;
    margin-top: -14px;
}
.moreThreads h3 {
    color: red;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 3px;
}
.moreThreads ul li {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("data/pic/item.png");
    background-origin: padding-box;
    background-position: 0 8px;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-bottom: 0;
    margin-left: 14px;
    margin-right: 0;
    margin-top: 4px;
    padding-bottom: -3px;
    padding-left: 14px;
    padding-right: 0;
    padding-top: 4px;
}
.moreThreads ul li a {
    color: #913800;
}
.moreThreads ul li a:hover {
    color: #13518F;
}
.moreThreads .muted {
    font-size: 11px;
}
.docthem img{
vertical-align:middle;
}

vậy là xong nhé
theo tải phần mềm

 

Cái này thấy quen quen nhỉ :v

 

Em cảm ơn các bác rất nhiều, chúc bác stung12 và gia đình sức khỏe, vui vẻ. Xin cảm ơn bác.

 

ah quên phần ảnh thì bạn có thể lấy ảnh ở trang demo của bạn nhé ,
p/s: cảm ơn bạn rất nhiều về lời chúc,

 

Hôm trước bác đã hướng dẫn cho em cách làm khung bài viết, em đã làm được. Nhưng có một cái phát sinh đó là các bài viết tràn xuống phía dưới của khung. Mong bác sửa giúp em với.

 

Số bài viết này quá nhiều hoặc khuing quá nhỏ, tăng chiều cao khung lên là ok thôi bạn, bạn cho demo online mình xem thử nhé

 

Đánh đấu cái này

 

Em nó đây bác Stung12 : http://daknongit.net/index.php?thre...oi-len-windows-bang-bo-hinh-nen-tuyet-dep.52/
Cảm ơn bác trước nhá !

 

bác tìm css này
.moreThreads ul li
sau đó xóa 2 cái

1. margin-top: 4px;
2. padding-top: 4px;

@hungnhien

 

Cảm ơn bác, em làm được rồi. Chúc bác luôn gặp nhiều may mắn và vui vẻ trong cuộc sống. Em cảm ơn bác rất nhiều.