|
| |
|
|
lilblackgirl
Posts: 288
Joined: 5/16/2002
From:
Status: offline
 |
Not sure if this can be done with CSS - 12/5/2003 16:37:08
I'm currently using a javascript on a few of my sites that changes the color of a table when rolled over. I use this primarily in navigation. I know that changing the look of fonts, links, etc. can be done via CSS, but can changing the color of the table be done via CSS as well (on rollover), so that it can all neatly and easily be defined in the CSS doc?
An example of what I'm talking about is here: Hospital Receivables
See how the rolover of the tables behind each nav link changes from white to yellow? Can this be done with CSS instead of having to use a javascript?
thanks,
Lil
|
|
|
|
Peppergal
Posts: 2204
Joined: 9/20/2002
Status: offline
|
RE: Not sure if this can be done with CSS - 12/5/2003 18:53:58
Yep....I did it here
http://www.suzannehimka.com
and here
http://www.design-a-website.com/lvcc/
Here is the code from the Suzanne Himka one:
This is on my external style sheet, but you could also put it in the head of your document. Just change my values for yours.
#navcontainer
{
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
font-size: 10pt;
background-color: #90bade;
color: #333;
}
#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}
#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navcontainer li a { width: auto; }
#navcontainer li a:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
This is where you want it to be in the document:
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.htm" title="Suzanne Himka Home Page ">Home</a></li>
<li><a href="services.htm" title="fitness and nutrition services ">Services</a></li>
<li><a href="articles.htm" title="articles written by Suzanne Himka">Articles & Tips</a></li>
<li><a href="aboutme.htm" title="registered dietician and nutritionist Suzanne Himka biography">Biography</a></li>
<li><a href="/forum/" title="fitness and nutrition message board">Message Board</a></li>
<li><a href="resume.htm" title="registered dietician nutritionist personal trainer Suzanne Himka resume">Resume</a></li>
<li>
<a title="items for sale on eBay" href="http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&include=0&userid=embmech&sort=8&rows=25&since=-1&rd=1">On eBay!</a></li>
<li><a href="events.htm" title="upcoming sports fitness events">Events</a></li>
<li><a href="links.htm" title="fitness nutrition links from Suzanne Himka">Fitness Links</a></li>
<li><a href="favoritelinks.htm" title="favorite personal links from Suzanne Himka">Favorites</a></li>
<li><a href="contact.htm" title="Contact information for Suzanne Himka">Contact</a></li>
</ul>
</div>
_____________________________
Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
