Thiết kế layout website nằm nang

Thông thường các website được thiết kế theo phương thằng đứng, có chiều dài(width) cố định và chiều cao(height) thay đổi, giống như sau :

Cấu trúc layout của một website nằm ngang có một chút khác biệt với chiều cao cố định và chiều dài thay đổi :

Làm thế nào để làm điều đó? rất đơn giản bạn hãy tạo ra một container layer giống như thế này :

<div id="container">...</div>

Trong CSS ta xác định style như sau :

#container{

width:3000px;
height:400px;

}

Bây giờ với layer #container hãy tạo một vài chỗ để thêm nội dung, Ví dụ bạn có thể dùng <ul> để thêm nội dung như hình:

 Mã HTML :

<div id="container">
<ul id="maincontent">

<li >Box 1</li>
<li >Box 2</li>
<li >Box 3</li>
<li >Box 4</li>
<li >Box ...</li>

</ul>
</div>

Mã CSS :

#maincontent{

border:0;
margin:0;
padding:0;

}
#maincontent li{line-style:none;
width:240px;
height:380px;
padding:10px;
float:left;
}

Thêm hình nền(background) với vị trí cố định trong CSS :

body{

background:url(mybg.jpg) no-repeat fixed;

}

                                                                                                                                      nguyenloi