Chia Module làm nhiều cột
Đăng Ký
Trang ChínhCalendarGalleryTrợ giúpTìm kiếmThành viênNhómĐăng kýĐăng Nhập

Ảnh hội viên 2teenvn.tk : Hỗ trợ qua YaHoo:

Quà Tặng Âm Nhạc -‘๑’- CongDongPro -‘๑’-
♥ NGUYỄN NGỌC ĐÔ: NGỌC ĐÔ
♥ Ca khúc: Anh Đã Từng Yêu
♥ Gửi đến: Tấc Cả Mem Pro
♥ Với lời nhắn: Cùng Chung Tay Xây Dựng 1 Cộng Đồng Giải Trí Teen Pro Việt
♥ Bạn muốn yêu cầu Click Here
Quà tặng âm nhạc

Nhấn nút PLAY > để xem nhé !!

Chia Module làm nhiều cột Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

Sat Jul 16, 2011 12:22 am

Khách vi
Khách viếng thăm

Bài gửiTiêu đề: Chia Module làm nhiều cột

Tiêu Đề : Chia Module làm nhiều cột

--------------------------------------------------
Click vào đây để xem hình phóng to (www.chiplove.biz)

Hum nai quên mất ko đi thi, tí thì tèo mất, 2 lần rồi >"<
may có đứa bạn nó alo đến gọi đi thi
hì..
vừa thi về xong, check mail thấy có bạn hỏi
cách chia Cái module ra làm 2 3 hay nhiều cột như thía nào.
Như hình minh họa bên trên
hì ^^!
cái nài thì cơ bản là dễ ^^!
nhưng phải bít chút ít HTML ^^!
hì...

Cũng ko cóa gì đâu
Cái nài các bạn cũng chẳng cần hỉu lắm ^^!,
mình sẽ đưa code để các bạn xài ^^!.

Đầu tiên là phải tạo 1 module đã ( cái nài đừng nói ko bik nha ^^!, trong mục Yahoo Plus + Hướng dẫn có rồi đấy )


Tiếp theo, các bạn cho cái Module nó nằm ra vị trí ở giữa trang, thía
cho nó to còn chia đc nhìu, ko thì cho lên top hoặc dưới bottom cũng đc


Đây là code chia cái module ra làm 2 cột:

<blockquote style="width:640px;">
<table border="1" width="100%">
<tbody>
<tr>
<td width="50%">Nội dung cột 1</td>
<td width="50%">Nội dung cột 2</td>
</tr>
</tbody>
</table>
</blockquote>



VD:
Nội dung cột 1Nội dung cột 2

Cái này cơ bản thì nó có viền ở xung quanh, nếu mún xóa viền đi, các bạn sửa cái border=0 là đc.
Để chèn nội dung vào các bạn chèn tương tự như sau:

<blockquote style="width:640px;">
<table border="1" width="100%">
<tbody>
<tr>
<td width="50%">
<img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif" />
<a href="http://linkbaiviet1.com">Tiêu đề bài viết 1</a><br />
<img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif" />
<a href="http://linkbaiviet1.com">Tiêu đề bài viết 2</a><br /></td>
<td width="50%">
<img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif" />
<a href="http://linkbaiviet1.com">Tiêu đề bài viết 1</a><br />
<img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif" />
<a href="http://linkbaiviet1.com">Tiêu đề bài viết 2</a><br /></td>
</tr>
</tbody>
</table>
</blockquote>


Ví dụ:
Tiêu đề bài viết 1
Tiêu đề bài viết 2
Tiêu đề bài viết 1
Tiêu đề bài viết 2
Các bạn để ý, đoạn

<blockquote style="width:640px;">
<img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif" />
</blockquote>


là hình ngôi sao ở trước các tiêu đề, các bạn mún thay = cái gì cũng đc.
Còn đoạn này

<blockquote style="width:640px;">
<a href="http://linkbaiviet1.com">Tiêu đề bài viết 1</a>
</blockquote>


là để liên kết tới bài viết của bạn
Các bạn có thể thay sao cho phù hợp
Còn cái

<blockquote style="width:640px;">
<br />
</blockquote>


là để xuống dòng.
Mình viết cái nài theo cách cực đơn giản để các bạn dễ hỉu + dễ làm
Còn nếu mún pro hơn thì kết hợp ít CSS nữa thì sẽ đẹp + gọn hơn



Có 1 cái nữa là, nếu dùng code cơ bản như này, thì khi nội dung cột 1
dài hơn cột 2 hoặc ngược lại thì cái cột có nội dung ngắn hơn

sẽ bị hiển thị tụt xuống ( ra giữa cột)
Nếu muốn lúc nào vị trí của các bài viết cũng ở trên top của cột
thì các bạn thêm cái đoạn mình to đậm như bên dưới này vào:

<blockquote style="width:640px;">
<td width="50%" valign="top">Nội dung cột 1</td>
</blockquote>


Vậy sau khi thêm sẽ đc cái này
Nội dung cột 1



Nội dung cột 2



Trên này code để chia module thành 2 cột.
Vậy nếu muốn chia thêm cột thì sao ?
VD là 3 cột
các bạn chỉ cần chèn thêm 1 đoạn nữa

<blockquote style="width:640px;">
<table border="1" width="100%">
<tbody>
<tr>
<td valign="top" width="33%">Nội dung cột 1</td>
<td valign="top" width="33%">Nội dung cột 2</td>
<td valign="top" width="33%">Nội dung cột 3</td>
</tr>
</tbody>
</table>
</blockquote>


là đc.
nếu muốn độ rộng các cột ngang nhau thì các bạn chia cái % đều ra là đc.


Vậy là đc 3 cột rồi nhé:
VD:

Nội dung cột 1Nội dung cột 2Nội dung cột 3

Okie
Nếu muốn nhìu cột hơn, các bạn chỉ cần làm tương tự như trên là đc
hì ^^!
Cái nài cũng đơn giản, ko có gì cả
Các bạn xem
ai thích thì làm nha ^^!
hì..
Nếu thích thì hãy gửi web này cho các bạn khác cùng bít để ủng hộ cho ChipLove nha ^^!
hì.
Càng đông càng vui càng hứng, có tinh thần post nhìu bài hay hơn nữa ^^!
hi
Chúc các bạn thành công


Chữ ký của Khách vi

Huy Chương của Khách vi







Chia Module làm nhiều cột

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang
Trang 1 trong tổng số 1 trang
* Viết tiếng Việt có dấu, là tôn trọng người đọc.
* Chia sẻ bài sưu tầm có ghi rõ nguồn, là tôn trọng người viết.
* Thực hiện những điều trên, là tôn trọng chính mình.
- Khi bạn thấy một bài viết hay, hãy ấn nút “THANKS” để cảm ơn vì sự cống hiến của họ.
- Nếu chèn smilies có vấn đề thì bấm A/a trên phải khung viết bài

Rss Add to Digg Add to Technorati Add to Delicious Add to Reddit Add to Yahoo Add to Google Add to Facebook Add to Twitter Add to FriendfeedAdd to Stumbleupon Add to Blinklist Add to Live Add to Slashdot Buzz Up
Permissions in this forum:Bạn không có quyền trả lời bài viết
-‘๑’club TIẾNG SÉT-‘๑’- :: -‘๑’ Cộng Đồng Blog -‘๑’ :: Thủ Thuật Blog-

Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2011, Jelsoft Enterprises Ltd.
Forumotion.com | © phpBB | Free forum support | Liên hệ | Report an abuse | Have a free blog with Sosblogs