Confusion with the code

Hi there,

I have a personal design which i am currently coding into HTML for learning purpose. I seem to have a little problem with the Hyperlinks. Here's the image how it looks actually

http://img188.imageshack.us/img188/2695/pagedoc.jpg

Now when i click on the menu link i.e about, blog or contact i need the specific page link to be highlighted with the darker white color such as this

http://img142.imageshack.us/img142/6366/page2e.jpg

This is the HTML

<ul>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="about.html">About Us</a></li>
</ul>

If anyone could help out with the CSS for the above problem, i would be really glad and thankful for the great help.

Regards

 

Anyone there to help?

 

Darker white? I went "Lawlz!"

You mean the top menu?

You are writing these pages completely static (by hand)? No server-side includes or any of that?

This technique is everywhere, and there's a few ways to do it, but the easy way is this:

Your default menu is this:

<ul>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="about.html">About Us</a></li>
</ul>

Code (markup):

I don't have your CSS but it's hopefully something awesome like this:
ul {
list-style: none;
float: right;
width: the width (hopefully in em's);
overflow: hidden; (if you need the ul to container the anchors)
}
ul li {
display: inline;
}
ul a {
float: left;
width: whatever you needed;
padding: whatever;
color: #that not-quite readable grey;
text-align: center;
text-decoration: none;
}

ul a:focus, ul a:hover {
color: #fff; (brighty whitey)
}

Though I'd sure prefer, as a user, to see something more than just a subtle colour change, but whatever.

Now you're going to give the special link a class that makes it look the same as the styles you've got for hover/focus (you didn't forget :focus did you? shame!).

ul a:focus, ul a:hover, ul a.current{
color: #fff; (brighty whitey)
}

And on each page, you put that class on just the link you want highlighted. So on the About page, your menu looks like this:

<ul>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="#">Blog</a></li>
<li><a [b]class="current" [/b]href="about.html">About Us</a></li>
</ul>

Code (markup):

On your contact page, your menu will look like this:

<ul>
<li><a [b]class="current"[/b] href="contact.html">Contact Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="about.html">About Us</a></li>
</ul>

Code (markup):

and so hopefully you can do better than a guess how the menu will look like on the blog page.

If you are using server-side includes this gets a bit more complicated, because then you only have one copy of the menu, exactly the same on every page. That's a different technique, where every menu item gets its own class, always, and each page has a different id on the body (or main page container if that's better), and then your CSS is a bit heavier:
along with :focus and :hover, you'll also be listing each combination of body id's and classes. So, more code all around but exchanged for the ease of having just one copy of your menu sitting on your server.

 

Thanks a lot bro..i worked as your suggestions....Thanks again