----
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: Học làm web (50) - CSS căn bản (26)