WordPress.org

Forums

[resolved] CSS sprite navigation not working properly. (10 posts)

  1. hannahzaman
    Member
    Posted 4 years ago #

    I just designed a new theme for my site, and am using CSS sprites for the first time. The active state is supposed to be a light grey background, hover state - pink and current state dark grey. The dark grey seems to just be sticking to the Blog link.

    It's probably a very small error in code somewhere, but I am really not a coder so it's driving me crazy.

    This is my navigation code (placed in header):

    <ul id="navigation">
    		<li id="navigation-1"><a href="http://miss-hannah.com/" title="Blog" class="current"><span>Blog</span></a></li>
    		<li id="navigation-2"><a href="http://miss-hannah.com/about" title="Girl"><span>Girl</span></a></li>
    		<li id="navigation-3"><a href="http://miss-hannah.com/gallery" title="Gallery"><span>Gallery</span></a></li>
    		<li id="navigation-4"><a href="http://miss-hannah.com/site" title="Site"><span>Site</span></a></li>
    		<li id="navigation-5"><a href="http://miss-hannah.com/links" title="Reads"><span>Reads</span></a></li>
    	</ul>

    And this is the navigation CSS (placed in theme stylesheet):

    ul#navigation {
    	width:792px; list-style:none; height:69px; margin-right: auto; margin-left: auto;
    }
    
    ul#navigation li {
    	display:inline
    }
    
    ul#navigation li a {
    	height:69px; float:left;
    }
    
    ul#navigation span {
    	display:none
    }
    
    ul#navigation li#navigation-1 a {width:152px; background:url(images/nav_2011.png) no-repeat 0px 0}
    ul#navigation li#navigation-1 a:active,
    ul#navigation li#navigation-1 a:hover {background-position:0px -69px}
    ul#navigation li#navigation-1 a.current {background-position:0px -138px}
    
    ul#navigation li#navigation-2 a {width:139px; background:url(images/nav_2011.png) no-repeat -152px 0}
    ul#navigation li#navigation-2 a:active,
    ul#navigation li#navigation-2 a:hover {background-position:-152px -69px}
    ul#navigation li#navigation-2 a.current {background-position:-152px -138px}
    
    ul#navigation li#navigation-3 a {width:201px; background:url(images/nav_2011.png) no-repeat -291px 0}
    ul#navigation li#navigation-3 a:active,
    ul#navigation li#navigation-3 a:hover {background-position:-291px -69px}
    ul#navigation li#navigation-3 a.current {background-position:-291px -138px}
    
    ul#navigation li#navigation-4 a {width:129px; background:url(images/nav_2011.png) no-repeat -492px 0}
    ul#navigation li#navigation-4 a:active,
    ul#navigation li#navigation-4 a:hover {background-position:-492px -69px}
    ul#navigation li#navigation-4 a.current {background-position:-492px -138px}
    
    ul#navigation li#navigation-5 a {width:171px; background:url(images/nav_2011.png) no-repeat -621px 0}
    ul#navigation li#navigation-5 a:active,
    ul#navigation li#navigation-5 a:hover {background-position:-621px -69px}
    ul#navigation li#navigation-5 a.current {background-position:-621px -138px}

    Any help would be greatly appreciated!

  2. it is not clear from your code, where the .current class is set.

    a link to your site would help to check this out.

    http://www.w3schools.com/css/css_link.asp

    the active state would only show very shortly anyway, while the web page changes

  3. hannahzaman
    Member
    Posted 4 years ago #

    The website link is http://miss-hannah.com.

    It's not a huge problem, just one of those little inconsistencies that really bugs me!

    I think I get what you mean though, I thought the active state would stick even though the page had loaded - sort of to highlight which page they were currently on.

  4. Connor Crosby
    Member
    Posted 4 years ago #

    Why use css sprites? Can't you just have text links there and style those?

  5. Root
    Member
    Posted 4 years ago #

    we always style our links in the following order

    a:link
    a:visited
    a:hover
    a:active

  6. it is working the way it is programmed.

    the :active state is only when the link is clicked, until the next page is loaded - it is not to be confused with the .current state.

    to get your menu working, you need to find a way to assign this .current class to the link on the current page.

  7. Root
    Member
    Posted 4 years ago #

    that .current is wrecking the whole thing
    active is current

  8. hannahzaman
    Member
    Posted 4 years ago #

    I don't use text links for the navigation because the font I wanted to use isn't a standard font (Didot I think it's called), I was really just looking for an alternative to hotspot links on images.

    Changed all the .current tags in the CSS to :active, and that has solved the problem of the "Blog" link being a different color from the others.

    But any idea how to use CSS to highlight on the navigation menu which page you're viewing at present?

  9. But any idea how to use CSS to highlight on the navigation menu which page you're viewing at present?

    you either use a generic wordpress menu function such as wp_list_pages() or wp_list_categories() (depending on your menu, but maybe not possible in your case) which outputs a current css class for the current page list item;

    or you would need to program some php with each menu item to check what page you are on and to add the .current class.

    http://codex.wordpress.org/Conditional_Tags

  10. hannahzaman
    Member
    Posted 4 years ago #

    Thank you alchymyth!

    I'm a total failure when it comes to theming (explains why I hardly ever change my blog design haha) but I found this http://www.alistapart.com/articles/keepingcurrent/ which I think is similar to what you mean by php coding for each menu item?

    I'm going to try it out when I have time, but thanks for the help!

Topic Closed

This topic has been closed to new replies.

About this Topic