CSS - Active Link Not Active

Hi everyone,

I have a menu whereby when it's active it is highlighted by two combining images. Whenever the active link is hovered over the image disappears.

I'd like for the image(s) to stay put when it's active and the cursor hovers over it. This particular .css file is above my pay grade and I'm not confident I can do this and have it look good across all browsers.

Just click on the header links and hover over it to see what I'm talking about. Thanks for any input, here's the site...

spotabusiness dot com/new_spota1

(I apparently can't add URLs yet)

Thanks for taking the time to read my question.

It's been a while since I last tried making a page.

I've got some images as href's and want to show a border around them on the hover. It's not working, they're just showing up as purple (default visited). This makes some sense as the links are just bookmarks on the same page. But in my css I have
link, visited, and active all the same color. Only hover is different, and none of them are purple.

I've read this http://www.w3schools.com/css/css_pseudo_classes.asp and I think I've got it, but it's not working.

HTML
Code:

<a class"NavButtons" href="AssetDataDBHelpFile.htm#AssetForm"><img src="Computer.jpg" width="133" height="84" alt="Asset Management Form"></a>
<a class"NavButtons" href="AssetDataDBHelpFile.htm#PeripheralForm"><img src="Peripheralbutton.jpg" width="133" height="84" alt="Peripherals Management Form"></a>
<a class"NavButtons" href="AssetDataDBHelpFile.htm#ReportCenter"><img src="Report.jpg" width="133" height="84" alt="Report Center Form"></a>

CSS
Code:

a.NavButtons:link {
border-color: green;
border-width: 2px;	  
border-style: solid;
}     /* unvisited link */

a.NavButtons:visited {
border-color: green;
border-width: 2px;	  
border-style: solid;
}  /* visited link */

a.NavButtons:hover {
border-color: Red;
border-width: 2px;	  
border-style: solid;
}   /* mouse over link */

a.NavButtons:active {
border-color: green;
border-width: 2px;	  
border-style: solid;
}   /* selected link */

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.

I am trying to create a horizontal navigation bar.

Everything is exactly how I want it except the a:link, a:visted, a:hover, a:active are the standard default colors and not what I specified. Even the background color changes - just not the font color.

Here is the css code: Code:

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFF;
	font-size: 14px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	text-decoration: none;
	color: #FFFFF;
	font-size: 14px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #50949;
	font-size: 14px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	padding: 0;
	padding-top: 2px;
	margin: 0;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}
 

Here is the html code: Code:

  <div id="topbar">
  	<ul class="horiz">
		<li><a href="/home.html">Home</a></li>
		<li><a href="/about_us/about_us.html">About Us</a></li>
		<li><a href="/other_regions.html">Other Regions</a></li>
   	</ul>
  </div>

or if it helps to see the whole thing click here for test.html
click here for the css

Thanks!

Hi,
I have created my website but I'm having problems with the a:active link in my CSS. When I go to my site I would like the currently viewed pages link to be blanked out and unclickable, (until I view a different page.) I have tried to change the a:active part of my CSS but to no avail. The only part that seems to work in the CSS is the a:hover part, all the others seem to be ignored.

Still relating to the question above, I have made the links width 229px. This seems to display fine with IE6, however NS7 compresses the layers background to the size of the text. How do I avoid this? I have tried adding an absolute position style to the layer in CSS, but I then lose the 'fluidity' of the website when the browser is resized.

I have pasted my CSS below:

#waita, #waitb {
text-decoration:none;
color:#FFFFC0;
border-style:solid;
border-color: #000000;
border-width:2px;
background-color:#000000;
layer-background-color:#000000;
font:bold;
font-weight:bold;
font-family:arial;
font-size:14px;
height:22px;
width:230px;
z-index: 100;
margin: 5;
}

.image
{
border-width: 2;
border-color: #000000;
border-style: solid;
margin: 10;
}

.class1 a:link
{
text-decoration:none;
color:#000000;
border-style:solid;
border-color: #000000;
border-width:2px;
background-color:#FFFFC0;
layer-background-color:#FFFFC0;
font:none;
font-weight:none;
font-family:arial;
font-size:14px;
line-height:18px;
width: 229px;
z-index: 20;
margin: 5;
}

.class1 a:active
{
text-decoration:none;
color:#000000;
border-style:solid;
border-color: #000000;
border-width:2px;
background-color:#FFFFC0;
layer-background-color:#FFFFC0;
font:none;
font-weight:none;
font-family:arial;
font-size:14px;
line-height:18px;
width: 229px;
z-index: 20;
margin: 5;
}

.class1 a:visited
{
text-decoration:none;
color:#000000;
border-style:solid;
border-color: #000000;
border-width:2px;
background-color:#FFFFC0;
layer-background-color:#FFFFC0;
font:none;
font-weight:none;
font-family:arial;
font-size:14px;
line-height:18px;
width: 229px;
z-index: 20;
margin: 5;
}

.class1 a:hover
{
text-decoration:none;
color:#FFFFC0;
border-style:solid;
border-color: #000000;
border-width:2px;
background-color:#000000;
layer-background-color:#000000;
font:bold;
font-weight:bold;
font-family:arial;
font-size:14px;
line-height:18px;
width: 229px;
z-index: 20;
margin: 5;
}

I have tried to change the two line in the a:active part: {background-color:#FFFFC0; layer-background-color:#FFFFC0;} but it seems to do nothing.

Cheers, Andy

I have menu that uses its own CSS and I am having some problems with the a:active. I have accomplished changing the font color but have been unable to change the background color of the cell. See the code below....
Any help is greatly appreciated!
By the way, the active link has to be used as a div. I am using a specialized menu with specific requirements :S
The background command below only colors the background of the text but in the OVER css, it colors the background of the CELL....

Code:

 #dm_t-active_link {
                font-weight: 900;
	color: gold;
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
                padding: 0px;
	background-color: #440000;
                width:125px;
	border : 0px solid black;
}
.dm_t-0_over {
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 4px;
	color: #BC8D31;
	background-color: #550000;
	border : 1px solid black;
	height: 16px;
                cursor: hand;
}

I have a navigation bar similar to the one on this site. I want whatever current button that is clicked on to be a different color just like the site I linked.

I thought this was done using the a:active tag but it doesn't seem to be working. It quickly changes back to whatever the default a tag specifies.

Is there a trick to this?

Thanks in advance.

Hi,

I can't make my active tab look 'active' in my navigation. I have the following css:
Code:

#tab_menu {
	width: 200px;
	margin-top: 10px;
	}
	
#tab_menu li a {
  	height: 24px;
	text-decoration: none;
	color: #484848;
	display: block;
	background:  url(../images/tab_menu.gif);
	background-repeat: no-repeat;
	padding: 8px 0 0 10px;
	}
	
#tab_menu li a:hover {
	color: #55880a;
	background:  url(../images/tab_menu.gif) 0 -32px;
	background-repeat: no-repeat;
	padding: 8px 0 0 10px;
	}
	
.active {
	color: #55880a;
	background:  url(../images/tab_menu.gif) 0 -32px;
	background-repeat: no-repeat;
	padding: 8px 0 0 10px;
}

with the following html:

Code:

<div id="tab_menu">
    <ul>
	<li><a class="active" href="link.html">Link 1</a></li>
	<li><a href="link2.html">Link 2</a></li>
	<li><a href="link3.html">Link 3</a></li>
	<li><a href="link4.html">Link 3</a></li>
    </ul>
</div>

Any help welcomed!
M.

Hello I am having a little bit of trouble with an active state on my navigation. The navigation has been created with a sprite image for normal and hover states. I am now trying to make my active state the same as my hover state. I have been trying to add multiple classes to the li element since the nav background image is a class. Honestly I can't believe I haven't figured it out yet, but I'm sure this is a resolution I will not soon forget once I know the answer. I've posted my code and links to the site and code below.

Many thanks in advance!


Website: http://174.120.172.92/~techsol/

CSS File: http://174.120.172.92/~techsol/styl...ediatype=screen


My navigation code:

Code:

<!-- nav start -->
<ul id="nav">
    <li class="excursions active"><a href="index.php?page=excursions">EXCURSIONS</a></li>
    <li class="live"><a href="index.php?page=live-entertainment">LIVE ENTERTAINMENT</a></li>
    <li class="restaurants"><a href="index.php?page=restaurants">RESTAURANTS</a></li>
    <li class="top"><a href="index.php?page=top-ten">TOP 10</a></li>
    <li class="hostoric"><a href="index.php?page=cannery">HISTORIC CANNERY</a></li>
    <li class="shopping"><a href="index.php?page=shopping">SHOPPING</a></li>
    <li class="days"><a href="index.php?page=juneau-days">JUNEAU DAYS</a></li>
    <li class="access"><a href="index.php?page=local-access">LOCAL ACCESS</a></li>
