navigation using ul li: how to make one item selected?

[SelArom]

greetings all, I'm trying to make a sidebar navigation using ul and li tags, and structurally it works fine, but I cannot seem to get one of the list items to appear "selected" so that it displays in a different color from the rest of the menu. Here's basically how it's laid out:

<div id="navigation">
	<ul>
		<li class="selected"><a href="link1.aspx">link 1</a></li>
		<li><a href="link2.aspx"link 2</a></li>
		<li><a href="link3.aspx">link 3</a></li>
	</ul>
</div>

and here's the css that goes with it

#navigation ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	background:url(images/rowBackSmall.gif) no-repeat;
	color: #FFFFFF;

}

#navigation li a
{
	font-size: 10px;
	line-height: 16px;
	display: inline;
	background-image:url(images/rowBackSmallB_Normal.gif);
	padding-left: 10px;
	background-position:left;
	background-repeat:no-repeat;
	text-decoration: none;
	color: #FFF;
}

li.selected a
{
	font-size: 10px;
	line-height: 16px;
	display: inline;
	background-image:url(images/rowBackSmallB_Event.gif);
	padding-left: 10px;
	background-position:left;
	background-repeat:no-repeat;
	text-decoration: none;
	color: #0099cc;
}

#navigation li a:hover
{
	padding-left: 10px;
	background-image:url(images/rowBackSmallB_Event.gif);
	background-position:left;
	background-repeat:no-repeat;
	color: #0099cc;
	text-decoration: underline;
}

no matter what I try, all the links render the same color, white. How do I override the individual .selected so that it renders differently?

thanks!

[autocrat]

Hmm... pause and think a moment.
Are you selecting a List Item... or a Link?

You should maybe be assigning the "selected" class to the <a> instead of the <li>?

Give that a go, and see how you fair.

[SelArom]

thank you for your reply. actually I had considered this route, but it is the list item that is selected, not the link, at least logically that is how it makes sense to me. the link may change but that item is the one that is selected. so shouldn't I assign the list item to be selected, then it's <a> would then be modified by li .selected a. at least that's how it makes sense to me...

further, i may not make the selected item a link. if they select that link, sometimes I may render it as just text, but i still want it to be a different color...

[autocrat]

Fair enough.

www.soldiers-league.com
have a look at that one

[MidiMagic]

Selected is not an attribute. Focus is a pseudoclass.

[tainak]

Hi,

Spent a while trying other options on my site and came up with putting the ul as part of the answer and fitting the class=selected within <a>:

in CSS

ul a.selected
{
	font-size: 10px;
	line-height: 16px;
	display: inline;
	background-image:url(images/rowBackSmallB_Event.gif);
	padding-left: 10px;
	background-position:left;
	background-repeat:no-repeat;
	text-decoration: none;
	color: #0099cc;
}

in HTML

<div id="navigation">
  <ul>
		<li><a href="test.html">link 1</a></li>
		<li><a href="test2.html" class="selected">link 2</a></li>
		<li><a href="test3.html">link 3</a></li>
  </ul>
</div>

Hopefully works for you too,
Taina

[almostbob]

css has states for all elements as psuedo(?cantspell)classes
<element>
<element>:hover
<element>:active
<element>:focus
<element>:first-line
<element>:first-letter and others
active and focus mean pretty much the same thing but account for browser differences
selected='selected' for a <li> has nothing to do with presentation, it is a method of defining the default choice

li a { color:red; }
li a:hover { color:yellow; background:red; } //mouseover
li a:focus { color:white; background:green; } // roughly = Selected
li a:active { color:white; background:green; } // roughly = Selected

excusing disgusting colors
any parent child (anything) combination can be <element>

edit**

Focus is a pseudoclass

knew I can't spell that word

[mhdilan]

HTML Part,. Place this part on body section

<div id="nav">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
    </ul>


</div>

CSS Part,.Place this on the css file

#nav ul{
list-style:none;
margin:0px;padding:0px;
}

#nav ul li{
background-color:#999999;
float:left;
margin-right:1px;
text-align:center;
}

#nav ul li a{
background-image:url(bh.gif);display:inline;
display:block;
width:150px;
height:40px;/*height - (height size- top padding size), (40px = 50px-10px) */
padding:10px 0px 0px 0px;
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
#nav ul li a:hover{background-image:url(bg2.gif);}

