Kiểu bố cục: Fixed (cố định kích thước)
Số cột của trang : 2 cột
Quy định các cột : fixed – fixed
Layout này bao gồm 2 cột được cố định kích thước, với chiều rộng mặc đinh của trang là 900px. Với các: cột bên phải được cố định một cách rõ ràng, trong khi cột nội dung ngầm cố định.
CODE LAYOUT
[sourcecode language=”html”]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>CSS Layout 2 cột cố định kích thước: Left, Content – CSS Fixed Layout</title>
<style type=”text/css”>
body{
margin:0;
padding:0;
line-height: 1.5em;
font-family: arial;
font-size: 14px;
background: #ada189;
}
b{font-size: 120%;}
em{color: red;}
#maincontainer{
width: 900px; /*Khai báo kích thước của main container*/
margin: 0 auto; /*Đưa bố cục website ra năm giữa*/
background: #fff;
}
#topsection{
background: #dccbaf;
height: 90px; /*Chiều cao của top section*/
}
#topsection h1{
margin: 0;
padding-top: 20px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-right: 250px; /*Thiết lập margin cho RightColumnWidth*/
border-right: 3px solid #999;
}
#rightcolumn{
float: left;
width: 250px; /*Width of right column*/
margin-left: -250px; /*Set left margin to -(RightColumnWidth) */
}
#footer{
clear: left;
width: 100%;
border-top: 3px solid #999;
text-align: center;
padding: 15px 0;
}
#footer a{
color: #575551;
}
.innertube{
margin: 0 10px; /*Margin nội dung nằm trong thẻ innertube */
text-align: justify;
}
#contentwrapper .innertube, #rightcolumn .innertube { margin: 10px;}
</style>
<script type=”text/javascript”>
/*** Hàm javascript phụ: Hàm này sử dụng vòng lặp để in ra nội dung demo, giúp chúng ta đỡ tốn công gõ lại. ***/
var text=[“Đây là nội dung demo”, “Chào mừng đến với WebtopViet.com”, “Học Thiết kế website chuyên nghiệp, Đào tạo SEO Google”]
function filltext(words){
for (var i=0; i<words; i++)
document.write(text[Math.floor(Math.random()*3)]+” “)
}
var text2 = [“Học Thiết kế website”]
function fill_menu(words){
document.write(“<ul>”);
for (var i=0; i<words; i++)
document.write(“<li>” + text2 + “</li>”)
document.write(“</ul>”);
}
</script>
</head>
<body>
<div id=”maincontainer”>
<div id=”topsection”><div class=”innertube”><h1>CSS Layout: 2 cột cố định kích thước (Fixed) – Content, Right</h1></div></div>
<div id=”contentwrapper”>
<div id=”contentcolumn”>
<div class=”innertube”><b>2. Nội dụng (content column): <em>Fixed</em></b> <br/> <script type=”text/javascript”>filltext(48)</script></div>
</div>
</div>
<div id=”rightcolumn”>
<div class=”innertube”><b>1.Cột phải (right) <em>250px</em></b> <br/>
<script type=”text/javascript”>fill_menu(17)</script>
</div>
</div>
<div id=”footer”><a href=”#”>Coppy right © 2014 by Webtopviet.com – Học thiết kế website chuyên nghiệp</a></div>
</div>
</body>
</html>
[/sourcecode]
Coppy code vào file .html sử dụng Editor Notapad ++ để xem được chuẩn nhất !