Cell Background Color Change

Cell Background Color Change (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

BobbyDouglas -> Cell Background Color Change (5/13/2004 17:28:42)
How do I change the background color of a cell using an extenral CSS? Here is the current code inside the css: .side_nav2 { color: #000000; border: 1px solid #6C8593; background-color: #E7EEF1; } a.side_nav:link { color: #000000; border: 1px solid #6C8593; background-color: #E7EEF1; } a.side_nav:hover { color: #000000; border: 1px solid #6C8593; background-color: #000000; } Basically using CSS I want to be able to have a hover effect over the actual cell. Not just the background color for text, but the entire cell... Any ideas?

jaybee -> RE: Cell Background Color Change (5/13/2004 18:01:34)
HTML <td><a href="hyper.html">text text text</a></td> CSS a:link, a:visited { color: #666666; background-color: #ff9900; } a:hover { color: #ff9900; background-color: #666666; } This works for me, yours is similar, what problem are you having? [edit] on second look, you seem to be trying to do a nav bar. Try looking at the options they have in www.listamatic.com. There are loads there and you can swipe the code. It may give you an idea of what you're doing wrong. I'm just off to bed but if you're still stuck in the morning I can take another look then. PS. You're missing an a. on your first line.

BobbyDouglas -> RE: Cell Background Color Change (5/13/2004 18:53:59)
That only does TEXT background. Not CELL background. I will take a look further into that one link. It looks like there is a lot of information, unfortunately it is mainly for lists. Hopefully it will work without lists too [;)] Thanks !!!

BobbyDouglas -> RE: Cell Background Color Change (5/13/2004 19:17:18)

This is what works for me:

CSS

#side_nav_bg a
{
	display: block;
	padding: 2px;
	background-color: #68818D;
	border: 1px solid #6C8593;
}

#side_nav_bg a:link, #navlist a:visited
{
	color: #ffffff;
	text-decoration: none;
}

#side_nav_bg a:hover
{
	background-color: #3B316D;
	color: #ffffff;
}

HTML

<td id="side_nav_bg"><a href="#">Link Number 1</a></td>

jaybee -> RE: Cell Background Color Change (5/14/2004 2:33:41)
Ahhhhh yes. Oooops. Just noticed I managed not to cut and paste the display block bit. The code I use is a:link, a:visited { display: block; color: #666666; background-color: #ff9900; border-bottom: 20px #b7b7b7 solid; padding-top: 3px; padding-bottom: 3px; text-decoration: none; font-size: 3em;} Oh well, there's nothing like finding it out for yourself for making it stick, she says grovelling. [&:] What can I say.... it was gone midnight.

lilblackgirl -> RE: Cell Background Color Change (5/14/2004 12:00:48)
I posed this exact question last week and the great hairy one informed me that this just isn't possible without using a javascript. I haven't scoured the code you post above, but was i mislead by the banana eater?

c1sissy -> RE: Cell Background Color Change (5/14/2004 12:11:34)
quote: was i mislead by the banana eater? LIL I have never seen Mhaircaish mis lead anyone with any of his information.[;)]

jaybee -> RE: Cell Background Color Change (5/14/2004 12:32:35)
Are you sure it was the exact same question? The Great Hirsute one isn't given to getting things wrong.

BobbyDouglas -> RE: Cell Background Color Change (5/14/2004 14:53:30)
Well your question was about tables, mine is directed at cells. Maybe you cannot do this with tables, but it does work with cells.

Mehrdad -> RE: Cell Background Color Change (11/24/2004 2:31:29)
Hi Cell Background Color Change with using CSS : simple and useful! (see to cell2) --------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>css test</title> <style> td.normal {background-color: #ffffff;} td.over {background-color: #ff9900;} </style> </head> <body> <div align="center"> <table border="1" width="180" id="table1" dir="ltr" cellspacing="0" cellpadding="0"> <tr> <td align="center"><font face="Tahoma">cell 1</font></td> </tr> <tr> <td align="center" onmouseover="className='over'" onmouseout="className='normal'"> <font face="Tahoma">cell 2</font></td> </tr> <tr> <td align="center"><font face="Tahoma">cell 3</font></td> </tr> </table> </div> </body> </html>

Giomanach -> RE: Cell Background Color Change (11/24/2004 3:32:57)
Uses JavaScript..not fully CSS....

Page: [1]

0.078125