Support » Themes and Templates » dynamic highlighting

  • Hi! For my theme I did dynamic highlighting so that when you are viewing a page the link will have its own class. For some reason it is not working on my website: – Im using image rollovers and for the current state I just changed the background position and it was working when I did plain old CSS and XHTML but when I put it into WordPress its not working. Here is what I have in my header and the css information:

    <div id="searchnav">
    			<div id="search">
    				<?php include (TEMPLATEPATH . '/searchform.php'); ?>
    			<ul id="nav">
                    <li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="http://localhost:8888/" class="home" title="Home">home</a></li>
                    <li<?php if ( is_page('about') ) { echo ' class="current"'; } ?>><a href="http://localhost:8888/about/" class="about" title="About">about</a></li>
                    <li<?php if ( is_page('portfolio') || is_page('websites') || is_page('motion') || is_page('video') || is_page('graphics') ) { echo ' class="current"'; } ?>><a href="http://localhost:8888/portfolio" class="portfolio" title="Portfolio">portfolio</a></li>
                    <li<?php if ( is_page('contact') ) { echo ' class="current"'; } ?>><a href="http://localhost:8888/contact" class="contact" title="Contact">contact</a></li>
    		</div> <!--end of searchnav-->
    #nav {padding:8px 50px 0 0;margin:0;list-style-type:none;float:right; }
    	#nav li {background: none;padding: 0;outline:none;float: left;border:0px solid black;}
    	#nav a {width: 99px;height: 46px;outline:none;text-indent: -900em;display: block;}
    	#nav .current {background-position:0 -100px;outline:none;border:0;}
    	#nav a:hover {background-position:0 -50px;outline:none;border:0;}
    	#nav .home {background: url(images/nav-home.gif) no-repeat;outline:none;}
    	#nav .about {background: url(images/nav-about.gif) no-repeat;margin:0 22px 0 0;outline:none;}
    	#nav .portfolio {background: url(images/nav-portfolio.gif) no-repeat;margin:0 28px 0 0;outline:none;}
    	#nav .contact {background: url(images/nav-contact.gif) no-repeat;outline:none;}

    So if someone could help me out that would be great and also if someone could tell me why there is a break in IE – for some reason the padding does not work and the center align does not work, I put margin: 0 auto; and that is suppose to center everything but in IE it doesnt do it.


Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘dynamic highlighting’ is closed to new replies.