Active link (rides again)

460 Posts

hotdiggity Reply #1, 19 years, 7 months ago

I know there’s a few threads out there regarding active links. Most of the ones I’ve seen mostly relate to DropMenu and ’here’ class however I noticed Modx/Wayfinder generates an "active" class in the <li> tag...

<li class="active"><a href="whatever.html" >Whatever</a></li>

Which I’ve spec’d in my cms as:

#navbar ul li.active a:link {color: #000000}

This works fine on a test page but doesn’t work online when the pages are dynamically created by Modx.

I realise I’m missing something, possibly needs to be a Wayfinder parameter or something ??

Mostly harmless.

576 Posts

sirlancelot Reply #2, 19 years, 7 months ago

Check your sourcecode and make sure id="navbar" is not the ul. Your CSS does this

-select id="navbar"
--select all ul
---select li class of "active"
----select a type "link"

if your ul is the "navbar" make your CSS like this:

ul#navbar li.active a:link { color: #000; }

460 Posts

hotdiggity Reply #3, 19 years, 7 months ago

It actually works when i copy the source code from a modx generated page into a new doc on my desktop with a link to the css. It just doesn’t want to work out of modx for some reason. It’s really begining to do my head in!

Here’s a simplified version which works fine.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

	<head>
<style><!--
		#navbar {
	font-family: Verdana, Arial, Helvetica,  sans-serif;
	position: relative;
	height: 25px;
	background-color: #999;
	width: 100%;
	font-weight: bold;
	text-align: left;
	font-weight: bold;
	padding-top: 10px;
}

#navbar ul li a:link, #navbar ul li a:visited {
	color: #ffffff;
	text-decoration: none;
	display: inline;
	padding-bottom: 5px;
	margin-right: 18px;
	margin-bottom: 0px;
	margin-left: 18px;
}

#navbar ul li a:hover, #navbar ul li a.current {
	color: #000000;
	text-decoration: none;
}

#navbar ul li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	display: inline;
}

#navbar ul {
	margin: 0px;
	padding: 0px;
}
#navbar ul li.active a:link {color: #000000 } -->
</style>
	</head>
	<body>
<div id="navbar">
  <ul><li class="active" ><a href="#">Home</a></li>
          <li><a href="about" >About</a></li>
          <li><a href="members.html" >Members</a></li>
          <li class="last"><a href="contact.html" >Contact</a></li>
  </ul>
</div>

	</body>
</html>

Mostly harmless.