Wednesday, March 21, 2007

Power of CSS 2

#nav {
float: left;
width: 100%;
margin: 0;
padding: 10px 0 0 46px;
list-style: none;
background: #FFCB2D;
}
#nav li {
float: left;
margin: 0;
padding: 0;
font-family: "Lucida Grande", sans-serif;
font-size: 55%;
}
#nav a {
float: left;
display: block;
margin: 0 1px 0 0;
padding: 4px 8px;
color: #333;
text-decoration: none;
border: 1px solid #9B8748;
border-bottom: none;
}

This is a good example of combining usage of background and padding in "Bulletproof
Design". The author's method have avoided using big pictures, which will enhance the
page's scalability and flexibility.