homepage Welcome to WebmasterWorld Guest from 54.226.0.225
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Trouble with li a:selected
MizzBia




msg:4033884
 7:09 am on Nov 30, 2009 (gmt 0)

Hello,
I'm trying to create a side menu using an unordered list. Setting up the menu was easy but I'm having some trouble with li a:selected.

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

 

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.

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.

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 :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved