Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Current nav item vs. Rollover nav item

    Hi guys,

    My Predicament

    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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I think your code is OK, but the image referred in
    Code:
    #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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    Code:
    <li id="nav-home">
    <a href="http://kingh.am" title="Home" class="current">home
    <span></span>
    </a>
    </li>
    and then apply a CSS like
    Code:
    #nav li a.current span {
    background:transparent url(../img/nav-arrow-current.png) repeat scroll 0 50%;
    color:#FFFFFF;
    display:inline;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello begavet,
    If you remove the display:none; from this (for testing only)
    Code:
    #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:
    Code:
    <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:
    Code:
    
    #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
    Last edited by Excavator; 02-23-2009 at 04:31 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    begavet (02-24-2009)

  • #6
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for all the help Excavator and abduraooft.

    Link

    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!

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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>.
    Quote Originally Posted by me
    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?
    Last edited by abduraooft; 02-24-2009 at 03:30 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello again bdgavet,
    Have a look at what the validator says about your code - http://validator.w3.org/check?verbos...am/index1.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •