Forum Moderators: open
I've got a 3 x 3 table (ie, 3 rows and 3 columns). Inside each cell I have a standard link to another page, for example:
<td><a href="../page/">Page</a></td>
I would like each cell in the table to be 100px wide and 100px high, with the text link ("Page") horozontally and vertically aligned in the middle of the cell.
Each cell has a plain background colour. I would like this background colour to change when the mouse hovers over the cell.
So far using the following CSS I've been able to make the background colour immediately behind the text change, but it doesn't change the background of the entire cell. This is the link coding I've used so far:
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
display: block;
}
a:visited {
color: #FEFEFE;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
display: block;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
display: block;
}
Can anyone please advise how to modify my coding so that the entire background colour of the cell changes in the "hover" state?
I'm new to this and not very advanced with CSS. Am using Dreamweaver 8.
PS: Using the "height" attribute in CSS I can make the cells 100px high, but the text vertically aligns to the top, instead of the middle. Even if I specify middle alignment.
Thanks!
i would try putting the entire cell within the anchor tags:
<a href="../page/"><td>Page</td></a>
But your thinking is in the right direction - you need a hover behavior for the entire cell, not just the anchor text. Unfortunately IE did not support hover behaviors on anything but links before IE7. To get this behavior cross-browser and valid, you need to use javascript, as far as I know.
display:block;Where this plan falls down is if the link text exceeds one line or if the number of lines vary between each cell. For what it's worth, here's an example of how it's done:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title></title>
<style type="text/css">
body {
background:black;
}
td {
height:100px;
width:100px;
border:1px solid red;
text-align:center;
}
a {
color: #FFFFFF;
display: block;
font-size:10px;
line-height:1;
padding-top:45px;
padding-bottom:45px;
}
a:hover {
color: #000000;
background-color: #FFFFFF;
display: block;
}
</style>
</head>
<body>
<table>
<tr>
<td><a href="#">text</a></td>
<td><a href="#">text</a></td>
<td><a href="#">text</a></td>
</tr>
<tr>
<td><a href="#">text</a></td>
<td><a href="#">text</a></td>
<td><a href="#">text</a></td>
</tr>
<tr>
<td><a href="#">text</a></td>
<td><a href="#">text</a></td>
<td><a href="#">text</a></td>
</tr>
</table>
</body>
</html>The other option, as tedster suggests, it to apply the style via Javascript, similar to this:
<table width="80%" border="1">
<tr>
<td width="50%" onmouseover="this.style.backgroundColor='#ffcc99';" onmouseout="this.style.backgroundColor='#ffffff';" onclick="location.href='page.html';" style="cursor:pointer;">text</td>
<td width="50%" onmouseover="this.style.backgroundColor='#eff7ff';" onmouseout="this.style.backgroundColor='#ffffff';" onclick="location.href='page.html';" style="cursor:pointer;">text</td>
</tr>
</table>The Javascript is messy to say the least, but it's workable, and it's a better option than resorting to invalid HTML which would have unpredictable results over the long-term.
