CSS cho web ba cột với tiêu đề web – định vị chính xác

Để tăng sự mềm dẻo cho trang web, hiện nay người ta đang cố gắng loại bỏ các table khi thiết kế layout, thay vào đó là sử dụng thẻ DIV và kết hợp với CSS. Bài viết này cung cấp một ví dụ đơn giản giúp chúng ta có thể nhanh chóng dựng một layout mà không…

Để tăng sự mềm dẻo cho trang web, hiện nay người ta đang cố gắng loại bỏ các table khi thiết kế layout, thay vào đó là sử dụng thẻ DIV và kết hợp với CSS. Bài viết này cung cấp một ví dụ đơn giản giúp chúng ta có thể nhanh chóng dựng một layout mà không tốn quá nhiều thời gian cho việc design.
Ví dụ này trình bày cách thiết kế 1 layout gồm 3 phần: header, body, footer. Trong đó phần body gồm left_bodymain_body.

example.html

view plaincopy to clipboardprint?

Trích:
<head>
<title>Example</title>
<link rel=”stylesheet” href=”example.css” mce_href=”example.css” type=”text/css” /> </SPAN>
</head>
<body>
<div id=”wrapper”> </SPAN>
<div id=”header”>header</div> </SPAN>

<div id=”body”> </SPAN>
<div id=”body_left”>body_left</div> </SPAN>
<div id=”body_main”>body_main</div> </SPAN>
<div></div> </SPAN>
</div>

<div id=”footer”>footer</div> </SPAN>
</div>
</body>
</html>

example.css

view plaincopy to clipboardprint?

Trích:
* {
margin:0;
}
body {
text-align:center;
} </SPAN>
#wrapper {
margin:auto;
width:800px;
} </SPAN>
#header {
height:100px;
background:#99CC66;
} </SPAN>
#footer {
height:100px;
background:#339933;
} </SPAN>
#body_left {
float:left; </SPAN>
width:100px;
height:600px;
background:#FF9900;
} </SPAN>
#body_main {
float:left; </SPAN>
width:700px;
height:600px;
background:#99CCFF;
}
.vide {
clear:both;
}

* { margin:0;}body { text-align:center;}#wrapper { margin:auto; width:800px;}#header { height:100px; background:#99CC66;}#footer { height:100px; background:#339933;}#body_left { float:left; width:100px; height:600px; background:#FF9900;}#body_main { float:left; width:700px; height:600px; background:#99CCFF;}.vide { clear:both;}

Như ta thấy ở trên, file html không có gì đặc biệt, nó chỉ bao gồm cấu trúc các thành phần mà ta cần bố trí, còn bố trí như thế nào thì phụ thuộc hoàn toàn vào file CSS.

Bây giờ, ta sẽ tìm hiểu từng bước cách tạo layout trên:
– Tạo div #wrapper dùng để bao hàm toàn bộ trang web. Ta cần căn giữa div này trong cửa sổ để giúp trang web của chúng ta thích ứng với nhiều loại màn hình và độ phân giải khác nhau. Để làm được điều này, ta dùng margin:auto cho Firefox (vô dụng với IE ) và text-align:center trong body cho IE (vô dụng vơi FF ). Cuối cùng, thuộc tính width quyết định độ rộng trang web.
– Tạo các div: #header, #footer, #body. Không có gì đặc biệt, chúng sẽ lấy hết độ rộng của #wrapper và bố trí liên tiếp nhau từ trên xuống dưới:

Trích:
<div id=”wrapper”>

<div id=”header”></div>
<div id=”body”></div> </SPAN>
<div id=”footer”></div>
</div>

</SPAN>

– Bây giờ trong div #body, ta sẽ chia làm 2 cột bằng cách tạo 2 div #body_left#body_main với 2 thuộc tính float (trôi nổi) và width. 2 div này sẽ bố trí liên tiếp nhau từ trái sang phải, nếu #body có đủ độ rộng:

Trích:
<div id=”wrapper”>
<div id=”header”></div> </SPAN>
<div id=”body”> </SPAN>
<div id=”body_left”></div> </SPAN>
<div id=”body_main”></div> </SPAN>
</div>
<div id=”footer”></div> </SPAN>
</div>

– Vấn đề bắt đầu nảy sinh: #footer biến mất 1 cách đầy bí ẩn . Thực ra nó ko biến đi đâu cả, có điều ta ko nhìn thấy được vì nó đã bị #body_left#body_main che mất. Lý do: #body tuy bao hàm #body_left#body_main, nhưng chiều cao của nó lại không phụ thuộc vào chiều cao của #body_left hay #body_main (do thuộc tính “trôi nổi” của chúng). #footer nằm sát dưới #body, mà #bodyheight 0, cho nên #footer sẽ nằm sát dưới #header, và bị #body_left#body_main che khuất.
Dĩ nhiên ta có thể đặt height cho #body bằng với height của #body_left và #body_main để đẩy #footer xuống đúng chỗ. Tuy nhiên #body_left#body_main thường có height thay đổi (phụ thuộc vào nội dung của chúng), và height của chúng thường cũng không bằng nhau. Cho nên ta chọn giải pháp là đặt thêm 1 div đặc biệt với thuộc tính clear:both bên dưới. Với thuộc tính clear:both, div đặc biệt này sẽ luôn nằm sát dưới 2 div “trôi nổi” kia. #body lại luôn phải bao hàm div đặc biệt này, do đó, nó sẽ luôn có height bằng với height lớn nhất của #body_left #body_main. Nhờ vậy, #footer luôn được định vị đúng chỗ:

Trích:
<div id=”wrapper”>
<div id=”header”></div>

<div id=”body”> </SPAN>
<div id=”body_left”></div> </SPAN>
<div id=”body_main”></div> </SPAN>
<div></div> </SPAN>
</div>

<div id=”footer”></div> </SPAN>
</div>

</SPAN>

OK! Vậy là ta đã dựng xong một layout mềm dẻo, với code html hết sức gọn gàng sáng sủa. Một điều cần lưu ý là khi bố trí các div tạo cột, cần tính với độ rộng bao ngoài của div đó (margin+border+padding+width). Ở ví dụ này, nếu #body_mainpadding:5px thì #wrapper phải rộng ra thêm 10px nữa mới đủ chỗ, nếu không nó sẽ nhảy xuống dưới .
-ST-
Chưa có thời gian để viết, sẽ cố viết bài kỹ hơn trong thời gian tới
các bác ủng hộ mình nhé

Post a comment or leave a trackback: Trackback URL.

Phản hồi

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: