• Locked
1 reply [Last post]
Sat, 2010-12-11 05:40
xstortionist
xstortionist's picture
Offline
newbie
Last seen: 11 years 35 weeks ago
Timezone: GMT-6
Joined: 2010-12-11
Posts: 1
Points: 2

Picture 7.png

I'm having issues trying make the .active link that's within the blue background be white. I currently have it setup so when you hover over the links it displays white no problem. But I can't find a way so that if I'm on a cetain page the link color stays white with the blue background. I've tried everything I can think of, but I've had no luck. I am fairly new to CSS and would appreciate any kind of advice.

This is the code that I'm using in the style sheet.

.left-block ul li {
  font-size:0.8em;
	list-style-type:none;
	background:url(../images/left-block-list-item-bg.gif) bottom repeat-x;
	position:relative;
}
 
.left-block ul li:hover,
.left-block ul li.active {
	background:#00739B url(../images/left-block-list-item.png) bottom repeat-x;
	font-weight: bold;
	color: #FFF;
}
 
.left-block ul li a:link {
  color:#333;
	text-decoration:none;
	display:block;
	padding:8px 0 10px 30px;
}
 
.left-block ul li a:visited {
  color:#333;
	text-decoration:none;
	display:block;
	padding:8px 0 10px 30px;
}
 
.left-block ul li a:hover {
  color: #FFF;
	text-decoration:none;
	display:block;
	padding:8px 0 10px 30px;
}
 
.left-block ul li a img {
  position:absolute;
	top:8px;
	left:8px;
}

This is the HTML code I'm using on my web design.

<div class="left-block">
			   <h3><div class="left-block-header-inner">MAIN MENU</div></h3>
				 <ul>
				   <li><a href="" title="">My Calls</a></li>
					 <li class="active"><a class="active" href="">Phone Setup</a></li>
					 <li><a href="" title="">My Account</a></li>
					 <li><a href="" title="">Add Minutes</a></li>
                     <li><a href="" title="">International</a></li>
					 <li><a href="" title="">Support</li>
				 </ul>
			 </div>

Thank You! I hope someone is willing to tackle my question. Big smile

Top
Tags:
Mon, 2010-12-20 12:09
#1
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Then try styling a.active

Then try styling a.active rather than the li.active? Perhaps you have an overridding property at work? Like the ruleset for a:link Wink

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Top
  • Locked