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);
}

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.

"Lisa A" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
>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);
> }
>
>
>

Hi Lisa,

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

http://www.carolinawebsolutions.com/.../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/

--
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate Worksheet
--



"Lisa A" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
>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);
> }
>
>
>

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
"Kevin Spencer" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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.
>
> "Lisa A" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>>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);
>> }
>>
>>
>>
>
>

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

"P@tty Ayers" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Hi Lisa,
>
> You can do that with the CSS rule "display: block". Here's a sample:
>
> http://www.carolinawebsolutions.com/.../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/
>
> --
> Patty Ayers | www.WebDevBiz.com
> Free Articles on the Business of Web Development
> Web Design Contract, Estimate Request Form, Estimate Worksheet
> --
>
>
>
> "Lisa A" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>>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);
>> }
>>
>>
>>
>
>

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.

"Lisa A" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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
>
> "P@tty Ayers" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> Hi Lisa,
>>
>> You can do that with the CSS rule "display: block". Here's a sample:
>>
>> http://www.carolinawebsolutions.com/.../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/
>>
>> --
>> Patty Ayers | www.WebDevBiz.com
>> Free Articles on the Business of Web Development
>> Web Design Contract, Estimate Request Form, Estimate Worksheet
>> --
>>
>>
>>
>> "Lisa A" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed)...
>>>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);
>>> }
>>>
>>>
>>>
>>
>>
>
>

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


--
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate Worksheet
--


"Lisa A" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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
>
> "P@tty Ayers" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> Hi Lisa,
>>
>> You can do that with the CSS rule "display: block". Here's a sample:
>>
>> http://www.carolinawebsolutions.com/.../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/
>>
>> --
>> Patty Ayers | www.WebDevBiz.com
>> Free Articles on the Business of Web Development
>> Web Design Contract, Estimate Request Form, Estimate Worksheet
>> --
>>
>>
>>
>> "Lisa A" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed)...
>>>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);
>>> }
>>>
>>>
>>>
>>
>>
>
>

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


--
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate Worksheet
--

"Kevin Spencer" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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.
>
> "Lisa A" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> 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
>>
>> "P@tty Ayers" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed)...
>>> Hi Lisa,
>>>
>>> You can do that with the CSS rule "display: block". Here's a sample:
>>>
>>> http://www.carolinawebsolutions.com/.../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/
>>>
>>> --
>>> Patty Ayers | www.WebDevBiz.com
>>> Free Articles on the Business of Web Development
>>> Web Design Contract, Estimate Request Form, Estimate Worksheet
>>> --
>>>
>>>
>>>
>>> "Lisa A" <(E-Mail Removed)> wrote in message
>>> news:(E-Mail Removed)...
>>>>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);
>>>> }
>>>>
>>>>
>>>>
>>>
>>>
>>
>>
>
>

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


--
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate Worksheet
--


"Lisa A" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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
> "Kevin Spencer" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> 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.
>>
>> "Lisa A" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed)...
>>>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);
>>> }
>>>
>>>
>>>
>>
>>
>
>

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" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Lisa - Just note that the way I posted is probably simpler and easier
> (according to Kevin - I'm not familiar with his method).
>
>
> --
> Patty Ayers | www.WebDevBiz.com
> Free Articles on the Business of Web Development
> Web Design Contract, Estimate Request Form, Estimate Worksheet
> --
>
>
> "Lisa A" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> 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
>> "Kevin Spencer" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed)...
>>> 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.
>>>
>>> "Lisa A" <(E-Mail Removed)> wrote in message
>>> news:(E-Mail Removed)...
>>>>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);
>>>> }
>>>>
>>>>
>>>>
>>>
>>>
>>
>>
>
>