Submit Your Article Forum Rules

Results 1 to 5 of 5

Thread: A:active CSS menu snafu

  1. #1
    Senior Member
    Join Date
    Aug 2004
    Posts
    163

    A:active CSS menu snafu

    I have had a lot of trouble with a nested menu. Everything works great except the a:active. I just can't get it to work. It is probably something simple but I can't seem to find what I have done wrong. It is a dynamic site using skins so I cannot identify each page as active in the navigation, with a currentpage tag (as far as I know).

    Here is the site: http://www.roadmapsinstitute.org/rally.php

    Here is my css for the menu:

    #navcontainer ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #navcontainer a
    {
    display: block;
    color: #FFF;
    width: 14.9em;
    padding: 3px 12px 3px 8px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    font-weight: bold;
    }
    #navcontainer a:link
    {
    color: #FFF;
    #navcontainer a:visited
    {
    color: #FFF;
    }
    #navcontainer a:hover
    {
    background-color:#FF0000;
    color: #FFF;
    }
    #navcontainer a:active
    {
    background-color:#33FFFF;
    color: #FFF;
    }
    #navcontainer li li a
    {
    display: block;
    color: #FFF;
    width: 14.9em;
    padding: 3px 3px 3px 17px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    font-weight: normal;
    }

    Here is my html:

    <div id="navcontainer">
    <ul>[*]THE INSTITUTE
    <ul>[*]Why Us? [*]The Four Supports[*]Dependency Dynamic[*]DR<sup>2</sup>IVE™ Big Picture[*]Admin Board[*]Press &amp; News[*]Membership[*]Glossary of Terms[/list]
    [/list]
    </div>


    I have looked through the forums and tried related fixes to no avail. Any help or feedback would be appreciated. Thanks!

  2. #2
    Senior Member
    Join Date
    Nov 2005
    Posts
    166
    You must have a very high speed internet connection. I have DSL, and in IE it is slow enough that the active links change and I have time to view the change, but when I tried it in FF, it switched so fast that it just flashed the darker red background for a split second.
    In other words, it works, but it only changes for the time between the user clicking and the new page beginning to load.
    CiCi

  3. #3
    Try putting your link info in this order:

    link
    active
    visited
    hover

    I find it works better when they are in this order and seem to break if they are not.
    Question Authority - Just not MINE!

  4. #4
    Senior Member
    Join Date
    Nov 2005
    Posts
    166
    I respectfully disagree with hs4u. I understand the correct order to be:
    link
    visited
    hover
    active
    which is exactly what you already have. And it DOES function, it's just not very obvious.
    Anybody out there on a dial-up connection want to take a look and confirm? You should see it much longer.
    CiCi

  5. #5

    Re: A:active CSS menu snafu

    Quote Originally Posted by jeffposaka
    It is a dynamic site using skins so I cannot identify each page as active in the navigation, with a currentpage tag (as far as I know).....
    I believe there is a difference between active link and current page.

    The active link does indeed work and would normally be used with anchors within the same page. Once you click on the link and CHANGE page then it is no longer the active link (I think that makes some sort of sense).

    I do have a solution using a php function.
    see http://www.godfreyhart.com/test/page1.php

    It does not work on my test server but it does online??


    Code:
    <?
    function nav_buttons($file,$title)
    {
    	if (substr($_SERVER['PHP_SELF'], 1)=="test/".$file)
    	{
    		$button_string="<span class='currentpage'>".$title."</span>";
    	}
    	else
    	{
    		$button_string="<a href=\"".$file."\">".$title."</a>";
    	}
    	return $button_string;
    }
    ?>
    <html>
    <head>
    <style type="text/css">
    <!--
    body {background-color: #FF9999;}
    ul{list-style-type: none;} 
    li{display: block;} 
    a{color: #fff;} 
    a:hover{color: #000;}
    .currentpage{background-color: #fff; color: #FF9999;}
    -->
    </style>
    </head>
    <body>
    <div> 
    	<ul> 
    		[*]<? $button_string=nav_buttons("page1.php","text1"); echo $button_string;?>
    		[*]<? $button_string=nav_buttons("page2.php","text2"); echo $button_string;?>
    		[*]<? $button_string=nav_buttons("page3.php","text3"); echo $button_string;?>
    		[*]<? $button_string=nav_buttons("page4.php","text4"); echo $button_string;?>
    		[*]<? $button_string=nav_buttons("page5.php","text5"); echo $button_string;?>
    	[/list]
    </div> 
    </body>
    </html>
    (Same code for each page)

    Hope this helps

Similar Threads

  1. Why my website is not active at all
    By MGadAllah in forum Marketing Strategies Discussion Forum
    Replies: 9
    Last Post: 11-16-2007, 05:01 PM
  2. Top Menu Vs Side Menu
    By Steven1976a in forum Accessibility and Usability Forum
    Replies: 20
    Last Post: 03-14-2007, 01:02 PM
  3. DHTML menu that uses images in top bar of menu
    By jeannemalherbe in forum Graphics & Design Discussion Forum
    Replies: 5
    Last Post: 11-10-2005, 12:58 PM
  4. Bill's CES SNAFU
    By mike in forum Internet Industry
    Replies: 20
    Last Post: 01-10-2005, 06:51 PM
  5. More Details of Kraft's Google AdWords Snafu
    By WPW_Feedbot in forum Search Engine Optimization Forum
    Replies: 0
    Last Post: 01-08-2005, 11:30 AM

Posting Permissions

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