Table cell background changing on rollover

admin · Jan 11, 2008

ok here is my problem. I have a vertical table and a few cells as my navigation and i would like my navigation cells to change to the colour #0099FF but i cant figure out how to make it change as my visitors hover over the cell. I have seen many forums say about how to make the link text change but never the cell itself instead of the text. Can anyone help me? I have put an example of my html coding below to show you what i have to change:

<style type="text/css">

</style>
</head>

<body onLoad="MM_preloadImages('Buttons/Button_Home_(B).png','Buttons/Button_About_(B).png')">
<div align="center">
<table width="750" bordercolor="#000000">
<tr bordercolor="#000000" bgcolor="#CCCCCC">
<td height="130" colspan="3"><div align="center"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Logos/Banner_Main.png" width="750" height="130"></div></td>
</tr>
<tr>
<td width="143"> </td>
<td width="50" rowspan="4"><div align="center"></div></td>
<td width="547"><div align="center"></div></td>
</tr>
<tr>
<td align="left"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Buttons/Title_Navigation.png" width="141" height="20" border="1"></td>
<td><div align="center"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Buttons/Title_NewsUpdates.png" width="550" height="20" border="1"></div></td>
</tr>
<tr>
<td height="246" align="left" valign="top" bordercolor="#999999"><table width="141" border="0" cellpadding="0" cellspacing="0" id="navigation">
<tr>
<td align="left"><div align="left"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php">Home</a></div></td>
</tr>
<tr>
<td align="left">About</td>
</tr>
<tr>
<td align="left">Staff</td>
</tr>
<tr>
<td align="left">Help</td>
</tr>
<tr>
<td align="left">Ranks</td>
</tr>
<tr>
<td align="left">Avatars</td>
</tr>
<tr>
<td align="left">Mobiles</td>
</tr>
<tr>
<td align="left">Maps</td>
</tr>
<tr>
<td align="left">Items</td>
</tr>
<tr>
<td align="left">Moon Disk </td>
</tr>
<tr>
<td align="left">Guild</td>
</tr>
<tr>
<td align="left">Gallery</td>
</tr>
<tr>
<td align="left">Fun Stuff </td>
</tr>
<tr>
<td align="left">Forum</td>
</tr>
<tr>
<td align="left">Live Help Centre </td>
</tr>
<tr>
<td align="left">Links</td>
</tr>
<tr>
<td align="left">Contact Us </td>
</tr>
<tr>
<td align="left">Legal Stuff </td>
</tr>
</table>
<p> </p> </td>
<td width="550" align="center" valign="top" bordercolor="#000000"><p align="center"> </p>
<p align="center">If you want to do this with CSS you need to move your backgrounds to the a element, then change them on hover. You'll need to make them the same size as your cells.a:link {
display:block; /* link fills it's container */
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
background:red; /* some background color */
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
}

Use lists and css for your layout!to me this is very confusing could anyone input the changes into my coding i posted earlier because i dont understand where to put that into my html

im a learning beginner with html and css.please bear in mind i just want the navigation links to change in my table not on the rest of the page

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.If you keep on writing bad HTML you'll never learn HTML.erm well thats why im asking for help derrrrrrplease bear in mind i just want the navigation links to change in my table not on the rest of the page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">

body {padding:1em}

#content {margin-left:7em}

#navigation {position:absolute; top:1em; left:1em}
#navigation ul {list-style-type:none; margin:0; padding:0}
#navigation a:link, #navigation a:visited {background:#aaa; color:#000; display:block; margin:1em 0; padding:1ex; text-decoration:none; width:5em}
#navigation a:hover, #navigation a:active {background:#000; color:#aaa; display:block; margin:1em 0; padding:1ex; text-decoration:none; width:5em}

</style>

</head>
<body>

<div id="content">
<p><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.loremipsum.org/">Lorem ipsum</a> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<div id="navigation">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"fee.html">Fee</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"fie.html">Fie</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"foe.html">Foe</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"fum.html">Fum</a></li>
</ul>
</div>
</body>
</html>thanx for the help

where do i submit that bit of the code in my html?thanx for the help

where do i submit that bit of the code in my html?You don't. You rework your HTML so that it looks like that. Get rid of the TABLE and use HTML like it was intended.ok thanx again for the help very appreciated

Table cell background changing on rollover

admin

Administrator