</ul>
<!-- nav end -->

My navigation CSS Styles:

Code:

#nav{
	width:542px;
	position:absolute;
	top:134px;
	left:320px;
	margin:0;
	padding:0;
	list-style:none;
	overflow:hidden;
}
#nav li{
	float:left;
	margin:0 0 5px;
	height:40px;
	overflow:hidden;
}
#nav a{
	background:url(uploads/template/bg-nav.jpg) no-repeat;
	text-indent:-9999px;
	display:block;
	overflow:hidden;
	height:40px;
}
#nav .excursions a{
	width:122px;
	margin:0 8px 0 0;
}
#nav .live a{
	width:197px;
	background-position:-130px 0;
	margin:0 3px 0 0;
}
#nav .restaurants a{
	width:130px;
	margin:0 5px 0 0;
	background-position:-330px 0;
}
#nav .top a{
	width:77px;
	background-position:-465px 0;
}
#nav .hostoric a{
	width:173px;
	background-position:0 -45px;
	margin:0 9px 0 0;
}
#nav .shopping a{
	width:110px;
	background-position:-182px -45px;
}
#nav .shopping{margin:0 8px 0 0;}
#nav .days{margin:0 12px 0 0;}

#nav .days a{
	width:103px;
	background-position:-300px -45px;
}
#nav .access a{
	width:126px;
	background-position:-415px -45px;
}

#nav .excursions a:hover {background-position:0 -88px;}
#nav li.excursions li.active {background-position:0 -88px !important;}

#nav .live a:hover{background-position:-130px -88px;}
#nav .restaurants a:hover{background-position:-330px -88px;}
#nav .top a:hover{background-position:-465px -88px;}
#nav .hostoric a:hover{background-position:0 -133px;}
#nav .shopping a:hover{background-position:-182px -133px;}
#nav .days a:hover{background-position:-300px -133px;}
#nav .access a:hover{background-position:-415px -133px;}

so what do each one do?

Hi All.

I am just trying to figure out how to make the bottom
border of the active tab disappear so it looks like the
active tab is part of the active panel.

For example:

http://wiki.modxcms.com/images/a/aa/Tabs3.png

THE CSS

Code:

<style>
#tabs {
padding: 10px;
}
#tabs #nav {
margin-bottom: 0px;
margin-left: 8px;
}
#tabs ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#tabs #nav ul li {
display: inline;
padding: 3px 7px;
cursor: default;
background-color: #eeeeee;
border: 1px solid #cccccc;
border-bottom: none;
margin-right: 2px;
}
 
#tabs #nav ul li.active {
border: 1px solid #000066;
border-bottom: 1px solid white;
background-color: #ffffff;
}
 
#tabs #nav ul li:hover {
background-color: #ffffff;
}
 
#tabs #data {
margin-top: 3px;
}
 
#tabs #data div {
display: none;
border: 1px solid #000066;
padding: 10px;
}
 
#tabs #data div.active {
display: block;
}
</style>

THE javascript:

Code:

 <script type="text/javascript" language="javascript">
        function navAllInactive() {
              oNav = document.getElementById('nav');
              oLis = oNav.getElementsByTagName('LI');
       
                for (i = 0; i < oLis.length; i++) {
                    oLis[i].className = '';
                }
        }
       
      function hideAllData() {
        oData = document.getElementById('data');
        oDivs = oData.getElementsByTagName('DIV');
       
        for (i = 0; i < oDivs.length; i++) {
            oDivs[i].style.display = 'none';
        }
      }
       
      function doShow(o, pageId) {
        hideAllData();
        navAllInactive();
        o.className = 'active';
        oData = document.getElementById(pageId);
        oData.style.display = 'block';
        return false;
      }
  
      </script>

THE HTML:

Code:

