CSS buttons

[Lisa A]

I am making CSS buttons that change color while on hover. I want the entire
space the link is in change color, and not just the the area behind the
text.
I want to fill the whole space up.
Here is my site page and code:
http://www.horsefarmandranch.com/indexnew.htm
Here is my code:
A:link
{ text-decoration: none; background: #C46B2F; color:#000000; }
A:visited
{ text-decoration: none; color:#23306D; }
A:hover
{ text-decoration: none; background: #EFE0C0; color:#000000; }

body {
background: url(images/ostrichmainbg3.jpg);
}

 

[Kevin Spencer]

Hi Lisa,

The problem here is that the pseudo-classes only apply to links. CSS 2
specifies that the "hover" pseudo-class is not limited to links (but does
not specify what it *does* apply to), but I tested it using divs and tables
in both IE and FireFox, and it only works on links in both browsers.

So, I came up with an alternate solution for you. You start with a style
sheet that defines a class for the hover properties:

<style><!--
a:link.menu
{ text-decoration: none; background: #C46B2F; color:#000000; }
a:visited.menu
{ text-decoration: none; color:#23306D; }
..menu-hover, a:hover
{ text-decoration: none; background: #EFE0C0; color:#0000FF; }
--></style>

Note that the "link" and visited are specifically applied to links. That is
because they can only *be* applied to links. The class is not as of yet
assigned to any elements in your page. Now you add a JavaScript function to
add or remove the class from any element:

<script type="text/javascript"><!--
var curBackground, curcolor;
function setStyle(el, onOff)
{
if (onOff == true)
el.className = "menu-hover";
else
el.className = "";
}
//--></script>

This function sets the className (CSS class) to the HTML element passed to
it when "onOff" is true. Otherwise, it sets the className to blank.

All that remains is some mouse-handling:

<table border="1" cellpadding="0" width="100%" bordercolor="#000000">
<tr>
<td bgcolor="#C46B2F" onmouseover="setStyle(this, true)"
onmouseout="setStyle(this,false)"><a href="indexnew.htm">Home</a></td>
</tr>
<tr>
<td onmouseover="setStyle(this, true)"
onmouseout="setStyle(this,false)">Real Estate</td>
</tr>
</table>

Note that the cell containing "Real Estate" does not have a link in it. I
did this to demonstrate that the JavaScript is not dependent upon anything
to do with links, but is applied to the element passed to it, in this case,
a table cell.

Now, the class does specify some "link-only" style properties. But these do
not apply to the table cell. They *do* apply to any link *in* the table
cell, however.

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Numbskull

Hard work is a medication for which
there is no placebo.

 

[P@tty Ayers]

Hi Lisa,

You can do that with the CSS rule "display: block". Here's a sample:

http://www.carolinawebsolutions.com/skeletons/horiz-nav.htm

If you view the source, you can see the HTML and CSS that makes it work -
not difficult.

Here's an example of this on a real page: http://www.site-med.com/

 

[Lisa A]

Thanks,
I'm going to go over all of this you just told me and thanks for taking the
time to explain it so well.
Lisa

 

[Lisa A]

Patty,
I see how that works and notice you've also used a javascript for the links.
Is that what the previous person just posted? I didn't know that you needed
java script included.
thanks for your help.
Lisa

 

[Kevin Spencer]

Hi Lisa,

No, that's pure style sheet. The JavaScript was just to make the links act
like links. I did not thnk of Patty's solution, probably because she keeps
more in practice! I would go with her solution.

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Numbskull

Hard work is a medication for which
there is no placebo.

 

[P@tty Ayers]

As Kevin said, "javascript:;" is just a "null" (placeholder) link. I could
have used "#". Just replace those with real hyperlinks when you're ready.

 

[P@tty Ayers]

I'm supposed to be practicing? Uh oh. :-D

 

[P@tty Ayers]

Lisa - Just note that the way I posted is probably simpler and easier
(according to Kevin - I'm not familiar with his method).

 

[Kevin Spencer]

Definitely, Patty. As a programmer, I can always write a workaround. CSS, on
the other hand, is elegant and simple (except for the rules!).

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Numbskull

Hard work is a medication for which
there is no placebo.

 

[P@tty Ayers]

Well, contrariwise, as a professional numbskull, I can't write a workaround,
so I have to deal with CSS. :-D

Cheers,