PDA

View Full Version : Background colour of cell


Andromeda
09-26-2006, 08:11 PM
using css I am trying to create the effect so that when you hover over a link, the background of the cell as well as the text changes colour. See www.thesensorium.co.nz (in I.E.) for an example of what I want to achieve.

What I've managed to acheive is that the background colour and text do indeed change colour but the background colour doesn't fill the whole cell, meaning that the background colour is about 15px high rather than being the full 25px high. it's as if there's padding round the cell. See www.thesensorium.co.nz (in Firefox) for the effect similar to the one I have but don't want!!!

Here's the css I'm using...

a:link {color: #000000; text-decoration: none; font-size:10pt }
a:visited {color: #000000; text-decoration: none; font-size:10pt }
a:hover {color: #ffffff; text-decoration:none; font-size:10pt; background-color:#666633; padding:0 }
a:active {color: #000000; text-decoration: none; font-size:10pt }

I hope all this makes sense!

domedia
09-26-2006, 08:16 PM
Makes sure there's no margin or padding in the TD:
td {margin: 0 padding: 0;}

Make sure your anchor is a block container and set padding to the link if needed:
a {display: block; text-decoration: none; font-size:10pt; padding: 2px 4px; }
a:link {color: #000;}
a:visited {color: #000; }
a:hover {color: #fff; background-color:#663; }
a:active {color: #000; }

Andromeda
09-26-2006, 08:18 PM
That was an extremely quick reply! I will now go study your answer!
Thanks

domedia
09-26-2006, 08:21 PM
You might as well post your whole page, context does matter ;) and you're putting navigation links inside a table cell which might create unseen problems.

Andromeda
09-26-2006, 08:30 PM
Domedia, your suggestion has helped somewhat but not entirely yet - still working on it.

I've been asked to make changes to the web site in question but didn't design it originally and I'm finding the way some of it is written is unfamiliar to me so I'm trying to recreate the web site in a way I understand. Getting rid of the frames for example! Also, the links don't appear to work in my version of Firefox so I'll need to change that as well.

Here's the code on the index page. I'm only working on the top menu - haven't touched the rest of the code yet!
<html>


<Head>

<title>The Sensorium</title>


<link rel="stylesheet" href="css/sheet.css" type="text/css">

<style type="text/css">body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>

<script language=vbscript>

sub loadMainPage(pageName)

Dim strURL

strURL = pagename & ".html"

window.open strUrl, "main"

end sub

sub loadMouseOver(imageName)

Dim strImage

strImage = "images/" & imageName & "lightbulb.jpg"
'strImage = "images/lightbulb.jpg"

document.all(imagename).src = strImage

end sub

sub loadMouseOut(imageName)

Dim strImage

strImage = "images/" & imageName & "transparentlightbulb.jpg"
'strImage = "images/transparentlightbulb.jpg"

document.all(imagename).src = strImage

end sub

</script>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></Head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="menu" margin="0">
<tr>
<td width="506" height="96" colspan="8" valign="top" bgcolor="#8B0000"><div align="center">images/header.gifimages/scratch.gif</div></td>
</tr>
<tr>
<td height="15" align="center" valign="middle" bgcolor="#cc9900"></td>
<td width="125" height="15" align="center" valign="middle" bgcolor="#cc9900">Home (index.html)</td>
<td width="125" height="15" align="center" valign="middle" bgcolor="#cc9900">Our Profile (profile.html)</td>
<td width="125" height="15" align="center" valign="middle" bgcolor="#cc9900">Our Services (services.html)</td>
<td width="125" height="15" align="center" valign="middle" bgcolor="#cc9900">Our Process (process.html)</td>
<td width="125" height="15" align="center" valign="middle" bgcolor="#cc9900">Contact Us (contact.html)</td>
<td width="125" height="15" align="center" valign="middle" bgcolor="#cc9900">Your Feedback (feedback.html)</td>
<td height="15" align="center" valign="middle" bgcolor="#cc9900"></td>
</tr>
</table>


</p>


</p>
<table height=100% align="center" cellpadding="2" cellspacing="0" bgcolor="white">
<tr>
<td width=30% style="text-align: center">

</td>

<td></td>
<td align=center>images/processtransparentlightbulb.jpg</td>
<td align=center>images/profiletransparentlightbulb.jpg</td>
<td></td>
<td width=50></td>
</tr>
<tr>
<td valign=middle> </td>
<td align=center valign=top>images/servicestransparentlightbulb.jpg




images/contacttransparentlightbulb.jpg
</td>
<td colspan=2 align=center>images/fliptopheadwords.gif</td>
<td align=center valign=top colspan=2 width=100>images/feedbacktransparentlightbulb.jpg


"It's what you learn after you know it all that counts."



- John Wooden

Hall of Fame Basketball Coach
</td>
<td valign="bottom" width=30%></td>
</tr>
</table>

</body>
</html>

Andromeda
09-26-2006, 08:32 PM
You might as well post your whole page, context does matter ;) and you're putting navigation links inside a table cell which might create unseen problems.

Why would putting my navigation links inside a table cell cause problems??

edbr
09-27-2006, 03:12 AM
Also, the links don't appear to work in my version of Firefox so I'll need to change that as well.
I have the same problem.

domedia
09-27-2006, 12:48 PM
You might as well post your whole page, context does matter ;) and you're putting navigation links inside a table cell which might create unseen problems.

Why would putting my navigation links inside a table cell cause problems?? Because tables are notoriously buggy for layout, and it sounded like that is what you were doing. To get tables designes to work, you often have to use hacks such as spacer gifs.

domedia
09-27-2006, 12:50 PM
And looking at your code I was right ;)
Have a look at these examples which show you a regular nav menu made as lists:
http://css.maxdesign.com.au/listamatic/
(Scroll down to horizontal lists)

Andromeda
09-27-2006, 07:53 PM
I happened to mention the problem to my son who promptly took it upon himself to find a solution (when he was supposed to be doing his home work! AAAAGH)

I include his solution just for info....

<table width="100%" height=border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#CC9900"><div align="center">
<table width="750" border="0" cellspacing="0" cellpadding="0" margin="0">
<tr height="25px" class="menu">
<td width="125" align="center" valign="middle" bgcolor="#CC9900" class="menu" id="td1">Home (home.html)
</div></td>
<td width="125" align="center" valign="middle" bgcolor="#CC9900" class="menu" id="td2">Our Profile (profile.html)
</div></td>
<td width="125" align="center" valign="middle" bgcolor="#CC9900" class="menu" id="td3">Our Services (services.html)
</div></td>
<td width="125" align="center" valign="middle" bgcolor="#CC9900" class="menu" id="td4">Our Process (process.html)
</div></td>
<td width="125" align="center" valign="middle" bgcolor="#CC9900" class="menu" id="td5">Contact Us (contact.html)
</div></td>
<td width="125" align="center" valign="middle" bgcolor="#CC9900" class="menu" id="td6">Your Feedback (feedback.html)
</div></td>
</tr>
</table>
</div></td>
</tr>
</table>

It certainly works but I think I prefer your solution Domedia - it's seems much simpler - if I can get get my head around it. Wow! That page is amazing! Thanks heaps!

Sometimes this whole web design stuff seems overwhelming. The is SO MUCH I don't know! And you guys are SO helpful. (even if I don't fully understand what your saying some of the time!!!!)

:oops:

domedia
09-27-2006, 09:22 PM
What you do works, absolutely, I used pretty much the same tecnhique in 2000 :)
But... if you do it the web standards way, you could change the mouseover color in your nav, sitewide, by changing 3(!) characters in your CSS file ;)

Andromeda
09-28-2006, 05:10 AM
What you do works, absolutely, I used pretty much the same tecnhique in 2000 :)


I'm only 6 years behind the times then!!

css is definitely worth learning. It certainly makes things easier.