...

View Full Version : Current nav item vs. Rollover nav item



begavet
02-23-2009, 01:24 PM
Hi guys,

My Predicament (http://kingh.am/index1.html)

As you can see I've managed to get the rollover nav items to hav a little green arrow appear underneath them. The problem is that I have one 'current' nav item and I was wondering what is the most effective way to get that to have a blue arrow underneath it constantly.

I wanted it so I could simply change the link's class to 'current' in the HTML page for each link and that would be it. Is that possible?

Let me know if you need any more information.

Any help is appreciated. Thanks a lot.

abduraooft
02-23-2009, 01:33 PM
I think your code is OK, but the image referred in

#nav li a.current {/*style.css (line 102)*/
background:#2C3C49 url(../img/nav-arrow-current.png) repeat scroll 0;
color:#FFFFFF;
} doesn't exist.

edit:
http://kingh.am/img/nav-arrow-current.png in FF gives

The image “http://kingh.am/img/nav-arrow-current.png” cannot be displayed, because it contains errors.

begavet
02-23-2009, 01:41 PM
That line of code was an experimental thing I tried out. I forgot to delete it (hence no image). Would that code be accurate for doing what I want to do?

Thanks for the help so far.

abduraooft
02-23-2009, 04:09 PM
I see your <span>s inside your list items with that green arrow.
So I guess, you need that arrow to be applied to that span elements, on 'current'ly selected item. Since those spans are not inside your anchors, you can't apply any style on your span, based on the current class applied on your anchor. You may either need to apply the class on the parent element <li>, Or move your span into your anchor, like

<li id="nav-home">
<a href="http://kingh.am" title="Home" class="current">home
<span></span>
</a>
</li>
and then apply a CSS like

#nav li a.current span {
background:transparent url(../img/nav-arrow-current.png) repeat scroll 0 50%;
color:#FFFFFF;
display:inline;
}

Excavator
02-23-2009, 04:24 PM
Hello begavet,
If you remove the display:none; from this (for testing only)

#nav span {
display: none;
position: absolute;
}
You can see there is a green arrow there.

We can easily have that stay if we just override the display:none;
First we need to move the class so it will work the same as your id's are:


<li class="current" id="nav-home"><a href="http://kingh.am" title="Home">home<span></span></a></li>
Then we need to both fix the button color and tell the diplayed span to come back.
Also, maybe position:abolute; isn't really needed here:




#nav li a.right{
padding-right:19px; /* check if needed */
}

#nav li a:hover{
background:#7bbe36;
}

#nav li a:hover span{
display:block;
}
#nav .current {
color:#fff;
background:#2c3c49;
}
#nav .current span {
display: block;
}
#nav span {
display: none;
margin: 0 auto;
}
#nav-home span{
background:url(../img/nav-arrow.png) no-repeat;
width: 18px;
height: 9px;
}

#nav-portfolio span{
background:url(../img/nav-arrow.png) no-repeat;
width: 18px;
height: 9px;
}

#nav-services span{
background:url(../img/nav-arrow.png) no-repeat;
width: 18px;
height: 9px;
}

#nav-contact span{
background:url(../img/nav-arrow.png) no-repeat;
width: 18px;
height: 9px;
}



Changing the color of the arrow under the button would have been a little more work. You'd have had to position a different image for each .current. Now that you aren't using position:absolute; you can just put the other image on your #nav .current span

begavet
02-24-2009, 02:39 PM
Thanks for all the help Excavator and abduraooft.

Link (http://kingh.am/index1.html)

I (think) I've done all you have suggested, but I'm getting a problem with the 'home' current arrow. It works fine on all the other links (I've used portfolio as an example), but on 'home', you can't see it, but the arrow actually floats to the top of the box for some reason.

Also, is there any way I can stop the current link rolling over green?

Again, thanks for the help, I really appreciate it. And I'm sorry if I missing something you've already told me.

Cheers!

abduraooft
02-24-2009, 02:50 PM
Now, both of your list items have class="current".
And in the first <li>, span is outside anchor, where as it's inside your anchor in your second <li>.

Since those spans are not inside your anchors, you can't apply any style on your span, based on the current class applied on your anchor. You may either need to apply the class on the parent element <li>,
Or move your span into your anchor,
Are you following both suggestion simultaneously?

begavet
02-24-2009, 03:23 PM
Yeah, sorry, I thought both suggestions were each telling me something I could use.

I've fixed the 'home' arrow problem now (can't believe I didn't notice something that obvious!)

Cheers.

Excavator
02-24-2009, 06:35 PM
Hello again bdgavet,
Have a look at what the validator says about your code - http://validator.w3.org/check?verbose=1&uri=http://kingh.am/index1.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum