Học làm web (49) - CSS căn bản (25)

Tiếp theo của: Học làm web (48) - CSS căn bản (24)
----
Tạo ba cột, kiểu fluid

Cách làm: (tương tự như tạo hai cột, kiểu fluid) thiết lập độ rộng cho cả ba cột, thực hiện float ba cột sang 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="links">Các liên kết</div>
            <div id="main">Phần nội dung chính của trang</div>
            <div id="news">Các mục tin tức</div>
            <div id="footer">Thông tin bản quyền</div>

[CSS]


#links {
            width: 22.5%;
            margin: 0 0 0 2.5%;
            float: left;
}
#main {
            width: 45%;
            margin: 0 2.5%;
            float: left;
}
#news {
            width: 22.5%;
            margin: 0 2.5% 0 0;
            float: left;
}
#footer {
            clear: left;
}


Xem hình minh họa,



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

– Mã HTML gồm năm div (#header, #links, #main, #news, và #footer)

– Vì ở phần này chỉ sử dụng float, nên phải để mã nguồn của div #main nằm giữa div #links và div #news thì ở giao diện cột #main sẽ nằm giữa cột #links và cột #news

– Cả ba cột điều được thiết lập độ rộng và float sang trái, cần lưu ý để tổng chiều rộng của ba cột và margin không vượt quá 100%

Lab2.6.a (exercise 16-1, p.388 [3])

Sử dụng margin giá trị âm

Khi tạo bố cục bằng kĩ thuật float, có một câu hỏi đặt ra là “có thể luôn luôn tạo được bố cục gồm ba cột, độc lập với mã HTML không?”. Câu trả lời là có, sử dụng margin với giá trị âm để thực hiện.

Cách làm: thiết lập độ rộng và float cho cả ba cột, sử dụng margin giá trị âm để “kéo” một cột từ phía phải sang phía trái trang web.

Quan sát ví dụ dưới đây, trong mã HTML, cột #main nằm trước cột #links, nhưng trên giao diện cột #main lại nằm sau cột #links. Ví dụ này thực hiện cho bố cục kiểu fixed, tuy nhiên cũng có thể thực hiện cho bố cục kiểu fluid với giá trị %.

[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="news">Các mục tin tức</div>
            <div id="links">Các liên kết</div>
            <div id="footer">Thông tin bản quyền</div>
</div>

[CSS]


#wrapper {
            width: 960px;
            margin: 0 auto;
}
#links {
            width: 200px;
            margin-top: 0;
            margin-left: -960px;
            float: left;
}
#main {
            width: 520px;
            margin-top: 0;
            margin-right: 20px;
            margin-left: 220px;
            float: left;
}

#news {
            width: 200px;
            margin: 0;
            float: left;
}
#footer {
            clear: left;
}


Xem hình minh họa,



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

– Trong mã nguồn (HTML), cột #main đứng đầu, cột #links đứng cuối; tuy nhiên, ở giao diện, cột #links đứng đầu, cột #main đứng cuối. Toàn bộ nội dung của trang được bọc trong #wrapper, độ rộng của #wrapper là 960px. Độ rộng của #links là 200px, #main là 520px, #news là 200px, khoảng cách giữa các cột là 20px.

– Để có được giao diện như yêu cầu, bước đầu tiên là float cả ba cột sang trái; sau đó di chuyển cột #main vào giữa, để trống một khoảng đủ để đặt cột bên trái (kích thước 200px) cộng thêm khoảng cách giữa hai cột là 20px, như vậy sẽ thiết lập margin-left cho #main là 220px; thiết lập khoảng cách giữa #main với cột bên phải bằng margin-right: 20px.

– Sử dụng margin giá trị âm để kéo cột #links đang bị rớt xuống dưới về phía trái. Vì cột #links sẽ nằm ở đầu của #wrapper, nên cần kéo nó sang trái một khoảng đúng bằng độ rộng của tất cả các phần tử nằm trước nó trong mã nguồn. Cụ thể, #main là 520px, cộng thêm margin-left 220px, cộng thêm margin-right 20px, cộng thêm #news 200px. Kết quả: 520 + 220 + 20 + 200 = 960px. Vậy cột #links sẽ thiết lập là margin-left: -960px.

