Help needed with style.css coding

puppiepoppy / 2009-11-21 04:48:16   

Hi folks,

I think I've gone quite a few inches forward, looking at 2 days ago I started with a zero idea on how to create a website and now I'm having a website with Expanding Menu, Mouse over features, etc.

For other newbies like me, I recommend you to check out the html guide and css guide guide from the internet for a start, as well as referring to css file of others Indexhibitors.

Back to my the topic, I hope you good folks out there can help me out. I'm modifying my STYLE.CSS file to enable highlight of web page links on mouse over. My css file is here. I've managed to make the link highlighted during mouse over, which is great! However, is there any way to avoid that same thing happening when I mouse over the clickable images on the right side? Right now, those clickable images have a yellow underbox whenever I mouse over, kinda spoil.

Thanks all. :)

Vaska A / 2009-11-21 05:56:54   

Yes. I believe we have posted the solution in the Useful Threads post. It has been posted many times before as well...a good search might turn up those results.

puppiepoppy / 2009-11-21 06:03:08   

Dear Vaska,

Can you please help me. Check on my .css file and see what I've done wrong?

The text link is highlight, which is great...but then I don't want the image (those clickable work on the right side) to have the highlighted yellow.

Can you help?

puppiepoppy / 2009-11-21 06:36:17   

Or Lemathieu, or in fact, any good folks out there...pleaseeee help. :)

zaharamh / 2009-11-22 15:50:54   
  1. You have to tell the css only to highlight the a elements you want it to. In order to do that you can use the current html elements (for example the ul list the menus are in, I don't know if that'll work because I don't know if your clickable images are inside of an ul list as well) or, if you can add a class to the ul elements you want to get highlighted:
  2. html:
  3.  < ul class="highlight"> 
  4. in the css:
  5. a.highlight:hover { property:value }
zaharamh / 2009-11-22 15:55:09   


[sorry about the previous post. something went wrong]
You have to tell the css only to highlight the a elements you want it to. In order to do that you can use the current html elements (for example the ul list the menus are in, I don't know if that'll work because I don't know if your clickable images are inside of an ul list as well) or, if you can add a class to the ul elements you want to get highlighted:
html:

  1. < ul class="highlight">
  2. in the css:
  3. a.highlight:hover { property:value }

puppiepoppy / 2009-11-23 09:42:30   

At the moment, I've modified my style.css in this way. I'm not too sure if this is correct.

a:link { color: #808080; text-decoration: none; }
a:active { color: #808080; text-decoration: none; }
a:visited { color: #808080; text-decoration: none; }
a:hover { color: #000000; background-color:#FFCC00; text-decoration: underline; }

I've put the 'hover' value as such. Is this right?

This also means my (picture) link also has highlight, but I'm trying to get rid of it. Any suggestions guys?

Thanks.

arsondpi / 2009-11-23 12:50:00   

check this

zaharamh / 2009-11-23 14:59:44   

If you change the last line to:

ul a:hover { color: #000000; background-color:#FFCC00; text-decoration: underline; }

I think it will only change the links inside of the menu, that is the unordered list (ul).

You can also change the first three lines to:

a:link,
a:active,
a:visited { color: #808080; text-decoration: none; }

It's exactly the same thing but you save space.

colour / 2010-02-02 02:48:12   

Ahhh thank you arsondpi! I have been looking for this solution for ages!
(whos knows how I didn't find it before!)
Worked a treat!

This thread has been closed, thank you.