londrum
msg:4033941 | 10:19 am on Nov 30, 2009 (gmt 0) |
try a:active instead
the link will still be an actual link, though, even though it leads to the same page. if you're putting it in a dynamic template the best thing to do is change it from a link to something else, so people can't click it.
|
D_Blackwell
msg:4033997 | 1:50 pm on Nov 30, 2009 (gmt 0) |
| 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.
|
swa66
msg:4034076 | 3:44 pm on Nov 30, 2009 (gmt 0) |
html and css both don't have a clue how you got to a given page. 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 it to the element that is different. E.g. by adding a class="selected" and styling that one differently.
- The other way is more complex to understand at first, but might be what you seek:
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;
}
|
|
This makes those where the id on the <body> and the id on the <li> match up red (or however you want to highlight them.
|
swa66
msg:4034079 | 3:54 pm on Nov 30, 2009 (gmt 0) |
There is a third way to do this: but it requires CSS3 support and the use of fragment identifiers:
[webmasterworld.com...] 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.
|
MizzBia
msg:4034239 | 9:34 pm on Nov 30, 2009 (gmt 0) |
Thank you all for your help! I guess I had misunderstood how this worked. 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.
|
D_Blackwell
msg:4034380 | 3:30 am on Dec 1, 2009 (gmt 0) |
Based on the OP, it sounded as though my preference would be to put the menu on each page with .inc.php as an include. This makes working with the navigation/menu a lot easier in the long run. The PHP would be used, in part, to identify what page the user is actually on, and the CSS would style the link of the current page uniquely. I often remove the link of the current page completely. The on-page HTML/ external CSS/ included .inc.php/and PHP all contributing their part to the whole. 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).
|
likes2burn
msg:4034926 | 10:28 pm on Dec 1, 2009 (gmt 0) |
What you can do is this: #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.
|
MizzBia
msg:4035010 | 12:16 am on Dec 2, 2009 (gmt 0) |
Yeah, I'm aware of that, however because it is a single template being used for multiple pages (and not a static page), I was looking for a solution that would work dynamically. 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.
|
likes2burn
msg:4035023 | 12:32 am on Dec 2, 2009 (gmt 0) |
Then you'd like to use something like this: #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.
|
MizzBia
msg:4035142 | 4:41 am on Dec 2, 2009 (gmt 0) |
Thank you guys so much for your help! I actually ended up trying swa66's suggestion and was able to get it to work with my template so thank you very much for that suggestion. You have all been extremely kind! Thank you :)
|
|