[Troy III]

I suggest you study this code at http://www.daniweb.com/web-development/web-design-html-and-css/code/226127/pure-css-image-gallery-with-mouse-click-swap and see what you come up with.

pick the updated (html5 & back.comp.) code from the last post to play with. May give you some advanced ideas on how to.

[tomparker]

There's a fairly simple solution to this. Assign an id to your list items in your html on each page, and then just ad one entry to your css as follows. The example below changes the Home page link color from off-white to gray. (also underlines on hover)

<div id="nav-bar">
    <ul>
      <li id="selected"><a href="index.html">Home</a></li>
      <li><a href="page2.html">Page2</a></li>
      <li><a href="page3.html">Page3</a></li>
    </ul>
</div>


#nav-bar ul {
    float : left;
    list-style : none;
    margin : 0;
    padding : 0;
}

#nav-bar ul li {
    display : inline;
}

#nav-bar ul li a {
    display: inline;
    float : left;
    padding : 0 10px;
    color : #EDEDED;
    text-decoration : none;
}

#nav-bar ul li a:hover {
    color : #AAAAAA;
}

#nav-bar ul li#selected a {   /* this changes color of the menu item of current page */
    color : #AAAAAA;
}

[<M/>]

@tomparker, i think by now... after 4 years, he probably knows how to solve his question :)

[<M/>]

nor is he going to mark this solved after 4 years...

[tomparker]

@michael I'm sure the original person who posted found a solution a long time ago. I added this solution for other's who may be searching today. I often find answers to problems in forums where the thread was started years prior. Just putting in my two cents! :)

[<M/>]

@tomparker, i do realize you did that, but what amazes me most is why don't people google first... (they can google kittens playing but they can't search anything technical ever...)

[tomparker]

@michael Actually, Google is how I came across this thread. I was experiencing a 'flakey' problem with a menu I was working on, and searched Google to see if I could find something where someone else had a similar problem.

After viewing a couple of the results, I just went back to one of my prior projects, to see what I had done differently there. I suppose I should have just done that first, but I was thinking that what I was doing on the current project WAS the same as I did before, but that I was just missing something. Anyway... bottom line, turns out I wasn't doing it exactly as I had before, and by duplicating my original code, resolved the problem...so.. I posted the code here.

I do know exactly what you mean though about people not taking the time to researching on their own, before they post questions on forums. Many times the answer is all over the place on the net. Just Google It! ha

btw, I saw one very 'complicated' solution on another site, so that was a reason for me posting here, even though the thread is old.

[<M/>]

btw, I saw one very 'complicated' solution on another site, so that was a reason for me posting here, even though the thread is old.

Well that is reasonable :)

[<M/>]

Also notice that the person who asked the question never came back after 3 years to mark the question solved...

[Cobra98]

I came across this thread looking for an answer to almost the exact information that is here. I'm not brand new at this but new enough that I certainly could use some help. I'm trying to duplcate a horizontal nav menu like the one that a developer I had working for me did on my pages. He is gone now (quit) so I'm trying to work this out myself. Anyway this is what I'm trying to duplicate.

<div id="nav">
        <ul class="nav">


                <li><a href="/index.php" class="selected">Home</a></li>
        <li><a href="/custom-t-shirt-design-ideas.htm" class="">Shirt Designs</a></li>
        <li><a href="/product-catalog.htm" class="">Products</a></li>
        <li><a href="/faq.htm" class="">FAQs</a></li>
        <li><a href="/designer.htm" class="">Design Studio</a></li>
        <li><a href="/contact-us.htm" class="">Contact Us</a></li>

        </ul>

</div>

I don't understand the ul class. All the information I look at none of it has this included.If anyone is willing to help then I can show you the page he create and what I'm trying to duplicate.

Thanks in advance

[tomparker]

@Cobra98 I'll be glad to help. If you take a look at the code that I posted a couple of weeks ago you will see that your html is very similar.

As far as understanding the ul class, I'll get to that, but first of all what might be causing some confusion is that in your code the div has an id of 'nav', and your ul has a class of 'nav'. That will work, but it makes it really easy to make a mistake and get the two confused in your css file.

When you refer to an id in your css file, precede it with a '#" and when you refer to a class in your css file, you precede it with a '.' So in your present case you will have a #nav { ...properties for your div ...}; and a .nav { ...properties for your ul..};

