Need help with CSS script for hover link?

Question

Well, probably a stupid idea but a complete, and when I say complete I mean oblivious novice to CSS is trying to add a rollover, hover, whatever you want to call it affect to my site. My question is where do I place the code? I have a navigation bar, as you can see in the link to my site to the side (http://warspractice.forumotion.com/index... I have the CSS coding pulled up in my admin panel but no idea where to place the code or what to say. Ill give you what I have and hopefully some kind soul out there can help me, the more you help the more I appreciate and thank you. I have two separate images inside a photobucket account. The link to the code Im using is listed below...

MORE INFORMATION: Well, after going through each section in the CSS code (as in each {}). I have not found the correct place to put the hover information, that is, once I figure it out. Please, if you have the knowledge to help me, I would greatly appreciate it.

Answer 1

we normally keep your CSS code in separate file and refer to that file from web page.











Where CSS is a directory and style.css is a file name. If you want roll over image effect for link, you need to use the following



In web page, surround the link with

. Example,

Link Name

In CSS file,

.nav a:link

{

background: url("xxx.gif") top left no-repeat;

}

.nav a:hover

{

background: url("xxxHover.gif") top left no-repeat;

}



Note. Rule of CSS is "id" can only be used once in a sigle web page; if you want to apply more than one, use "class"

Answer 2

Ok you can put css code in the header of your page or you can have a css stylesheet and link to it.



In the head:

before your

add this





Then if you want to have a full stylesheet you simply link to it in the header, like this:



It will be a separate "file" from your index file that will list all your styles.



Then make sure you call your style inside your html, like this:

yourLink



Here's a link where I learned the basics:

http://w3schools.com/

I always learn best by looking at what other people do. So look through other people's source code. Or you could download some free css layouts and look at their code to learn. Here's a good link for that:

http://www.freecsstemplates.org/

You also, if you don't already have it, download FireFox and then add on a module called "FireBug" it will help you look at other's source code and also fix your own in real-time.



In phpBB you can paste your code into any one of the stylesheets. It's been awhile since I worked on a phpBB template. But in the admin area there is a place where you can change the template files, then there is a pull down where you can choose the css stylesheet to alter. You should alter the main template, it will depend on which "skin" you are using, but look for the "default" template. And you can add a hover property to any style by adding :hover to the end of the style name. I hope this helps!



Jen

Answer 3

Here is some sample code doing what you want.



Please note, if you are doing image rollovers using CSS background, you should create both the hover and non-hover in a single image file. That way you effectively pre-load the hover images on page load. This improves page load/hover performance by both cutting down file requests and it also results in no lagtime for loading the hovers on demand.



----------- HTML SOURCE -------------











Link









---- CSS File ---

a.special {

background:transparent url(special.png) 0 0 no-repeat;}

a.special:hover {

background-position:0 20px;}

Answer 4

u need HTML code

for anchor link

for hover link

Answer 5

Google is your friend....