Học làm web (48) - CSS căn bản (24): Bố cục trang web (tt)

Tiếp theo của: Học làm web (47) - CSS căn bản (23)
----

2.6.2       Các phương pháp tạo bố cục


Ở phần trước đã tìm hiểu về các loại bố cục, phần này sẽ tập trung vào khía cạnh thực hành, làm các bố cục gồm hai và ba cột bằng CSS. Các hướng dẫn trong phần này chỉ ở mức cơ bản, tập trung vào những vấn đề quan trọng của mỗi kĩ thuật. Để dễ dàng quan sát kết quả, nên sử dụng thuộc tính outline để tạo các đường viền xung quanh các vùng. Khác với border, thuộc tính outline không được tính vào kích thước của một phần tử, do vậy không làm ảnh hưởng đến bố cục.

Phần này đề cập tới các mẫu và các kĩ thuật sau,

– Tạo bố cục hai và ba cột bằng kĩ thuật float

– Tạo bố cục không phụ thuộc vào mã HTML bằng kĩ thuật float và margin

– Tạo bố cục nhiều cột bằng kĩ thuật position

Một số kĩ thuật khác: Column, Flexbox, Grid layout system, Regions và Exclusions

2.6.3 Tạo bố cục nhiều cột bằng kĩ thuật float

Ưu điểm của kĩ thuật float so với việc thiết lập vị trí cố định (tuyệt đối) là ngăn chặn tình trạng chồng lấn giữa các vùng nội dung, và dễ dàng thiết lập footer ở cuối trang.

Hạn chế của kĩ thuật float là nó phụ thuộc vào thứ tự xuất hiện của các phần tử trong mã nguồn. Tuy nhiên, có thể khắc phục hạn chế này bằng kĩ thuật margin với giá trị âm.

Tạo hai cột, kiểu fluid

Trong bài Lab2.5c, đã thực hành tạo bố cục hai cột, bằng cách float cột (phần tử) đầu tiên về phía trái, thiết lập margin cho cột (phần tử) thứ hai để nó hiển thị ở phía phải.

Trong ví dụ sau, sẽ thực hiện float tất cả các cột (phần tử) về cùng một phía. Có thể float về phía trái, hoặc phía phải, tùy theo thứ tự của chúng trong mã nguồn và yêu cầu thực tế.

Cách làm: thiết lập độ rộng cho các cột, float tất cả về phía trái, thiết lập thuộc tính clear cho footer để nó luôn nằm ở cuối trang.

[HTML]

<div id="header">Phần đầu trang (menu, logo, quảng cáo, tiêu đề)</div>
<div id="main">Phần nội dung chính của trang</div>
<div id="extras">Các liên kết, các mục tin</div>
<div id="footer">Thông tin bản quyền</div>

[CSS]

* {
            outline: 1px dashed red;
}
#main {
            width: 60%;
            margin: 0 5%;
            float: left;
}
#extras {
            width: 25%;
            margin: 0 5% 0 0;
            float: left;
}
#footer {
            clear: left;
}

Xem hình minh họa,



Một số thông tin thêm,

– Để đơn giản, trong phần mã CSS đã lược bỏ đi rất nhiều đoạn mã định dạng, ví dụ về màu nền, padding, định dạng văn bản; bạn có thể tự thêm vào các định dạng này, để có được giao diện theo ý muốn

– Bố cục của trang gồm bốn phần (header, main, extras, footer), mỗi phần nằm trong một phần tử div, thứ tự của các phần này được thể hiện trong mã HTML

– Cả phần mainextras đều được float sang trái, tuy nhiên, cũng có thể cho một cái float sang trái, cái còn lại float sang phải cũng được kết quả tương tự. Để float, cần thiết lập độ rộng cho chúng

– Thiết lập margin phía phải và trái 5% cho phần main, phần extras chỉ cần thiết lập margin phía phải; margin phía trên của main và extras đều được thiết lập là 0 để căn đều phía trên

– Thiết lập thuộc tính clear cho vùng footer để nó không còn bị ảnh hưởng bởi thuộc tính float, và sẽ luôn nằm ở cuối trang

– Có thể sử dụng hai thuộc tính max-widthmin-width để khống chế các cột, không bị quá rộng hoặc quá hẹp

Tạo hai cột, kiểu fixed

Cách làm: bọc nội dung mỗi vùng bằng một div; thiết lập độ rộng cho từng cột, thực hiện float các cột. Bọc toàn bộ nội dung của trang bằng một div khác (#wrapper), xác định độ rộng cho div này. Độ rộng được thiết lập bằng đơn vị pixel. Clear phần footer để nó luôn nằm ở cuối trang.

[HTML]

<div id="wrapper">
            <div id="header">Phần đầu trang (menu, logo, quảng cáo, tiêu đề)</div>
            <div id="main">Phần nội dung chính của trang</div>
            <div id="extras">Các liên kết, các mục tin</div>
            <div id="footer">Thông tin bản quyền</div>
</div>

[CSS]

#wrapper {
            width: 960px;
}
#main {
            width: 650px;
            margin: 0 20px;
            float: left;
}
#extras {
            width: 250px;
            margin: 0 20px 0 0;
            float: left;
}
#footer {
            clear: left;
}

Xem hình minh họa,



Một số thông tin thêm,

– Toàn bộ nội dung của trang được bọc trong div #wrapper, độ rộng của #wrapper thường là 960px

– Không để chiều rộng của các cột (tính cả margin, border và padding của mỗi cột) vượt quá chiều rộng của wrapper, nếu vượt quá, sẽ có cột bị rơi xuống phía dưới. Đối với mỗi cột, khi tăng border và padding thì nhớ trừ vào độ rộng của vùng nội dung, để tổng kích thước của cột vẫn giữ nguyên

Tạo hai cột, kiểu fixed, căn giữa

Cách làm: tương tự như tạo hai cột, kiểu fixed, chỉ thực hiện thêm việc căn giữa div #wrapper. Để căn giữa, thiết lập margin trái/phải là auto.

[CSS]

#wrapper {
            width: 960px;
            margin: 0 auto;
}

Xem hình minh họa,



Thông tin thêm,

– Nếu muốn phần header và footer trải rộng hết cửa sổ trình duyệt, cần bỏ div #header và div #footer nằm ra ngoài div #wrapper

[HTML]

<div id="header">Phần đầu trang (menu, logo, quảng cáo, tiêu đề)</div>
            <div id="wrapper">
                        <div id="main">Phần nội dung chính của trang</div>
                        <div id="extras">Các liên kết, các mục tin</div>
            </div>

            <div id="footer">Thông tin bản quyền</div>
-----------
Cập nhật [03/12/2019]
-----------
Xem thêm: Tổng hợp các bài viết về Học làm web
Xem thêm: Học làm web (49) - CSS căn bản (25)