Add topics
facebox tweeter Emotion

 Basic CSS layout 2007-08-22 01:07:43

Để làm dc 1 layout hoàn toàn ko dùng table chỉ CSS + Div thì cũng ko có gì khó khăn lắm. Quan trọng là bạn phải biết cơ bản những thuộc tính và giá trị của thuộc tính đó có tác dụng ra sao. (các vấn đề đó thì anh TG có nhiều bài rồi)

Sau đây mình xin giải thích cách xếp 1 basic CSS layout:

http://www.q9-gaming.com/images/basiclayout.gif

Phía trên là hình mẫu 1 layout cơ bản với header, 1 sidebar, 1 content column và 1 footer.

Như vậy với layout trên bạn sẽ có 5 id trong CSS:

#container
#header
#sidebar
#content
#footer

Như vậy container là 1 div lớn thường dùng để định dạng vị trí của toàn bộ layout. (thường là giữa) và chỉ có 1 số format sau: (ví dụ thôi nhe)

margin:
padding:

Tiếp theo, làm sao để sắp xếp vị trí các "khối Div" đó theo ý mình. Rất đơn giản, bạn hãy phân layout của mình theo từng khối từ trên xuống dưới và từ trái qua phải. Với layout ví dụ, bạn sẽ chỉ cần 4 khối Div như đã nêu hoặc có thể thêm 1 Div trung gian như kiểu container cho phần sidebar + content.

Thuộc tính dùng để sắp xếp định vị các khối Div buộc phải biết và dùng đó là FLOAT. Với layout ví dụ, bạn chỉ cần float:left; cho tất cả các id. (Ko tính container)

Nếu bạn ko định width cho container và khối div đúng, những khối div trên sẽ lần lượt nằm cạnh nhau và kéo dài chiều ngang. Nếu bạn đã định width, do ko đủ width, các div đó sẽ rớt xuống và tự động nằm như hình mẫu.

Nhưng bạn ko muốn định width? (Vì web standard mà) thì bạn tiếp tục dùng thuộc tính Clear. Thuộc tính clear sẽ qui định có cái gì dc phép nằm cạnh cái div đó hay ko. Với layout ví dụ thì #Header ko cần biết width bao nhiêu, chỉ cần clear: both, thì chắc chắn #sidebar và #content sẽ phải xuống hàng dưới mà chơi. Tương tự, ko cần biết đủ width hay ko chỉ cần #content có clear:right; thì #footer buộc phải xuống dưới nằm.

Cơ bản là vậy :D với 2/3 hay 4/5/6 column gì thì cũng như nhau. Luôn nhớ, Div khác Table ở chỗ nó ko phải từ ngoài vào trong mà là từ trên xuống dưới và từ trái qua phải :D. Mọi thắc mắc sẽ dc giải đáp :D

Tra loi 16 comment(s) Spirit 2007-08-22 01:07:43

changtraingheo 2007-10-09 05:03:05

TG viết code tham khảo đi TG, ngồi nãy giờ mò hoài ko làm được layout basic đó, chán vãi

Tra loi

littleboy 2007-10-10 01:05:11

Click here

bạn vào trang web trên mà xem, mình thấy hướng dẫn rất cụ thể về css layout.

Tra loi

NữThần 2007-10-10 05:06:31

Dùng Dreamweaver có các mẫu tạo sẵn đấy.

Tra loi

TG 2008-02-18 03:03:25

Đây là 1 là 1 code HTML đơn giản, bạn tham khảo:
<!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">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PHPBASIC</title>
<style>
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

a:hover{
color: #006699;
text-decoration: underline;
}


#top{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

#left{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#right{
  float:right;
width: 20%;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
}

#content{
float: left;
  width: 55%;
}




#bottom{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
}

#bottom img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}




#left ul a:link, #left ul a:visited {display: block;}
#left ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#left li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #left li {border-bottom: none;}



#right{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}

#right p{
padding: 5px 0px 5px 0px;
}



</style>
</head>
<body>
<div id="top">Top</div>
<div id="left">
Left
</div>
<!--end navBar div -->
<div id="right">
Right  </div>
<!--end headlines -->
<div id="content">
  <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
</div>
<!--end content -->
<div id="bottom">
Bottom
</div>
<br />
</body>
</html>

Tra loi

me@ducthuan.info 2008-02-18 05:13:35

http://www.dynamicdrive.com/style/layouts/

Tra loi

gaulucky92 2008-02-22 09:55:27

Hồi trước mình thử dùng <DIV> với các thiết lập như table:

width:100%;
background:...
...

