Việc sử dụng DIV kết hợp với CSS để làm layout (bố cục) cho một trang web đã trở lên phổ biến và đạt hiệu quả cao. Chẳng hạn bạn cần thiết kế một trang có giao diện được thiết kế với layout như sau:
Với layout như trên bạn hoàn toàn bạn có thể sử dụng table (bảng) cho việc thiết kế, tuy nhiên table lại bộc lộ khá nhiều nhược điểm khi sử dụng làm layout cho một trang web có cấu trúc như trên. Các nhược điểm có thể gặp phải với table với những dạng layout này là chậm, khó tùy chỉnh và khó kết hợp với CSSJavascript để tạo lên sự linh hoạt cho trang web.
Sau đây tôi sẽ hướng dẫn các bạn các bước căn bản nhất để có thể tạo được các layout với DIV và CSS. Trước hết bạn cần tạo mới một trang HTML với cấu trúc chuẩn (gồm đầy đủ các phần html, head, title, body). Tiếp theo bạn code đoạn mã HTML sau vào phần body của trang.
[sourcecode language=”html”]
<div id="main">
<div id="head">
</div>
<div id="head-link">
</div>
<div id="left">
</div>
<div id="content">
</div>
<div id="right">
</div>
<div id="footer">
</div>
</div>
[/sourcecode]
Các cặp thẻ trong đoạn mã trên giúp bạn tạo ra các phân vùng khác nhau trên trang HTML của mình, mỗi phân vùng được đánh ID riêng biệt (các ID này sẽ dùng để định nghĩa CSS), chi tiết như sau:
- main: Phân vùng chứa toàn bộ nội dung của trang.
- head: Phân vùng chứa nội dung đầu tiên của trang (theo VD trên đó là phần logo + banner)
- head-link: Phân vùng chứa các liên kết đầu trang (ở VD trên: Home, Students, Course, v.v.)
- left: Phân vùng chứa các nội dung bên trái (ở VD trên là các liên kết trái)
- content: Phân vùng chứa các nội dung chính của trang (ở VD trên là các phân vùng thông tin như: Hot news, Photo Slide, News 1, v.v.)
- right: Phân vùng chứa các thông tin bên phải trang (ở VD trên là lịch, biểu đồ, bản đồ)
- footer: Phân vùng chứa các thông tin cuối trang (ở VD trên là thông tin về chủ sở hữu và các liên kết)
Chạy thử trang trên trình duyệt kết quả sẽ như sau:
Bây giờ là đến công đoạn code các bộ chọn CSS (selector) để phân vùng rõ ràng cho các DIV đã tạo ở trên:
1. Tạo bộ chọn body để cố định phông chữ cho cả trang và bộ chọn #main để cố định độ rộng vùng thông tin và trang sẽ chiếm và căn chỉnh vùng này nằm giữa màn hình.
[sourcecode language=”css”]
body{
font-family: Arial, Tahoma;
font-size: 12px;
}
#main{
width: 1000px;
padding: 0;
margin-left: auto;
margin-right: auto;
}
[/sourcecode]
2. Tạo bộ chọn #head xác định chiều cao, màu nền, đường viền và khoảng cách so với các vùng khác (khoảng cách so với vùng bên dưới – margin-bottom).
[sourcecode language=”css”]
#head{
height: 100px;
background-color: #F5F5F5;
border: 1px solid #CDCDCD;
margin-bottom:5px;
}
[/sourcecode]
3. Kiểm tra lại trang trên trình duyệt bạn sẽ có kết quả sau (phần div với id là head đã được xác định):
4. Tiếp tục với định nghĩa bộ chọn #head-link, để xác định vùng đặt các liên kế đầu trang:
[sourcecode language=”css”]
#head-link{
height: 30px;
line-height: 30px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #CDCDCD;
background-color: #F5F5F5;
margin-bottom:5px;
clear: both;
}
[/sourcecode]
5. Quan sát lại trang trên trình duyệt, bạn sẽ thấy vùng liên kết đầu trang hiển thị ngay dưới phần head.
6. Định nghĩa tiếp bộ chọn #left để xác định vùng cho nội dung bên trái, với độ rộng là 200px, chiều cao tối thiểu là 400px và đặc biệt chú ý tới mô tả float: left; mô tả này làm cho vùng bên trái (DIV với ID là left) sẽ dạt sang bên trái nhường chỗ cho các phân vùng khác: content và right).
[sourcecode language=”css”]
#left{
width: 150px;
min-height: 400px;
border: 1px solid #CDCDCD;
float:left;
background-color: #004C00;
margin-bottom: 5px;
}
[/sourcecode]
7. Quan sát lại sự thay đổi về các vùng của trang trên trình duyệt:
8. Bổ sung tiếp các selector cho vùng giữa và vùng phải lần lượt là #content và #right:
[sourcecode language=”css”]
#content{
width: 600px;
min-height: 400px;
border: 1px solid #CDCDCD;
float:left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
#right{
width: 234px;
min-height: 400px;
border: 1px solid #CDCDCD;
float:right;
margin-bottom: 5px;
}
[/sourcecode]
9. Quan sát lại trang
10. Cuối cùng, bạn định nghĩa bộ chọn cho phân vùng cuối trang với id là #footer
[sourcecode language=”css”]
#footer{
height: 50px;
clear: both;
border: 1px solid #CDCDCD;
background-color: #F8F8FF;
}
[/sourcecode]
11. Quan sát lại trang trên trình duyệt bạn sẽ thấy các phân vùng cần thiết đã vào đúng vị trí cần đặt:
Như vậy qua các bước ở trên chúng ta đã thử nghiệm với các phương pháp cơ bản để dàn trang sử dụng thẻ Div có sự kết hợp với CSS. Điều quan trọng nhất là bạn biết cách áp dụng những kỹ thuật cơ bản này để tạo ra các trang web có layout mà bạnkhách hàng của bạn mong muốn. Bây giờ bạn tiếp tục bổ sung thông tin vào các phân vùng và định nghĩa thêm các bộ chọn cần thiết để có thể có một trang HTML giống như mẫu thiết kế ở đầu bài viết.
Chúc bạn thành thạo DIV và CSS để có được những trang web vừa mắt người dùng!
Nguyễn Việt Khoa
_________________________________________________________
Mời bạn đọc thêm bài viết sau “RWD đơn giản với CSS và DIV“.
Bài viết hay, dễ hiểu
dung vay
thanks for tapchilaptrinh!
kha hay. nhung khong hieu la phan css nay dat thang vao file html la la xay dung o mot file .CSS
Tùy bạn thôi, nhưng theo mình thì nên tách code CSS khỏi code HTML. 🙂
Theo như bài viết thì phần CSS này đặt trong một file .css riêng đó bạn.
Cái đó tùy mình thích đặt ở đâu cũng đk
Có thể mở một file css không thì đặt thẳng ở html luôn
Đôi khi mình muốn canh chỉnh văn bản (hoặc một div khác) nằm giữa div mẹ thì phải làm sao? Trên mang họ khuyên là display hộp div thành dạng block rồi dùng lệnh trong CSS canh chỉnh… Nhưng như thế thì một số tính chất của div sẽ bị mất. Có cách nào khác hiệu quả hơn không?
Cám ơn TTLP, bài viết dễ hiểu lắm 🙂
Mình chưa rõ là những tính chất gì bị mất? Mình cũng cần biết rõ giữa theo câu hỏi của bạn là theo chiều ngang hay chiều dọc?
Thông thường nếu căn văn bản chính giữa theo chiều ngang thì mình hay dùng text-align trong CSS, còn căn chỉnh box nào đó nằm giữa trong 1 box khác thì mình hay dùng margin-left và margin-right với giá trị auto.
Bạn có thể tìm hiểu thêm ở bài này: http://tapchilaptrinh.wordpress.com/2012/07/16/can-giua-mot-phan-tu-trong-html-su-dung-css3/
À cám ơn bạn, mình căn chữ theo chiều dọc + ngang đó (middle-center mà)
Một số tính chất mình gán vào div như độ rộng dài, thường thì mình đặt độ rộng theo phần trăm. Nhưng khi biến đổi sang dạng block là bị rối loạn tùm lum hết 🙂
Cảm ơn bạn, bài viết rất hữu ích cho mình- một người mới bắt đầu tìm hiểu về css
thầy ơi cho e hỏi sao mình làm cái này trên Macromedia Dreamweaver 8 nó nhìn các khung nó bé xíu ý thầy ơi còn chạy nó thỳ lại đẹp vậy thầy cho e hỏi tại sao lại vậy ạ
Hì, chắc bạn phải hỏi Macromedia (à ko giờ phải hỏi Adobe). 🙂
thank.. bài viết khá hay khá rõ ràng dễ hiểu.. thank rất nhìu
so với table ngày xưa, thì DIV làm website load nhanh hơn, nhưng nếu không cẩn thẩn dễ bị vỡ layout div lắm.
Không cẩn thận thì cái gì cũng dễ vỡ bạn ạ 🙂
Ơ sao width tổng = 1000px mà cộng left+content+right= 984 va các margin =5px vay co thua hay thieu khong ma tai sao lai nhu vay.
Ở đây chủ yếu mình hướng dẫn một cách căn bản nhất để có thể tạo ra layout cho trang web, việc tổng kích thước nhỏ hơn, hay lớn hơn thì bạn có thể xem xét và điều chỉnh cho phù hợp, ngoài độ rộng, margin, thì border và padding cũng ảnh hưởng tới độ rộng của toàn trang.
bạn chưa cộng mấy cái linh tinh khác kìa. còn border, padding, margin nữa kìa bạn tấp cả cộng lại là vừa đủ. nếu không đủ thì cũng không sao mà.
tổng lớn hơn thì một thẻ sẽ tự động xuống dòng. nếu nhỏ hơn thì nhìn không được đẹp thôi
left=150+2 (viền)
content=600+2 (viền)+10 (margin 2 phía =5+5)
right=234+2 (viền)
–> Tổng lại đúng là 1000px.
Thanks rất nhiều.
Cám ơn Bạn Rất Nhiều!…Bài rất hay và dễ hiểu.
Nếu có thể thì bạn hướng dẫn cách tạo file CSS để gán trực tiếp cho html thì tốt cho mấy bạn newbie hơn.
Thanks Nhiều ^^!
bạn ơi cho mình hỏi làm sao để div nội dụng tự động co dãn theo nội dung trang web đc vậy bạn
bạn ơi cho mình hỏi làm sao để div content có thể tự động co dãn chiều dài theo nội dụng từng trang được bạn
Bạn xem thêm về thiết kế CSS fixed và Liquid ở đây nhé: http://www.webtopviet.com/html-css/layout/fixed/3column/
Mình chia sẽ thêm về cách dàn trang theo chuẩn CSS dưới đây: http://www.webtopviet.com/html-css/layout/fixed/3column/
mình đã làm như bạn nhưng chạy trên eclipse với tomcat nhung nó không hiên thị
Mình chưa hiểu ý “nó không hiển thị” của bạn? Theo mình thì mấy thứ này không phụ thuộc vào Eclipse và Tomcat.
Làm thế nào để tạo đường liên kết với file css riêng trên html.
Làm sao để canh form đăng nhập đc cân đối khi bên là họ và tên còn bên là tuổi thì đoạn text đăng nhập sẽ bị mất tính cân đối .
1. Đây bạn ơi: http://www.w3schools.com/css/css_howto.asp
2. Chưa hiểu câu hỏi của bạn? Form đăng nhập sao lại có Họ tên và Tuôi?
tìm mãi đc bài viết rất hay.thanks nhé!
Bài viết hay quá, nhưng mình chưa biết tạo phần content chia tiếp làm 3 phần new1 new2 new3 thế nào. Bạn chỉ tiếp cho mình được không. Thanks
Bạn có thể sử dụng tiếp DIV để phân chia các vùng đó, nhớ định nghĩa CSS cho nó để có kích thước\không gian phù hợp là được
Cám ơn bạn đã hướng dẫn . ^_^
Cảm ơn tác giả, bài viết rất chi tiết
có làm đc trên Macromedia Dreamweaver 8 không vậy add
Làm được bạn ạ, dùng notepad cũng được mà 🙂
Anh ơi cho em hỏi e muốn tạo cái div có width = 60% và căn cho div này nằm giữa trang thì làm sao ạ??
Để một khối căn giữa bạn có thể sử dụng thuộc tính canh lề trái, phải của CSS, VD: margin-left: auto; margin-right: auto;
Cám ơn tác giả rất nhiều. Mình đang cần giúp đỡ: sau khi đã tạo các layouts, làm cách nào để mình hiển thị các files html vào các layouts? Nếu được, mong tác giả bài viết hướng dẫn giúp. Xin cám ơn.
Các vị trí trong layout bạn có thể bổ sung mã HTML\CSS để tạo thành nội dung hoàn chỉnh, còn nếu muốn đưa hẳn nội dung một trang HTML vào đó bạn cần tìm hiểu thêm về AJAX hoặc đơn giản là dùng Iframe 🙂
anh ơi cho em hỏi làm sao để phóng to thu nhỏ nó không bị nhãy lung tung vậy
Mình đang học thiết kế web cơ bản, html và css may đã tìm được tài liệu có ích với việc học.cảm ơn bạn
Hay qua…. hay qua…
Cảm ơn bạn về bài đăng. Nhưng mình gặp chút trục trặc là khi phần nội dung của phần content nhiều thì phần khung nó sẽ dài ra xuống dưới, nhưng phần left và right thì không dài theo phần content. vậy có cách nào khắc phục lỗi này? Cảm ơn bạn nhiều… 🙂
Cảm ơn bạn,bài viết rất hữu ích,dễ hiểu.Mong được đọc nhiều bài hữu ích hơn từ bạn
Cảm ơn admin, bài viết rất chi tiết!
admin cho em hỏi làm sao để phần head sát vào với viền của trình duyệt ạ
Chắc là cần điều chỉnh margin hay padding thôi bạn ạ.
thầy ơi cái bài này của thầy khá dễ hiểu nhưng mà khi em code xong thì em thay đổi kích thước của tring duyệt thì các cái khung bên trong nó ko chịu tùy chỉnh kích thước theo thầy ạ,,,,thầy làm 1 bài như thế đi thầy :))
Bạn muốn làm responsive có thể tìm hiểu về Bootstrap hoặc đọc bài viết hơi cũ của tôi về RWD: http://tapchilaptrinh.vn/2013/03/26/rwd-don-gian-voi-css-va-div/
cho hỏi nếu muốn chia layout thành 4 cột thì lm s
Bạn làm tương tự như 3 cột thôi mà, thêm DIV, thêm CSS, thay đổi độ rộng của các cột, …