Forum Moderators: not2easy
It may likely be that I am just confused about what this does. What I thought it did (and would like it to do) is define a separate style for the link when it is selected (and the page is active).
Does this actually work on it's own or do you need to use some other code/javascript/id's to get this to work because so far, it doesn't seem to be doing anything at all.
My Css Code:
#nav-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li {
margin-left: 2px;
margin-top:4px;
text-align:left;
}
#nav-menu li a {
color:#ffffff;
text-transform: lowercase;
text-decoration: none;
font-size:11px;
}
#nav-menu li a:hover {
text-decoration: none;
color: #FF6699;
}
#nav-menu li a:selected {
color: #99FF00;
font-weight: bold;
}
My HTML:
<div id="nav-menu">
<ul>
<li><a href="#page1">Page 1</a></li>
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
</ul>
</div>
I am not specifying which link is "selected" because the menu is going on a dynamic template and not on a static page. Is there any tag/code/script that will work for me?
Thanks,
Bianca
a:active
It may likely be that I am just confused about what this does.
There is no pseudo-element or pseudo-class :selected in CSS2 or CSS3.
..........................
::selection is not applicable to what you are asking.
..........................
What is it that you want the declaration to do?
..........................
I am not specifying which link is "selected" because the menu is going on a dynamic template and not on a static page.
Well, you may have to specify the link at some point in some way. It necessary to get at what you are trying to do.
..........................
The reference to 'dynamic template' makes it sound (to me) like you want to render the link of the page that you are on with a different style.? That is a PHP solution IMO, though I may be misunderstanding what it is that you are trying to achieve.
So unless you add that indication to it somehow in the html, you'll not get a "selected" item in your menu.
There are two main ways to achieve it:
Add on an auter element (can even be the body is you want that) a class or id
andgive each of the menu entries their own class or id that's static to them.
now match them up and style them differently.
e.g.:
first.html:
[pre]
...
<body id="b1">
....
<ul id="menu">
<li id="l1"><a href="first.html>one</a></li>
<li id="l2"><a href="second.html>two</a></li>
</ul>
....
</body>
....
[/pre]
second.html:
[pre]
...
<body id="b2">
....
<ul id="menu">
<li id="l1"><a href="first.html>one</a></li>
<li id="l2"><a href="second.html>two</a></li>
</ul>
....
</body>
....
[/pre]
notice the only difference ebing the id on the body
and in the CSS:
#b1 #l1, #b2 #l2 {
color: red;
}
I've never seen this live on any website, it was just something I came up with when trying to find a use for the new CSS3 :target pseudo class.
try a:active instead
Doesn't that just give the link a style while you are clicking it? The moment you let go of the mouse and leave the page, it will not longer do anything. What I wanted to style was that link once you get to the new page.
html and css both don't have a clue how you got to a given page.
True. Not how, but they do know if I have visited a page already. Would have been great if they could also know when I'm currently on a page :D
The reference to 'dynamic template' makes it sound (to me) like you want to render the link of the page that you are on with a different style.?
Yes, that is basically what I want to do. I'm creating a e-commerce store using a Perl/CGI shoping cart. The sub-menu on the side is actually going to be a list breakdown of sub-categories (tops, bottoms, dresses, etc...). SO, when you're in that given section, I wanted the link to be a different color so the customer knew which page they were on easily.
I don't believe PHP will be compatible with my template but I would like to see/try it anyway.
I use includes for logos, header sections, navigation, and footer at a minimum. Anything repeated on multiple pages that I might want to change later.
Sometimes, just changing a few backgrounds and borders in the CSS makes it look like you are updating the site. Ditto logos, header blocks.....
The suggestions of swa66 will handle the CSS. The rest are other items best dealt with in other fora, as needed, if needed (or wanted).
#nav-menu a:hover, #nav-menu a:active, #nav-menu .current {
color: #99FF00;
font-weight: bold;
}
And in your page:
<head>
<title>page 2</tile>
...
</head>
<body>
...
<div id="nav-menu">
<ul>
<li><a href="#page1">Page 1</a></li>
<li><a class="current" href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
</ul>
</div>
By adding the .current class you can specify which link is "highlighted" by default on each page. This removes the need for any external code and removes the :selected.
I'm thinking I will need to look into JavaScript to get this accomplished.
Thank you all for your time and input. I appreciate it.
#nav-menu a:hover, #nav-menu a:active, #nav-menu .lit {
color: #99FF00;
font-weight: bold;
}
<a id="link1" class="unlit" onclick="highlightMe('link1')">
With your javascript looking like:
var linkLight = 0
function highlightMe(aID){
if(linkLight) linkLight.className = "unlit" //close out any currently lit
linkLight = document.getElementById(aID);
linkLight.className = "lit";
}
-OR-
If you're already using classes and can't do a class switch:
var linkLight = 0
function highlightMe(aID){
if(linkLight){ linkLight.style.color = "#fff"; linkLight.style.fontWeight = "normal";} //again turns off currently lit.
linkLight = document.getElementById(aID);
linkLight.style.color = "#9F0";
linkLight.style.fontWeight = "bold";
}
At this point I'm not sure how your links work calling new content when clicked, but I'm sure you've gotten it figured out. For a DHTML page it's JS - not CSS.
You have all been extremely kind! Thank you :)
