(Page
1
)
1
Posted at
05:48 25-06-2006
Cả tuần nay mình điên tiết với cái vụ thiết kế trang web với thẻ DIV và CSS thay vì dùng table. Mình đọc trên mạng thấy người ta có nói rằng khi layout cho trang web thì nên hạn chế dùng table nếu nó không phải là một bảng dữ liệu kiểu bảng nhiệt độ, tỉ số bóng đá, liệt kê danh sách. Và những web guru còn cho rằng dùng thẻ DIV thì linh hoạt hơn, thiết kế trang chạy nhanh hơn, linh hoạt hơn... nói chung, thẻ DIV + CSS được ca ngợi hết lời.
Chính vì lý do đó, mình mới ngẫm nghĩ rằng nên chuyển cái forum phpBB của mình sang dùng thẻ DIV thay cho table xem thế nào. Kết quả, đánh vật cả một tuần, làm hỏng luôn forum mà không ra được ngô khoai gì.
Sự thất bại thật thảm hại. Có mấy nguyên nhân sau đây:
- Vừa đọc tài liệu vừa làm chứ chưa thật rành về CSS và cách chế ngự các thuộc tính của các thẻ.
- Các trình duyệt xử lý khác nhau đối với các thẻ, CSS nên nếu xem tốt trong IE thì trong Firefox thất bại hoặc ngược lại mặc dù mình không đòi hỏi trang web của mình phải phục vụ mọi trình duyệt, nhưng đối với một trang web tối thiểu phải phục vụ được cho người dùng sử dụng 2 trình duyệt kia.
- Layout bằng thẻ DIV và CSS thì khi đánh dấu (bôi đen) để in một đoạn văn bản nào đó mà nằm ở 2 hay nhiều DIV khác nhau thì mới kinh khủng làm sao, nó đánh dấu rất mất trật tự, in ra đọc không hiểu. Cái này khi dùng Table không hề bị.
Kết quả cuối cùng phải chép lại các file .tpl của forum gốc nguyên thủy dùng với table.
Phải nói rằng mình rất bực tức vì tìm khắp trên mạng không thấy có cái forum nào người ta dùng thẻ DIV để layout cả. Như vậy là thế nào nhỉ? Phải chăng họ đã nhìn thấy rằng chưa đến lúc dùng nó (kể cả vBulletin nổi tiếng như thế vẫn dùng table).
Mình mong muốn bạn nào có kinh nghiệm về DIV và CSS viết giúp mình một đoạn code có thể chạy được trên IE và Firefox hiển thị đúng cái bảng như thế này:
Mình đã thử làm như thật là thất bại vì không biết dùng postion là relative hay absolute. Cái rất khó là khi màn hình có độ phân giải khác nhau thì phải có sự điều chỉnh layout chứ không thì xem không ra gì.
Mình đã thử làm như sau:
<style>
#board { width: 98%; margin-left: 1%; }
#firstrow { width: 100%; margin-left: 1%; background-color: green }
#firstrow_cell1 { width: 75%; margin-right: 1px; background-color: red }
#firstrow_cell2 { width: 7%; margin-right: 1px; background-color: red }
#firstrow_cell3 { width: 7%; margin-right: 1px; background-color: red }
#firstrow_cell4 { width: 7%; margin-right: 1px; background-color: red }
/* 4% use for padding between above cells, paddings like vertical grid */
#secondrow { width: 98%; margin-left: 1%; background-color: magenta }
#rowboard { width: 98%; margin-left: 1% }
#rowboard_col1 { width: 5%; }
#rowboard_col2 { width: 70%}
#rowboard_col3 { width: 7%}
#rowboard_col4 { width: 7% }
#rowboard_col5 { width: 7% }
</style>
<body>
<div id="board">
<div id="firstrow">
<div id="firstrow_cell1">Diễn đàn</div>
<div id="firstrow_cell2">Chủ đề</div>
<div id="firstrow_cell2">Bài gửi</div>
<div id="firstrow_cell2">Bài cuối</div>
</div>
<div id="secondrow">Tên categories đặt ở dòng này</div>
<div id="rowboard">
<div id="rowboard_col1">Chèn cái ảnh biểu tượng có bài mới vào đây<div>
<div id="rowboard_col2">Tên forum / tên box và tóm tắt về nó<div>
<div id="rowboard_col3">Số lượng chủ đề<div>
<div id="rowboard_col4">Số lượng bài gửi<div>
<div id="rowboard_col5">Bài viết cuối của ai, lúc nào<div>
</div>
</div>
</body>Với đoạn mã gần tương tự như trên, mình không thể nào điều khiển được các thẻ DIV sắp xếp sao cho nó giống như cái hình minh họa trên kia được, tức nó nằm rất lộn xộn không ra table và các cell gì cả, lúc thì cái này đè lên cái kia, đa số là mỗi DIV xong thì xuống hàng nên không nối tiếp DIV khác vào theo hàng ngang được cho dù đã dùng các thuộc tính về postion khác nhau (relative, fixed, absolute), clear, v.v... đủ mọi kiểu vẫn chẳng thể nào làm được như hình minh họa.
Dường như nó quá khó, nhất là để chạy được trên cả IE6 và cả Firefox.
Còn rất khó khi mình muốn sắp xếp các DIV, vì để có thể điều chỉnh layout tùy theo độ phân giải nên mình dùng đơn vị đo là % hơn là pixel thì lại vướng cái là không biết được cái DIV trước kết thúc ở vị trí nào để cái DIV nối sau theo hàng ngang cách cái DIV trước 01px. Đang rất bí đến nổi mình định dùng Javascript để tính toán tọa độ trên màn hình nhằm bố trí các thứ đúng theo từ Pixel theo ý của mình (nhưng nghĩ lại cách này sẽ làm cho forum sinh mã khổng lồ => chạy như con rùa thì mục đích bị sai lạc, kém hơn dùng Table => cải lùi :-( )
Cầu cứu các bạn ra tay cứu giúp.
Rất cảm ơn những ai có ý kiến hay giúp mình giải quyết được vấn đề - mà không phải quay lại với các TABLE (mình rất ghét table vì nó không hứa hẹn sẽ cho phép nhúng Ajax vào).