As a rule of thumb, use an id for things that will only be used once in the document, and a class for things that may be applied to multiple elements. An id can only be used once, but sometimes you will see a class used for something that could have been an id(just used once)... make sense?

I suggest that in your html as shown above, first...change your ul class name to something else, like 'navList', just to help avoid avoid a possible mistake in your css.

second... change class='selected' to id='selected' (you will never have more than one selected).

third... your css for the selected element will look like this: (similar to my code above)

#nav ul li#selected a { /* this changes color of the menu item of current page */
color : #AAAAAA;
}

Notice how the '#selected' is attached to the li.

Hopefully that will get you on your way. Let me know how it goes.

One more thing, just a heads up...where you have a '/' in front of your file names in your hrefs, that's fine if all the files referenced in your menu are at your root directory on your server, but be aware if you are working in a subdirectory, that the '/' points to your root directory. So for instance if you have a 'dev' or 'test' area, ie dev.mysite.com or mysite.com/dev where you are developing, then '/index.php' points to mysite.com/index.php, not mysite.com/dev/idex.php. No extra charge for that tip! ;)

[Cobra98]

Thank you @tomparker for the info! Actullay the code that I listed isn't code that I wrote. The programmer that created my site wrote everything. I can't change anything because he created a custom CMS. I have access to all the files on the server but I cannot figure out what goes with what.

I did figure out the nav for the page I am trying to duplicate with the exception of a rollover effect that he has going on in the nav. I know how to add a a:hover to my nav id but my hover is only changing color to the link text and a background for the link text. When you hover his, the entire button changes. I don't know if he used a mouseout Imageswap or not. I don't think he did because I do not see it in the page source. He is doing something else. Each li only has a broder and no backgroud color but when you hover the li turns orange. Not just the broder but the background and border. I'm stumped right now. To tell you turth I'm afraid to try to many different things for fear of messing up what I've already done but I know I'll never figure it out if I don't.

[Cobra98]

Here is what he has in the default css

#nav {
    border-top:1px solid #7cc2f6;
    border-bottom:1px solid #eee;
    background:#4c8ccc url('../images/bg_nav.png') repeat-x;
    height:43px;
}
ul.nav {
    margin:5px auto;
    width:1005px;
    text-align:center;
}
ul.nav li {
    display:inline-block;
    font-weight:bold;
    font-size:16px;
    margin:0 10px;
    padding:0;
}
ul.nav li.search {
    margin-left:20px;
    margin-right:0;
}
ul.nav li a {
    color:#fff;
    display:inline-block;
    padding:5px 10px;
    text-decoration:none;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border:1px solid #35699b;
}
ul.nav li a:hover, ul.nav li a.selected {
    background:#de7621;
    border:1px solid #fca45c;
}

ul.nav li input {
    color:#444;
    display:inline-block;
    padding:5px;
    text-decoration:none;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border:1px solid #35699b;
    background:#f2f2f2;
    width:160px;
    text-align:left;
}

I am using Dreamweaver. Obviously he wrote this and didn't use a WYSIWYG. I do not understand how he created things such as this ul.nav li?

[tomparker]

You are welcome for the help @cobra98! From what you described in your previous post, and then looking at the code here, it appears that no image is being loading for the button when it is selected, but that just the background color and border color are changed.

Whether WYSIWYG, or hand coded, the end result should be the same, for the most part. I don't know what your asking regarding the creation of the the ul.nav li.

[Cobra98]

My css file will only have #nav li or #nav ul. If you notice his css code read ul. nav li. Why do all my rules start with #nav and his start with ul. nav. Does that make a difference as to why I've been unable to recreate his nav bar?

Thanks again!

[tomparker]

Ok, I see what you're asking now. This goes back to what I mentioned in my earlier response about using 'nav' as an id, and also using 'nav' as a class. It's best to use different names to avoid confusion. When you see the #nav, in the code above, that's refering to the id of the navbar, and when you see '.nav' that's refering to the class assigned to the <ul> elements.

Again I recommend you change your class name to something else... but.. bottom line, in your current situation, ul.nav li, is referencing the same element as if you have #nav ul.nav li . Actually the latter is the more 'correct' version.

[Cobra98]

That makes perfect sence. I'll give it a try and let you know the result. Thanks again