Kết quả xem trên FF2+IE7 thì OK, nhưng xem trên IE6 thì mấy cái DIV đó "lấn" nhau tùm lum... thế là đành quay lại dùng table :((

Tra loi

MasterZ 2008-03-15 08:23:55

Nguyên nhân là anh chưa rành về CSS đó thôi :D Em mới đầu cũng vậy mà !

Tra loi

Spirit 2008-03-20 11:38:33

Có nhiều nguyên nhân lấn nhau tùm lum, nhưng cách tốt nhất là nên tính width và float cho từng id/class trước khi bắt đầu code CSS :)

Nếu dùng float đúng thì có lỗi gì thì đa số là do padding,margin và width thôi ^_^

Tra loi

Đào Quang Thịnh 2008-10-10 03:09:53

Mình mới học css nên còn chưa biết nhiều, bạn giúp mình với mình có tạo layout với code như thế này mà vẫn không tài nào chỉnh được. Mong bạn chỉ giúp mình với nhé..!Cảm ơn bạn nhiều:
Code:
<html>
<head>
<title>lam thu </title>
<style type="text/css">
#wap{
padding:0px;
margin:0px;
}
#top{
width:800px;
height:150px;
padding:0px;
margin:0px;
background:#33cc99;
color:#ffffff;
}
#content{
padding:0px;
margin:0px;
width:800px;
height:600px;
background:#cccccc;
}
#left{
padding:0px;
margin:0px;
width:200px;
height:600px;
background:#ffffcc;
color:#008000;
}
#center{
padding:0px;
margin:0px;
width:300px;
height:600px;
background:#dd66cc;
float:left;
color:#ffffff;
}
#right{
padding:0px;
margin:0px;
width:200px;
height:600px;
background:#336699;
float:left;
color:#ffffff;
clear:right;
}
#footer{
padding:0px;
margin:0px;
width:800px;
height:200px;
background:#225599;
color:#ffffff;
}
#center ul li{
list-style: none;
}
#center ol li{
list-style: none;
}
</style>
</head>
<body bgcolor="white">
<div id="wap">
   <div id="top"><h1 align="center"> Phan nay nam giua van ban </h1></div>
   <div>
   <div id="content">
        <div id="left">Phan nay ben trai</div>
        <div id="center">Phan nay o giua
            <ul>
                <li><a href="http://www.c3schools.com"> Gioi thieu ve HTML</a></li>
                <li><a href="http://www.c3schools.com">Bo cuc mot tag HTML</a></li>
                <li><a href="http://www.c3schools.com"> mot so mau sac</a></li>
            </ul>
            <ol>
                <li><a href="http://www.c3schools.com"> Gioi thieu ve css</a></li>
                <li><a href="http://www.c3schools.com">Bo cuc mot tag css</a></li>
                <li><a href="http://www.c3schools.com"> mot so mau sac</a></li>
                <li><a href=#Top>Ve dau trang</a></li>

            </ol>


        </div>
        <div id="right">phan nay ben phai</div>
   </div>
   </div>
   <div id="footer">Phan nay cuoi cung</div>
</div>
</body>
</html>
  

Tra loi

Hoang Thi 2008-10-11 07:46:44

Bạn nên đặt thuộc tính float, clear cho ba id left,right,center cho thích hợp.

Tra loi

TuanBlack® 2009-04-29 05:25:05

Theo cái layout trên cùng hết thì id #container thêm thuọc tính gì để nó đẩy tất cả các div khác vào giữ màn hình nhỉ, bạn nào giúp mình được không? Thanks nhiều

Tra loi

TuanBlack® 2009-04-30 07:31:45

Đã tìm được cách giải quyết :D
#container {
margin: 0 auto;
position: relative;
}


Site dạo này vắng quá, support lâu :(

Tra loi

Phan Thế Dũng (shilva2010@gmail.com) 2009-07-23 09:03:41

Bạn có thể ném luôn đoạn code của file css định dạng layout trên được không. Như thế sẽ dễ hiểu hơn.

Tra loi

choncon 2009-07-23 04:53:59

e dũng mày học tr nào thế phải dũng bạn tao ko ?

Tra loi

tuyentc.pro@gmail.com 2009-12-16 11:16:07

sao không cho code lên luôn cho cả nhà dễ hiểu

Tra loi

bạn set margin 2010-07-26 14:51:24

@TuanBlack%C2%AE: margin-left:15px;-->đẩy container cách bên trái 15px
margin-right:15px;-->Đẩy container cách bên phải 15px vậy là nó ra giữa.

Tra loi

Y kien