Hi guys

 

I'm in the middle of making a website, and I have just created a navigation bar using CSS rollover techniques and images (Well, one image to be exact, I then use "co-ordinates" to dictate which part of the image to display on the rollover).

 

Its all working fine, but when I "click" on a navigation item, a red highlight/select bar appears around the item I am clicking on, and this continues over to the left. It dissappears as soon as I release the click.

 

It seems like such a small problem, but on a website with a black background its really noticeable, and when I click on the link furthest to the right, "Contact", it just looks really garish as it surrounds the whole of the navigation menu.

 

The funny thing is, I tried the site on IE 8 and there wasn't a problem; the red highlight did appear, but ONLY around the currently clicked navigation item, and this to me is not a problem. On firefox and IE7 (the only other 2 I have tried the site on) I get this weird effect. Please see the image below to see what I mean - in the image I am "hovering" over "gallery".

Here is a copy of the actual navigation bar image I am using to pull the "standard" and "hover" positions from.

 

Cheers,

 

Kyle

Judging from that screenshot, I'm guessing you've hidden the text on the nav items using CSS, and when clicking an item you're shown the outline of the link which is stretching out to the left to go around the hidden text.

 

Try adding this in your CSS (replace the selector to work with your nav link items):

#nav a {overflow:hidden;}

Have you got a link?

 

It could be you need to add this to your CSS: img {border:none;}

 

If you havnt got a link, post your css.

Cheers for the input guys.

 

Judging from that screenshot, I'm guessing you've hidden the text on the nav items using CSS, and when clicking an item you're shown the outline of the link which is stretching out to the left to go around the hidden text.

 

Try adding this in your CSS (replace the selector to work with your nav link items):

#nav a {overflow:hidden;}

 

I just added that and it fixed it, cheers dude! Pretty obvious in hindsight but I'd be buggered if I could work it out :-P

 

I do have another navigation bar related issue - if anyone would be able to offer some advice with this. Heres a selection of the CSS first:

 

----------

 

#navbar #home {

background-position: 0 0;

width: 105px;

}

 

#navbar #home:hover {

background-position: 0 -40px;

}

 

#navbar #about{

background-position: -110px 0;

width: 110px;

}

 

#navbar #about:hover {

background-position: -110px -40px;

}

 

----------

 

I've obviously repeated this pattern for each of the navigation items, but have only shown an excerpt for demonstration purposes!

 

I want it so that the "hover" effect stays active when you are on that particular page, as a "you are here". I have tried replacing "about:hover" with "about:active" but it has the same "hover" effect, dissappearing as soon as I remove the mouse cursor.

 

Any input on this guys?

 

Again, thanks so much for any help,

 

Kyle

Glad that helped. How is your navigation generated - PHP, HTML or something else?

 

Basically what you need is to add a class to the current item such as

<li><a class="active">About</a></li>

And then do this in your CSS:

#navbar #about:hover,
#navbar #about.active {background-position: -110px -40px;}

Notice the ., not a : for the active state because we're using a classname, not a pseudo selector. The "active" pseudo class is actually the pressed down state - so that style is applied whilst the user has their mouse down on the link

 

That way the style is applied to the hover state, and to the link if it has the active class.

There are several options for highlighting the current page link here:-

http://www.wickham43.net/highlighthome.php

Cheers for the quick input again guys.

 

Glad that helped. How is your navigation generated - PHP, HTML or something else?

 

Basically what you need is to add a class to the current item such as

<li><a class="active">About</a></li>

And then do this in your CSS:

#navbar #about:hover,
#navbar #about.active {background-position: -110px -40px;}

Notice the ., not a : for the active state because we're using a classname, not a pseudo selector. The "active" pseudo class is actually the pressed down state - so that style is applied whilst the user has their mouse down on the link

 

That way the style is applied to the hover state, and to the link if it has the active class.

 

Awesome, its working now. Cheers dude! I'm getting there slowly!... haha