Thiết kế bố cục trang web layout với thẻ div

Thiết kế bố cục trang web layout với thẻ div
Để 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à div và css. Dưới đây là 1 ví dụ đơn giản giúp dân coder chúng ta có thể nhanh chóng dựng 1 layout mà ko tốn quá nhiều thời gian cho việc design.

VD này trình bày cách thiết kế 1 layout gồm 3 phần: header, body, footer. Phần body gồm left_body và main_body.

example.html

Code:
<head>
<title>Example</title>
<link rel="stylesheet" href="/cntt/example.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">header</div>

<div id="body">
<div id="body_left">body_left</div>
<div id="body_main">body_main</div>
<div class="vide"></div>
</div>

<div id="footer">footer</div>
</div>
</body>
</html>
example.css

Code:
* {
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 ko có j đặ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:

Code:
<div id="wrapper">

<div id="header"></div>

<div id="body"></div>

<div id="footer"></div>
</div>
Bây giờ trong div #body, ta sẽ chia làm 2 cột bằng cách tạo 2 div #body_left và #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:

Code:
<div id="wrapper">

<div id="header"></div>

<div id="body">
<div id="body_left"></div>
<div id="body_main"></div>
</div>

<div id="footer"></div>
</div>
Vấn đề bắt đầu nảy sinh: #footer biến mất. Thực ra nó đã bị #body_left và #body_main che mất. Lý do: #body tuy bao hàm #body_left và #body_main, nhưng chiều cao của nó lại ko 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à #body có height 0, cho nên #footer sẽ nằm sát dưới #header, và bị #body_left và #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 và #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 thằng "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 và #body_main. Nhờ vậy, #footer luôn được định vị đúng chỗ:

Code:
<div id="wrapper">
<div id="header"></div>

<div id="body">
<div id="body_left"></div>
<div id="body_main"></div>
<div class="vide"></div>
</div>

<div id="footer"></div>
</div>
OK! Vậy là ta đã dựng xong 1 layout ngon lành mềm dẻo, với code html hết sức gọn gàng sáng sủa. 1 đ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). Ở VD trên, nếu #body_main có padding: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.

Chúc các bạn học tập tốt!
Nguồn: Sưu tầm