<div id="tabs">
<div id="nav">
<ul>
<li onclick="javascript:doShow(this, 'relevance');" class="active">Relevance</li>
<li onclick="javascript:doShow(this, 'added');">Date Added</li>
<li onclick="javascript:doShow(this, 'recorded');">Date Recorded</li>
<li onclick="javascript:doShow(this, 'rating');">Rating</li>
</ul>
</div>
<div id="data">
<div id="relevance" class="active">Relevance</div>
<div id="added">Date Added</div>
<div id="recorded">Date Recorded</div>
<div id="rating">Rating</div>
</div>
</div>

Hello Im trying to find a way to force
:active and :focus from temporary states to permanent effects in safari ? basically make them behave just like they behave on internet explorer. As of right now, if you go to the website using safari, you will have to press and hold the mouse button in order to see the image. is there any hack ? or fix to do this ? thanks

the website is http://www.danielyanez.com

and the css is http://www.danielyanez.com/Stylesheet.css

it works well on IE and even in firefox, but in safari you have to keep pressing the button.

Hi,

I have implemented an Apple Style CSS menu however I cannot apply the active state on this. When the current page is displayed, I would like to the button to be highlighted (as if hovering) Can anyone help me please?

HTML
Code:

<ul id="nav">
          <li id="list1"><a href="#"><span>Home</span></a></li>
          <li id="list2"><a href="#"><span>Special Offer</span></a></li>
          <li id="list3"><a href="#"><span>Help</span></a></li>
          <li id="list4"><a href="#"><span>Delivery Information</span></a></li>
          <li id="list5"><a href="#"><span>Technical</span></a></li>
          <li id="list6"><a href="#"><span>About Us</span></a></li>
          <li id="list7"><a href="#"><span>Contact</span></a></li>
</ul>

CSS

Code:

* { margin: 0px; padding: 0px; }
 
#nav {
      background: url(nav.png);
      height: 38px;
      width: 960px;
      margin: 0 auto;
}
 
#nav span {
     display: none;
}

#nav li {
    list-style-type: none;
    float: left;
}
 
#nav a {
    height: 38px;
    display: block;
}

#list1 { width: 114px; }
#list2 { width: 164px; }
#list3 { width: 112px; }
#list4 { width: 206px; }
#list5 { width: 130px; }
#list6 { width: 122px; }
#list7 { width: 112px; }



#list1 a:hover {
      background: url(nav.png) 0px -38px no-repeat;
}
 
#list2 a:hover {
      background: url(nav.png) -114px -38px no-repeat;
}
 
#list3 a:hover {
      background: url(nav.png) -278px -38px no-repeat;
}
 
#list4 a:hover {
      background: url(nav.png) -390px -38px no-repeat;
}
 
#list5 a:hover {
      background: url(nav.png) -596px -38px no-repeat;
}
 
#list6 a:hover {
      background: url(nav.png) -726px -38px no-repeat;
}
 
#list7 a:hover {
      background: url(nav.png) -848px -38px no-repeat;
}

Hi there,
Kindly have a look on below CSS property.
What i want to ask is: when i'll click on a button, it should be look active. I mean it would have to get property of .sidebar_menu:active
But it doen't works.
Please elp me out from this.

Code:

<!--Sidebar menu button start-->

.input {
 color : #FF9000;
 font-size:20px;
;
}

.sidebar_menu{
    border: 0px;
    background: url('images/word-real.jpg') no-repeat top left;
	font-size:18px;
	font-weight:bold;
	text-decoration:none;	
	color:#FFFFFF; 
	font-family: Verdana, Arial, Helvetica;;
	 width:97px;
	 height:42px
    
}
.sidebar_menu:hover {
    border: 0px;
    background: url('images/word-over.jpg') no-repeat top left;
	color:#009BC9;

}

.sidebar_menu:active {
    border: 0px;
    background: url('images/word-over.jpg') no-repeat top left;
	color:#009BC9;
}

br { clear: left; }
<!--Sidebar menu button End-->

Code:

<a rel="11"><input type="button" value="worship" class="sidebar_menu"/></a>
<a rel="22"><input type="button" value="prayer" class="sidebar_menu"/></a>
<a rel="33"><input type="button" value="cell" class="sidebar_menu"/></a>
<a rel="44"><input type="button" value="city" class="sidebar_menu"/></a>
<a rel="55"><input type="button" value="mission" class="sidebar_menu"/></a>