Forum Moderators: not2easy
I use below css style with the javascript from Lance
.menu body {color: #d75414;font: 10px Verdana, sans-serif;font-weight: bold;text-decoration: none;text-align: left;}
.menu a {color: #d75414;font: 10px Verdana, sans-serif;font-weight: bold;text-decoration: none;text-align: left;}
.menu a:link {color: #d75414;font: 10px Verdana, sans-serif;font-weight: bold;text-decoration: none;text-align: left;}
.menu a:visited {color: #d75414;font: 10px Verdana, sans-serif;font-weight: bold;text-decoration: none;text-align: left;}
.menu a:active {color: #666666;font: 10px Verdana, sans-serif;font-weight: bold;text-decoration: none;text-align: left;}
.menu a:hover {color: #e9960a;font: 10px Verdana, sans-serif;font-weight: bold;text-decoration: none;text-align: left;}
.menu a#Current {bold 10px/23px Verdana,Geneva,Arial; COLOR: #d75414; TEXT-DECORATION: none
}
but nothing happens.
Anyone?
There are a couple of things to mention here; first and most importantly, your markup does not match your css. You've got this in your css:
.menu a#Current {bold 10px/23px Verdana,Geneva,Arial; COLOR: #d75414; TEXT-DECORATION: none
}
...but the following appears nowhere in the markup:
<tr class="menu">
<td>
...
<a id="Current" ... > ... </a>
...
</td>
</tr>
What "
.menu a#Current" means in English is "these styles apply to any instance of an <a> element that is located inside another element with the class of 'menu', and which has an id of 'Current'." Now the second thing that's going on is that this declaration:
.menu body {color: #d75414;font: 10px Verdana, sans-serif;font-weight: bold;text-decoration: none;text-align: left;}
...probably makes no sense. This declaration applies to any <body> element that occurs inside an element with the class 'menu'. Unless your <html> element has the class 'menu', this is nonsensical.
Another thing is that the css for the links is unreasonably bloated. Why declare all those font styles over and over and over again? Try something more like this (I've changed the style for the <body> element to what I think you meant and corrected several errors in addition to lightening the code):
body { /* Font properties for EVERYTHING in the <body> element (was '.menu body'): */
color: #d75414;
font-family: Verdana, arial, helvetica, sans-serif;
text-align: left;
}
.menu a {
/* Almost all declarations removed, because the ones in the body element are identical, except the font-weight and text-decoration */
font-weight:bold;
text-decoration:none;
}
menu a:link,
menu a:visited {
/* These combined, 'cause they were identical...except that they have no properties not already inherited from the <body> element and 'menu a' above */
}
menu a:active {
color: #666; /* Shorthand color declaration. Nothing else was different but the colour... */
}
menu a:hover {
color: #e9960a;
}
menu a#Current {
/* Removed some font properties; I'd guess they were better applied to either 'body' or '.menu a' */
color:#d75414;
}
It's a lot nicer, right?
;)
-B
He was useing a j/s Function to change the ID of the links dynamicly all depending on what page the user was at, and than defineing the ID like the post befor me said.
but then with a different color for currnet:
menu a#Current { color:#666666; }
and as calumet45 is saying: I was using the javascript
but there is no id asigned to current page. The maker of the script in the other thread talks about makingt he javascript on load. I did it this way without result:
<html>
<head>
...
...
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
</head>
<body onLoad="MM_callJS('/scripts/onload.js')">
...
...
</body>
</html>
and the script ofcourse:
<!--
function GetCurrentPage()
{ if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
var thisPage = location.href;
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
thisHREF = anchor.getAttribute("href");
if ((thisHREF == thisPage) ¦¦ (location.protocol + "//" + location.hostname + thisHREF == thisPage)) {
anchor.id = "Current";
return;
}
}
}
//-->
if ((thisHREF == thisPage) ¦¦ (location.protocol + "//" + location.hostname + thisHREF == thisPage)) {
Try posting this question to the Javascript Forum [webmasterworld.com]. You might have more luck there.
cEM