Forum Moderators: not2easy
.navCellOff
{
BACKGROUND-COLOR: #colour;
}
.navCellOn
{
BACKGROUND-COLOR: #colour;
}
That part is pretty self explanatory...
Then, what ever cell you want to light up, add the code inside the coding for it. Here is the code to add to your cells.
class="navCellOff" onmouseout="this.className='navCellOff';" onmouseover="this.className='navCellOn';"
You should add it like this - incase you were wondering.
<td width="100%" class="navCellOff" onmouseout="this.className='navCellOff';" onmouseover="this.className='navCellOn';" bgcolor="#000000" bordercolorlight="#990000" bordercolordark="#990000">Hope I have helped.
Set the <a> tags to be the same width and height as the cell they occupy, and then set the a:link and a:hover styles to different colors in your CSS.
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
table {border-collapse:collapse;}
td {border:1px solid #000;width:30px;height:30px;text-align:center;padding:0;}
a {width:100%;height:100%;}
a:hover {background-color:#00ff00;}
</style>
</head>
<body>
<table>
<tr>
<td>
<a href="#">1</a>
</td>
<td>
<a href="#">2</a>
</td>
<td>
<a href="#">3</a>
</td>
<td>
<a href="#">4</a>
</td>
<td>
<a href="#">5</a>
</td>
</tr>
</table>
</body>
</html>
Or you can go one step further and not use a table at all, and use an unordered list of links instead, but that might not work for your particular page. It might look something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><style>
#nav ul {
list-style-type:none;
margin:0;
}
#nav ul li {
float:left;
}
#nav a {
text-decoration:none;
padding:.5em;
background: #0f0;
color:#000;
}
#nav a:hover {
background: #f00;
color:#fff;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</body>
</html>
add
display:block;
