left menu and basic layout

basiclayout.css

@charset "UTF-8";


/*CSS document  - Charset kia giúp hiển thị tiếng Việt trong CSS*/

*{
margin: 0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 780px; /* giả sử hiển thị trên trên màn hình 800x600, mình giảm 20px*/
margin: auto; /* để hiển thị ở giữa ===> nội dung nó sẽ căn ở giữa*/
margin-top: 1px;
border: 1px solid #186700;
}

#top{
background: #0099FF;
color: #FFFFFF;
height: 60px;/*chiều cao của chữ*/
text-align: center;
line-height: 60px /*nếu line-height có cùng chiều cao thì vì có 1 dòng nên nó sẽ cân giữa cho chữ*/
font-weight: bold;

}
#bottom{
clear: left;/* để tránh chèn lên khối div info ở trên*/
color: red;
background-color: black;
text-align: center;
height: 40px;
line-height: 40x /*mẹo tạo cân chữ theo chiều trên xuống*/
font-weight:bold;

}
#left{
float:left;/* vì khối div left + infor + right được bao trong khối div body có độ rộng width là 780 nên chia 3 ra và để nó trôi trái*/
width: 150px;
}
#info{
float: left;
width: 478px; /*vì border đã chiếm mất 2 px nên mình giảm còn 478px*/
border-left: 1px solid #FF6600;
}

#right{
float:left;
width: 150px;
border-left: 1px solid #FF6600;
}
#info .news  /* info là id của div cha, news là class con*/
{
    padding: 10px; /*khoảng cách từ đường viền tới chữ (đối tượng)*/
    text-align: justify;

}

.news h1{
font-size: 14px;
margin-bottom:5px;
}

.news img {
border :1px solid blue;
padding: 2px;
margin: 0px 5px 5px 0px;

}

.cls {
clear: left;
border-bottom: 1px solid #CCCCCC;

}


/* demo left menu */

#left h1 {
background: #99CC99;
font-size: 14px;
font-weight:bold;
text-align: center;
color: white;
}

#left ul {
list-style: none; /* /bỏ dấu chấm*/
padding: 0px; /* canh sát lề*/
margin: 0px;
}

#left ul a{
text-decoration: none;
color: black;
background: #EEEEEE url(arrow.gif) no-repeat 11px 7px ; /*tạo màu nền bằng hình ảnh, no-repeat: hình ảnh sẽ không lặp = chia đôi trừ đi 1.5 px độ rộng và 1.2px của tấm hình*/
display: block; /* tô màu hết chiều ngang*/
width: 125px;
line-height: 18px;
padding-left: 25px; /*gia tăng độ rộng của div*/
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #CCCCCC;/*dùng 2 màu ngược nhau giữa border =bottom và top để đối màu để làm tạo một để tạo sự tương phanr*/
}

#left ul a:hover {
background:#99CC99 url(arrow.gif) no-repeat 11px 7px ;


}


#menu ul {
/*bỏ dấu chấm trong list*/
list-style: none;

/*hai thuộc tính sau sẽ canh xát lề*/
padding: 0px;
margin: 0px;
}

#menu ul li {

display:inline; /*đẩy lên hàng ngang*/
}

#menu ul a {
/*bỏ gạch đường viền dưới*/
text-decoration: none;
/*độ rộng toàn cục của thẻ body 780 chia 6 nhưng chưa rãn ra, chưa có tham số đi kèm*/
width:129px;/* 780/6*/
/*float left làm cho dữ liệu nổi lên*/
float: left;
/*màu nền*/
background: #ff9999;
text-align: center;
/*khoảng cách giữa 2 dòng bằng line-height*/
line-height:18px;
font-weight: bold;
color: white;
/*tạo gạch xọc ==> phải giảm độ rộng xuống còn 129px vì border chiếm 1px*/
border-left:1px solid white;

}

#menu ul a:hover {
background:#FFCCCC;

}
/*demo form css*/
label{
width:120px;
float:left;
padding-left:25px;
font-weight:bold;
}

input, select, textarea{
border:1px solid #99CC33;
margin-bottom:3px;
}

.button{
background:#99CC00;
color:#FFFFFF;
font-weight:bold;
}

legend{
font-weight:bold;
color:#99CC33;
}

fieldset{
border:1px solid #99CC00;
margin:5px;
}