#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    6
    Rep Power
    0

    Question CSS menu active link does not work


    Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css.

    I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link.

    but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions.

    PHP code:
    Code:
    <?php
    
    $block = ( is_front_page() ? 'h1' : 'div' );
    
    // arguments for wp_list_pages
    $list_args = k2_get_page_list_args(); // this function is pluggable
    
    ?>
    
    <?php echo "<$block class='blog-title'>"; ?>
    	<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
    <?php echo "</$block>"; ?>
    
    <p class="description"><?php bloginfo('description'); ?>
    
    
    <ul id="menu">
       <li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
    		 <li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
             <li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
             <li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>
    CSS code:
    Code:
    #menu {
         list-style: none;
         padding: 0;
         margin: -105px 25px;
         width: 332px;
         height: 30px;
         background: url('images/menu.gif');
         position: relative;
    }
    
    	ul#menu li { width: 80px;
    	            height: 30px;
    				padding: 0 4px 0 0;
    				text-indent: -900px;
    				float: left;
    				}
    
    	ul#menu li.last { padding: 0; }
    
    		ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
    
    			ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; }	
    
    			ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; }
    
    			ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; }
    
    			ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; }
    
    				ul#menu li#home a:hover { background-position: 0 -30px; }
    
    				ul#menu li#archives a:hover { background-position: -84px -30px; }
    
    				ul#menu li#news a:hover { background-position: -168px -30px; }
    
    				ul#menu li#contact a:hover { background-position: -252px -30px; }
    
    			.home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; }
    
    			.archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; }
    
    			.news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; }
    
    			.contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; }
    i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem.

    thank you for any single suggestions and comments.
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1227
    You don't have any style for the class active in the css.
    If you haven't defined any style for it, it wouldn't show up.

    There isn't any style for the active pseudo-class either if it that you refer to.

    Cannot see any trace of the classes: .home, .archives, .news and .contact in the html.

    http://www.w3.org/TR/CSS21/selector....lass-selectors
    http://www.w3.org/QA/Tips/goodclassnames
    http://meyerweb.com/eric/css/link-specificity.html
    Last edited by Akh; May 14th, 2009 at 07:36 AM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    6
    Rep Power
    0
    thank you but i m a beginner and trying to change an example code from a website to suit it in my own design.

    could you please explain in detail or replace the code with what you think it should be? do you mean the problem is the last 4 lines of the CSS code. and how i should change it?

    Im sorry if im giving you a headache but i ve been trying to solve this problem for a week now and really feeling desperate.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    6
    Rep Power
    0
    you can also look at what the menu looks like here - it consists of three layers and 4 sections.

    menu.gif
    img26.imageshack.us/img26/1268/menux.gif
  8. #5
  9. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1227
    My point is that you show too little code for us to tell whether or not the css would work or not.

    For the last four lines of your css to work, it need some parent element with one of the class .home, .archives, .news or .contact

    At the same time your php shows that you add a class for the current page on the menu items:
    (I fixed an error on the last line.)

    Code:
    <li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
    <li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
    <li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
    <li id="contact" class="last"><a href="?page_id=31" <?php if(is_page('contact')) echo ' class="active"'; ?>>contact</a></li>
    You could change your css to work with this.
    Code:
    ul#menu li#home a.active,
    ul#menu li#home a.active:visited,
    ul#menu li#home a.active:hover {
      background-position: 0 -60px;
      cursor: default; 
    }
    Last edited by Akh; May 14th, 2009 at 11:18 AM.
  10. #6
  11. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2183
    Could you give us the output from the browser? Shuffling through PHP code takes too much time.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    6
    Rep Power
    0

    Unhappy


    hello again thank you for your help.

    I'm trying but still couldn't make it work. I'm working on local host yet and do not have any host to upload it .

    but i was exactly trying to make a menu like the one on pearsonified.com (the main menu at the top which jumps up when you are over the links).
    ----------------------------------------------------

    I was using wordpress K2 theme and building this menu instead of its own menu.

    So what Ive done so far is changed the k2-header.php in blocks folder. and put my own div="menu"

    i also changed the #menu bit in the style sheet too and i ve given what ive changed above.

    __________________________________________

    if anyone else is using wordpress, i can send my theme folder via e-mail and they can activate or preview and have a look the theme. but all i edited in the theme folder is k2-header.php and the menu section of the style.css sheet which are below.

    __________________________________________

    k2-header.php


    Code:
    <?php
    
    $block = ( is_front_page() ? 'h1' : 'div' );
    
    // arguments for wp_list_pages
    $list_args = k2_get_page_list_args(); // this function is pluggable
    
    ?>
    
    <?php echo "<$block class='blog-title'>"; ?>
    	<a href="<?php echo get_option(''); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
    <?php echo "</$block>"; ?>
    
    <p class="description"><?php bloginfo('description'); ?></p>
    
    <ul id="nav">
       <li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
    		 <li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
             <li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
             <li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>
    
    		</ul><!-- .menu -->
    and the style.css file

    Code:
    #nav {
         list-style: none;
         padding: 0;
         margin: -105px 25px;
         width: 332px;
         height: 30px;
         background: url('images/menu.gif');
         position: relative;
    }
    
    	ul#nav li { width: 80px; 
    	            height: 30px; 
    				padding: 0 4px 0 0; 
    				text-indent: -900px; 
    				float: left; 
    				}
    	
    	ul#nav li.last { padding: 0; }
    	
    		ul#nav li a, ul#nav li a:visited, ul#nav li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
    			
    			ul#nav li#home a, ul#nav li#home a:visited { background-position: 0 0; }	
    			
    			ul#nav li#archives a, ul#nav li#archives a:visited { background-position: -84px 0; }
    			
    			ul#nav li#news a, ul#nav li#news a:visited { background-position: -168px 0; }
    			
    			ul#nav li#contact a, ul#nav li#contact a:visited { background-position: -252px 0; }
    		
    				ul#nav li#home a:hover { background-position: 0 -30px; }
    				
    				ul#nav li#archives a:hover { background-position: -84px -30px; }
    				
    				ul#nav li#news a:hover { background-position: -168px -30px; }
    				
    				ul#nav li#contact a:hover { background-position: -252px -30px; }
    				
    			.home ul#nav li#home a, .home ul#nav li#home a:active, .home ul#nav li#home a:hover { background-position: 0 -60px; cursor: default; }
    			
    			.archives ul#nav li#archives a, .archives ul#nav li#archives a:active, .archives ul#nav li#archives a:hover { background-position: -84px -60px; cursor: default; }
    			
    			.news ul#nav li#news a, .news ul#nav li#news a:active, .news ul#nav li#news a:hover { background-position: -168px -60px; cursor: default; }
    			
    			.contact ul#nav li#contact a, .contact ul#nav li#contact a:active, .contact ul#nav li#contact a:hover { background-position: -252px -60px; cursor: default; }

    sorry i guess this is the output

    Code:
    <div id="header">
    
    		
    <h1 class='blog-title'>	<a href="/" accesskey="1"></a>
    </h1>
    <p class="description"></p>
    
    <ul id="nav">
       <li id="home"><a href="" class="active">home</a></li>
    		 <li id="archives"><a href="?page_id=2">archives</a></li>
             <li id="news"><a href="?page_id=35">news</a></li>
             <li id="contact" class="last"><a href="?page_id=31">contact</a></li>
    
    		</ul><!-- .menu -->
    
    		
    	</div> <!-- #header -->
    inow changed id="nav" instead of id="menu".
    so what i have at the moment is all you can find above
    i also tried your suggestion but when i did it the menu didnt work=/.

    thanks very much for your help

IMN logo majestic logo threadwatch logo seochat tools logo