Using CSS to to make buttons
Following is the CSS code I use to give my navigation the tabbed look and feel. The html is just a list of links in my nav div. The CSS tells the browser that links in the nav div have the paramaters that make it look the way it does.
#nav a {float: left;
display: block;
margin: 0;
padding: 4px 8px;
color: #000;
text-decoration: none;/*gets rid of underline on text*/
border: 1px solid #000;
background: #71c6ff url(../images/offtab.gif) repeat-x top left;
}
This is the CSS code which allows for the tabs to change color when they are hovered over or the page is under that section of the navigation. In order for the CSS to know that a tab need to be changed for a certain page the body is diven a class of the corrisponding one in the css. The body.classname is what lets the CSS recognize it. The #idname catches the one hover ov the mouse.
#nav a:hover, body.home #home a, body.assign230 #assign230 a, body.assign235 #assign235 a, body.personal #personal a, body.demo #demo a, body.acmedemo #acmedemo a {color:£333;
padding-bottom: 5px;
border-color: #727377;
border-bottom:none;
background: #FFF url(../images/ontab.gif) repeat-x top left;
}