– Kĩ thuật margin giá trị âm có thể thực hiện cho các cột ở vị trí bất kì

Lab2.6.b (exercise 16-2, p.391 [3])

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


Để tạo bố cục nhiều cột, ngoài kĩ thuật float, cũng có thể sử dụng kĩ thuật position. Đây là kĩ thuật thiết lập vị trí tuyệt đối cho các cột. Phần này sẽ tìm hiểu cách tạo bố cục gồm ba cột kiểu fluid và kiểu fixed.

Để dễ hiểu, nhắc lại một số khái niệm liên quan,

– Với một phần tử bất kì, có hai thông số cần quan tâm, một là vị trí, hai là kích thước

– Để định vị một phần tử (position) có thể để tự nhiên như trong mã nguồn (kiểu static); có thể chuyển sang kiểu relative, absolute, fixed; hoặc cũng có thể chuyển sang dạng trôi (float)

– Để xác định kích thước của một phần tử có thể sử dụng kiểu cố định bằng px (fixed-width), kiểu tương đối theo % phần tử chứa nó (fluid), hoặc kiểu tương đối theo kích thước phông chữ (em - elastic)

­– Kết hợp giữa các kiểu định vị và các kiểu kích thước sẽ tạo ra nhiều loại bố cục khác nhau

Trong kĩ thuật này, để đặt phần footer luôn ở cuối trang khá phức tạp, cần dùng đến JavaScript, nên bố cục sẽ tạm thời không xét tới phần footer. Thực tế, mọi người thường sử dụng kĩ thuật float để tạo cột hơn là sử dụng kĩ thuật position.

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

Cách làm: bọc ba cột (#main, #news, #links) bằng div #content, khi đó #content sẽ trở thành khối chứa (containing block) của ba cột. Thiết lập độ rộng và vị trí cho ba cột.

[HTML]

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

[CSS]


#content {
            position: relative;
            margin: 0;
}
#links {
            width: 20%;
            position: absolute;
            top: 0;
            right: 2.5%;
            margin: 0;
}
#main {
            width: 50%;
            position: absolute;
            top: 0;
            left: 25%;
            margin: 0;
}
#news {
            width: 20%;
            position: absolute;
            top: 0;
            left: 2.5%;
            margin: 0;
}


  
Xem hình minh họa,



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

– Nên để các cột trong khối chứa #content, và luôn nằm dưới vùng #header. Nếu để các cột trong khối chứa mặc định (html) thì có thể bị “vỡ” giao diện khi chiều cao của #header tăng lên. Thiết lập position: relative cho #content để nó trở thành khối chứa

– Cột #main được thiết lập độ rộng bằng 50% của #content, định vị tuyệt đối (position: absolute) trên đầu (top) và cách cạnh trái (left) của #content 25%. Khoảng trống 25% này được dùng để chứa cột bên trái 20%, cộng thêm margin 2.5% cho mỗi bên

– Cột #news được định vị tuyệt đối trên đầu và cách cạnh trái của #content 2.5% (top: 0; left: 2.5%)

– Cột #links được định vị tuyệt đối trên đầu và cách cạnh phải của #content 2.5% (top: 0; right: 2.5%)

­– Luôn chú ý để tổng chiều rộng của các cột (có tính padding và border) không được vượt quá 100%

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

Cách làm: tương tự như “tạo ba cột, kiểu fluid”, chỉ khác là bọc toàn bộ trang bằng #wrapper, đơn vị được sử dụng để đo chiều rộng và định vị là px.

[HTML]

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

 [CSS]


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

#content {
            position: relative;
            margin: 0;
}
#main {
            width: 520px;
            position: absolute;
            top: 0;
            left: 220px;
            margin: 0;
}
#news {
            width: 200px;
            position: absolute;
            top: 0;
            left: 0;
            margin: 0;
}
#links {
            width: 200px;
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
}


Xem hình minh họa,



-----------
Cập nhật [29/7/2018]
-----------
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 (50) - CSS căn bản (26)