I was hoping someone would help me with making the backround of my links light up...
http://www.template1.anthonyfurino.com
If you look at the links at the top (Home, About, Web Design, Tutoring, etc.) the backround of the links is the color blue. Is that the right term for it? The backround?
Anyway, when someone puts their mouse pointer over the link, I want it to light up GREEN instead of staying blue.
How can I do that?
ALSO, are there any free services out there that offer free links like that (HTML)?
You should have picked an easier template to work with. You have chopped out most of the fancy things, but the rest is still a mess to work with. To make any real modifications, you need to get real smart on CSS, real quick.
It is possible to make the background for the navigation images change color, but there are several things that need to be modified.
The CSS definitions have a image assigned to the first navigation link. It's just a darker image than the others, to distinguish it from the others. It's intended to highlight the current page. However, on your web site, the image (images/navBgHover.gif) doesn't exist where it is suppose to, so your template only shows the color from the CSS definition. But that's OK. If you continue to use that feature, you would need to modify the current page reference uniquely for each page. It's usually more trouble than it's worth.
So you start by making all the nav link backgrounds the same color. It's difficult to see but the home link is slightly lighter in color than the other links. This is caused by the "class" setting in the "li" structure. To make it the same color, do the following:
Then add the following CSS definition to your CSS file to switch the color. You will see a similar definition already in the CSS file. The definitions will look like the following code. I selected a bright green (#00ff00) but you can change that to whatever you like.
Code:
#pageNavTop ul li.selected,#pageNavTop ul li.selectedChild{background:#206494 url("images/navBgHover.gif") repeat-x top left}
#pageNavTop ul li:hover{background:#00ff00 repeat-x top left}
Finally, you need to add a CSS definition to change the font color of the link. The original definition may not be very visible when you change the background. Again, a CSS definition already exists to add a underline to the link. All you need to do now is modify the color during the hover and focus. Again, I set the color to black (#000000) but you can change it to your own color choice.
Code:
Change:
#pageNavTop ul li a:hover,#pageNavTop ul li a:active,#pageNavTop ul li a:focus{text-decoration:underline}
To:
#pageNavTop ul li a:hover,#pageNavTop ul li a:active,#pageNavTop ul li a:focus{color: #000000; text-decoration:underline}
This is difficult to understand, because the template is so complex. If you have trouble making it work, let me know and I will put a zip file on the network that shows the changes.
Anthony
ALSO, are there any free services out there that offer free links like that (HTML)?
For this question, I'm not sure what you asking for.
For this question, I'm not sure what you asking for.
I imagine that Anthony is thinking about scripts based on the event.
The answer to that is yes, there are lots and Google will find them but that is going in a totally different direction and I am not sure how they would integrate with the css, I have only used them in conjunction with "classic" html.
Trying to hammer a template into a different shape is not a task for the faint hearted and for most people simply finding a different template would be the best option, or, of course, building your own design from scratch.
