WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. hannahzaman
    Member
    Posted 3 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. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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 3 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 3 years ago #

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

  5. Root
    Member
    Posted 3 years ago #

    we always style our links in the following order

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

  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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 3 years ago #

    that .current is wrecking the whole thing
    active is current

  8. hannahzaman
    Member
    Posted 3 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. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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 3 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